JS-container installation

Description how to install the JS-container on the site pages

There are 2 ways to install the Adsniper JS-container on the site page:

1. directly in the HTML-code
2. using Google Tag Manager (GTM)

📘

JS-container: supported actions

The Adsniper JS-container supports following predefined actions:

• vclick (validate click) - fires automatically while loading of the container

• aclick (active click) - fires automatically if one of the following conditions occurs:

• scroll is larger than the screen
• user stays on the site longer than 1 minute
• moving to the next page

• a6 - active click by the Google Analytics version, it means moving to the next page. It works automatically.

The Adsniper JS-container supports following custom actions:

• а1 - а5 - it is another custom action.

For example, а1 is a click on the link, а2 is a click on the button.

For calling the custom actions you should use the function CPA_slite.postClick() and pass in the first parameter one of the following values: a1,a2,a3,a4 or a5.

For example

CPA_slite.postClick("a1")

The second parameter isn't required and should be used only in extreme cases!
If it is necessary to use the second parameter, then the data in the string format must be specified in quotes, and the data in the number format should be specified without quotes.

For example

CPA_slite.postClick("a1", "test") or

CPA_slite.postClick("a1", 123)

The full example of using function CPA_slite.postClick

HTML

<a href="#" onClick=CPA_slite.postClick("a1")>Click me </a>

<a href="#" onClick=CPA_slite.postClick("a1", "test")>Click me </a> or

<a href="#" onClick=CPA_slite.postClick("a1", 123)>Click me </a>

1. Installation of the Adsniper JS-container directly in the HTML-code.

The current chapter of documentation describes how to place the Adsniper JS container on the site pages directly in the HTML-code and how to use the functions firing by clicking on the link or on the button.

Adding of the Adsniper JS-container in the HTML-code:

1. add the link to the Adsniper JS-container inside the HTML-tag ...
2. add the calling CPA_slite.postClick() function via onClick event.

An example of the JS-container correct placement and using the CPA_slite.postClick () function is available at http://trafsync.com/onclick_test/

To make sure that everything works fine we should go to the page http://trafsync.com/onclick_test?s_trk=test and then we will see the JS-container calling after the page loading:

By clicking on the "Test link" is called CPA_slite.postClick ('a1'):

By clicking on the "Test button" is called CPA_slite.postClick ('a2'):

2. Installation of the JS-container via Google Tag Manager (hereinafter referred to as the GTM)

Google Tag Manager is a tool from Google, which allows to place JS-scripts of external services (such as Yandex Metrika, Google Analytics, LiveInternet и etc.) on web pages and manage them from one interface.

The current chapter of documentation describes how to place the Adsniper JS-container on web pages via GTM and how to use the functions firing by clicking on the link, clicking on the button or moving to the certain page.

📘

JS-container: supported actions

The Adsniper JS-container supports following predefined actions:

• vclick (validate click) - fires automatically, while loading of the container

• aclick (active click) - fires automatically if one of the following conditions occurs:

• scroll is larger than the screen
• user stays on the site longer than 1 minute
• moving to the next page

• a6 - active click by the Google Analytics version, it means moving to the next page. It works automatically.

The Adsniper JS-container supports following custom actions:

• а1 - а5 - it is another custom action.

For example, а3 is a click on the GTM link, а4 is a click on the GTM button, a5 is moving to the page trafsync.com/gtm_test/index.php.

To activate them, you need to call these actions at the right time (а3 - when user clicks on the GTM link, а4 - when user clicks on the GTM button, а5 - when user moves to the page trafsync.com/gtm_test/index.php), using the function CPA_slite.postClick('an', [random data in the number or string format]), where n = 1, 2,...,5

The second parameter isn't required and should be used only in extreme cases!
If it is necessary to use the second parameter, then the data in string format must be specified in quotes, and the data in the number format should be specified without quotes.

📘

Additional information about Google Tag Manager

Please visit the link below to learn more about using Google Tag Manager: https://support.google.com/tagmanager/answer/6103696?hl=ru&ref_topic=3441530

After you have created the account and placed the GTM container code on the site pages, you need to create tags for the Adsniper JS-container and for the required functions.

Creating the Adsniper container call tag

1. Choose "Tags" in the left menu and click on the "New" button, then choose "Tag configuration"

2. Choose tag type: Custom HTML

3. In the "HTML" field add a link to the JS-container using HTML-tag . See an example on image below

4. Click on the "Triggering" area
5. Choose "All pages" and click on the "Add" button

Creating a tag for the function "Click on the link GTM"

This function will fire while clicking on the certain link: test_link_gtm

1. Choose "Variables" in the left menu and click on the "Configure" button

2. In thelist that appears find a "Clicks" section and choose "Click ID". You can also choose all items in this section.

3. Having done this, we will create the condition for calling the function, i.e. we create a new trigger
4. Choose "Triggers" in the left menu and click on the "New" button
5. Enter a trigger name, for example, “Click on the link with id=test_link_gtm”.
6. Click on the "Trigger configuration" area and choose the "Just click" trigger type

When you click on the link, the browser usually loads a new page and interrupts all the rest HTTP-requests, so we have a slight dalay and that is why we can save the time to activate tags.

To do it we should check the box "Wait for Tags". The link won't be opened till all the tags will be activated or till the time out. Check the box "Check Validation", so the tags will be activated only when the link is opened, otherwise they will be activated every time the link is clicked.

Specify the Page URL, it contains trafsync, it means that the clicks on the links will be seen on all web pages containing the word "trafsync".

Select "Some link clicks" and specify Click ID equals test_link_gtm and press the "Save" button.

Creating a tag for the function "Click on the certain link"

1. Choose "Tags" in the left menu
2. Click on the “New” button. Enter a tag name, for example, “Click on the certain link.
3. Then click on the "Tag configuration" area
4. Choose "Custom HTML" and add CPA_slite.postClick("a3") in the HTML field.
5. Click on the "Triggering" and choose trigger “Click on the link with id=test_link_gtm”. Then click on the “Save” button:

Creating a trigger for the "Click on the GTM button" function

This function will fire while clicking on the button with id testGtmButton

1. Choose “Triggers" and click on the “New” button.
2. Add trigger name, for example, “Click on the button with id testGtmButton”.
3. Click on the "Trigger configuration" area and choose "All elements" in "Clicks" section
4. Check the box "Some clicks"
5. Specify the following condition for triggering the trigger - Click ID is equal to testGtmButton and click the "Save" button.

Creating a tag for the function "Click on the certain button"

1. Choose "Tags" in the left menu
2. Click on the “New” button. Enter a tag name, for example, “Click on the certain button.
3. Then click on the "Tag configuration" area
4. Choose "Custom HTML". Add CPA_slite.postClick("a4") in the "HTML" field.
5. Click on the "Triggering" and choose trigger “Click on the link with id=testGtmButton”. Then click on the “Save” button:

Creating a trigger for the function "Move to the trafsync.com/gtm_test/index.php"

1. Choose “Triggers" and click on the “New” button.
2. Add trigger name, for example, “Move to the certain page”.
3. Click on the "Trigger configuration" area and choose "Window Loaded" in the "Page View" section

🚧

Please note:

The "Page view" is being registered when page loads in the user's browser.
In the "Trigger type" you can decide and choose, when exactly the tag should be activated:

• as soon as the browser starts parsing the page ("Page View")
• at the end of the DOM model assembly ("DOM Ready")
• when the page loads completely, inclusive images, scripts etc. ("Window Loaded").

The moment of load registering can be of a great importance, if DOM or JavaScript variables are used in the tag for collecting of dynamic values.

All tags like "Page View", interacting with DOM for substitution of variable values ​​ should use the "DOM Ready" setting . This is important for the correct definition of variables.

4. Choose "Some Window Loaded Events"
5. Specify the following condition for triggering the trigger - Page URL contains trafsync.com/gtm_test/index.php and click the "Save" button.

🚧

Please note:

Please make sure while adding the condition Page URL contains trafsync.com/gtm_test/index.php, that all required variables are set, it means check the box "Page URL"

Creating a tag for the function "Move to the certain page"

1. Choose "Tags" in the left menu
2. Click on the “New” button. Enter a tag name, for example, “Move to the certain page.
3. Then click on the "Tag configuration" area
4. Choose "Custom HTML". Add required JS-code in the "HTML" field.
5. Click on the "Triggering" and choose trigger “Move to the certain page”. Then click on the “Save” button.