Clickio Ad Tags Implementation
Please proceed to this section to find out the steps to create an ad unit in the Clickio Publisher Platform.
Ad Unit Insertion Methods
Please note that for any type of insertion, the Clickio header code must be present on the pages. Example:
<script async type="text/javascript" src="//s.clickiocdn.com/t/123456/360_light.js"></script>
You can find a header code for your site in the Clickio Publisher Platfrom.
Methods:
- Direct insertion on the page (Ad unit code is available in the interface) You can manually insert the code into the HTML structure of your page. Some formats like Smart, Horizontal Sticky, Interstital, Splashscreen don't require a particular placement or container on the pages, and could be inserted into any place inside the body.
- Auto-insertion (This option is not available in the interface, please contact the Clickio team) Auto-insertion mode automates the insertion of any ad unit on the pages into any position using a client side js logic. You will only need to have Clickio header code inserted on the pages.
- SPA (Single Page Application) For sites using SPA, it is important to properly configure the insertion of Clickio codes so that they display on all "pages." Use routing events to trigger the loading of ad codes. Please read more details on SPA implementation here
Clickio Code Insertion Recommendations
- Ensure the header code is placed within the <head> section of the page. This guarantees a smooth script operation and optimized monetization for your site.
- We recommend placing the ad unit's direct code within the <body> section of the page. If you are using inline codes, ensure they are properly integrated into your content to avoid disrupting the page structure. Some formats like Smart, Horizontal Sticky, Interstitial, Splashscreen don't require a particular placement or container on the pages, and could be inserted into any place inside the body.
- We advise excluding all Clickio codes from any caching rules, plugins, or optimizers (e.g., WP Rocket). Caching and minifying Clickio codes may break functionality and cause incorrect operation.
Please follow this guide to exclude Clickio header and inline codes from caching and minification in the WP Rocket Wordpress plugin.
Ad Unit/Site Options
Available in the interface:
- Create an ad unit or site
- Delete an ad unit
- Select device targeting
- Rendering options when the ad unit is unfilled
Settings that require contacting technical support:
Some settings may need assistance from the technical support team, including:
- All ad types: Sizes, frequency settings, URL targeting (include or exclude specific pages from serving)
- Horizontal sticky: Disable close button, initial visibility, position (top or bottom), position offset
- Splash screen: Close button timer, auto-close
- Smart (in-article): CSS selectors for insertion, maximum number of units, distance between units, CSS selectors, and distance from other elements on the page
- Floater: Position, offset
- Vertical sticky: Multi-insertion, scroll distance
Debugging & Testing Parameters
To verify the proper functioning of Clickio ad codes, use the following parameters:
1. Image stubs: Use stubs to test code placement without displaying real ads. This can be done using a special GET parameter: lx_debug_pb_show_stubs=1
. While using this parameter, all Clickio codes will serve images with the Clickio logo instead of creatives from demand sources.
Example of the usage:https://example.com/?lx_debug_pb_show_stubs=1
2. Debug mode for ad units and demo pages:
The Clickio team can set a debug mode for the ad units, allowing you to test them in the production environment using a special GET parameter. When enabled, the debug mode ad units will be displayed only with the GET parameter ?show_debug_units=1
(along with all other non-debugging ad units) or with a separate parameter for particular ad units only, in the format show_debug_units=%ad_unit_id comma separated%
(the Clickio team will provide this with a demo URL). In this case, only the selected debugging ad units will be displayed.
Other Debugging Tools:
- Chrome DevTools: For analyzing ad script loading and identifying errors.