- Setting Multiple Click-Throughs
- Setting a Background Click-Through
- Setting an Element Click-Through
- Creating a Click-to-Call option
- Controlling where a Clickthrough URL will Open
- Clickthrough URLs and Ad Servers
For website components, display ads and digital signage content, you can add a click-through URL to your HTML5 design, linking to a website, or phone number for mobile designs.
A click-through URL is a location that the viewer is redirected to when they click on a certain part of the design.
There are two main types of click-through URLs:
Background URLs make it so that the entirety of the design can be clicked on to redirect the viewer. Element URLs make it so that only a certain element can be clicked on to redirect the viewer. Element URLs are subject to the layering properties of Flexitive, so make sure to review Layering and the Layers Panel for more information.
Setting Multiple Click-Throughs
You can apply a different click-through URL to as many elements as you’d like, and then easily manage them in the Layers Panel. You can set a background click-through and an element click-through for each element. A background click-through affects the entire design, and sits below any click-throughs you add to an element.
For example, in this Adaptive Bean design, flexitive.com has been set to the background click-through, and the call-to-action button image has been set to the Flexitive Showcase. When the call-to-action button is clicked it will go to the Showcase, and when any other part of the ad is clicked, it will go to flexitive.com.
Setting a Background Click-Through
- From the Layers Panel, navigate to the Background Colour Layer, and select the Link Icon.
- In the modal that pops up, enter your Click-through URL. By default, the link will open in a new tab.
Setting an Element Click-Through
In addition to setting a Background Click-Through URL, you can also add a Click-Through property to any element. In order to do this, follow these steps:
- Open the Layers Panel and navigate to the Element Layer you'd like to set a click-through on, and select the Link Icon
2. In the modal that pops up, enter your Click-through URL.
For element click-throughs, you can also Enter a click tracker name, which allows you to give the URL you are entering a "name" in the exported code. This is especially useful if you want your Media agency to be able to change the click-through URLs after you've sent them the ZIP export. This name is usually optional, but in some cases, you will need to set it before exporting.
If you don't have the click-through URL, you can put any placeholder URL you want in the URL box and follow the steps outlined above for adding in your click tracker. You need a placeholder URL to ensure that the element shows up in your ad-server as being able to receive a click-through URL.
Creating a Click-To-Call Option
When setting your click-through URL, it is possible to set an object as a Click-to-Call button for mobile devices.
To set up a Click-to-Call option in your design, all you need to do is set the click through for an element or background as tel:1-XXX-XXX-XXXX using your telephone number.
Click-to-Call is only possible on Mobile devices, and will not function on desktops or tablets.
Controlling Where the Clickthrough URL will Open
When setting a clickthrough URL, the default behaviour will be to open the URL in a new tab. This can be changed using the 'Open in' dropdown in the Set Clickthrough URL modal.
Using this dropdown, you can set the clickthrough URL to open in:
- A New Tab (Default)
- The same tab
- The parent frame for the design
- The same frame as the design
For every site, it is possible to set different 'X-Frame-Options'. X-Frame-Options control whether or not a website can be opened inside of a frame, iframe or object. If a site using the settings 'X-Frame-Options: DENY' or 'X-Frame-Options: SAMEORIGIN', the URL will be blocked from opening in the iframe that the design is served in. An example of a site using an X-Frame-Option setting is google.com.
If the site you would like to use as a click-through URL is set up with an X-Frame-Option, we recommend that you do not set the Click-Through URL to open in the same window.
Clickthrough URLs and Ad Servers
For some ad servers, such as Google Ads, it is required that the Clickthrough URL for your design be set within the ad server itself, rather than within Flexitive. Other ad servers may only allow you to use a background clickthrough URL in your design.
When you export a design for an ad server, Flexitive will adjust the clickthrough URLs such that it will work in the ad server you chose. This includes making the following changes:
- Flexitive will add any required click-tracking code required for your ad server, such as setting clicktags in the design
- If the clickthrough URL must be set in the ad server, Flexitive will remove the clickthrough URL from the exported file
- If the ad server only allows background clickthrough URLs, Flexitive will remove any element specific clickthrough URLs from the exported file
If you have any questions regarding how your files will be adjusted for any specific ad server, reach out to email@example.com for more information.