Hello again! Or maybe this is your first time here?
We here (the Banner Squad) know a thing or two about HTML5 banners. And if you are like us, you may have come across the term “clickTag” a few times and wondered “what on earth is clickTag?”. Well trouble not, as in this blog we will go through the fundamentals of clickTag, what it does and how it is implemented.
What is ClickTag?
The clickTag serves as a parameter or variable used by Ad Networks, publishers, or DSPs to monitor clicks on landing page URLs. This parameter can be referred to as ‘ClickTAG’, ‘clickTag’, or ‘ClickTag’ depending on the case used by the ad network’s serving technology. However, its ultimate purpose remains the same – to direct the user to the correct landing page and track the ad’s click performance.
The concept of clickTag was initially introduced in Flash Ads, where a <Div> tag was placed at the top and assigned an onclick event. When a user clicks on the ad, the script is executed, and the user is redirected to the landing page in a new window, with or without tracking parameters.
Implementation Methods for clickTag
- One option for DSP or Ad Serving Platforms involves inserting a script into the <head> section and an onclick event into a <div> that surrounds all content in the <body>.
- Other platforms, such as Xandr (formerly known as Appnexus), offer a CDN link for their Javascript library to be placed in the <head>, with an additional onclick event added to the enclosing <div>.
Implementation of clickTag with Google Web Designer
In HTML5 Ad builders such as Google Web Designer, the process of adding click tags is relatively simple. Typically, a custom code is applied to the click event that covers the entire document. This process involves using the same JavaScript code with minor variations depending on the variable used (ClickTag/ ClickTAG/ clickTag). Below is the click tag code used in our video demonstration:
The getParameterByName function has been created to retrieve a specific parameter from the URL. It uses a regular expression to match the parameter name and decode the value, which may contain spaces. The window.open method is then used to open a new window with the value of the parameter named ‘clickTag’ as the URL.
Using Adobe Animate to Implement clickTag
The code used in Adobe Animate is similar to the one shown above, although it may vary depending on the platform. The procedure is slightly different since Animate has a different interface compared to GWD. To access the Mouse click event in the HTML5 Canvas > Event handlers, you need to navigate to the ‘Actions’ section in the Window tab. From there, you can replace the existing code “alert(“Mouse clicked”); with the code provided above. For a more practical demonstration, you can watch the following video.
Evaluating clickTag Functionality in a Web Browser
To evaluate the functionality of the click tag within the browser, we have the option to include it.
When the main banner HTML file, index.html, is opened in a browser, the browser address bar will display something similar to this:
Upon clicking the banner, the website page will open in a new window, serving as confirmation that the clickTag is functioning properly.
A Guide on Implementing clickTag in The Trade Desk with Google Web Designer
To improve the banner, a tap area should be included. After selecting the tap area, click on the + symbol in GWD Events. A custom code should be chosen and given a name, such as “clickEvent”. The code window.open(clickTag); should then be added. To complete the process, the script should be inserted before the closing /body> tag.
script language=”JavaScript”>
The function “getParameterByName” is used to retrieve a specific parameter by name.
The variable name is being modified by replacing any occurrences of “[” with “[” and any occurrences of “]” with “]”.
A new regular expression, denoted by the variable “regex”, has been created with the pattern “[\\?&]” followed by the name variable and the string “=([^&#]*)”.
The variable results is assigned a value from executing the regex function on the location.search parameter.
If the returned results are null, then an empty string is returned. Otherwise, the results are decoded and any plus signs are replaced with spaces.
The variable “clickTag” is assigned the value returned by the function getParameterByName() with the parameter “clickTag”.
_ /script>_
Steps for adding clickTag in Sizmek with Google Web Designer
- Choose the desired element and select the + button in the Events section. Keep in mind that the element is typically a designated touch area.
- Proceed to Tap area > Touch/Click > Custom > Add custom action in the Event dialog box.
- Provide a name for the function.
- Type adkit.clickthrough(); in the designated text field.
- Click OK.
Steps for Adding ClickTag in Adroll with Google Web Designer
Step 1: Place this script within the head> tag.
_ script language=”javascript”>_
The variable “clickTag” has been assigned the value of “https://www.google.com”.
The script is closed.
Step 2: Choose the tap area and click on “Add event”, then enter your own custom code.
Use the “clickTag” to open a new window with the “_blank” option.
Step-by-Step Guide on Adding a ClickTag in Display & Video 360 with Google Web Designer
- To incorporate your advertiser’s landing page or website, simply add the following script tag in the head> section and replace “https://www.google.com” with the desired URL: _ script type=”text/javascript”> var clickTag = “https://www.google.com”; /script>_
- Next, add a click event to the body and insert the following custom code.
The clickTag can be accessed by using the window.open() method.
The following is a list of steps to avoid plagiarism:
- Understand the concept of plagiarism and the consequences it can have.
- Use proper citation and referencing methods for all sources used in your work.
- Take careful notes and keep track of all sources to avoid unintentional plagiarism.
- Use your own words and ideas when writing, rather than copying from others.
- When in doubt, always err on the side of caution and cite the source.
- Use plagiarism detection tools to ensure your work is original.
- Seek guidance from your instructor or a writing centre if you are unsure about proper citation and referencing techniques.
Note:
When using an Ad serving platform, it is crucial to adhere to the specific rules and guidelines in order to properly implement the clickTag. These instructions are applicable to all platforms.
Need a hand?
Our expert team is here for you. Reach out, and let’s craft standout banner ads together.
Let's discuss your HTML5 Banner project today!
© 2024. Banner Squad