Direct Tracking Script Customizations

Direct tracking script allows you to add various functionalities that extend its main usage. The following document describes various use cases of customizing lander tracking script and offer tracking script.

The idea is to add functions to the the dtpCallback method. This new function will execute your code after loading parameters of a visit. The general template for this function looks as follows:

dtpCallback(function (params) { 
    // your code goes here
    // parameters (offer links, dynamic tokens, campaign ID (cpid) )
});

Upon loading our direct tracking script along with parameters, the following methods become available at dtpCallback scope.

1. <script>
       dtpCallback(() => {
           // append new HTML element that includes Submit button (with URL which should redirect user to new page) to form node (with id “quiz-form”) and generate links
           var formNode = document.getElementsById("quiz-form");
           formNode.append(formElement);
           dtpCallback.generateLinks();
       });
   </script>

   Generate links: dtpCallback.generateLinks()

   You can use this function to generate offer links in place of click URLs that weren’t present in the HTML of your page at the moment of loading response of script.

   • Use case: Your landing page includes a multi-step quiz that generates new HTML with every step. The final step of the quiz includes a link to the offer page.

2. <script>
       dtpCallback(() => {
           // assuming your HTML contains an element with “browser-ver” class use browser version token to show it on landing page
           document.querySelector(".browser-ver").innerHTML = dtpCallback.getTokens().version;
       });
   </script>

   Get tokens: dtpCallback.getTokens()

   By using this function, you can retrieve dynamic tokens resolved by Voluum. To use token, add dtpCallback.getTokens().<<token key defined in lander URL>> to your script. For example, with lander URL: https://some-lander.html?browser={browser}&version={browserversion}&country={country}

   You can use tokens: browser, version, country (dtpCallback.getTokens().browser)

   • Use case: Customize your landing page using the visitor’s information to adjust content and improve click through rate. Read more in the Dynamic Call-Outs

3. <script>
       dtpCallback(() => {
           // redirect to offer page
           window.location = dtpCallback.getOfferLink();
       });
   </script>

   Get offer links: dtpCallback.getOfferLink(optional.offer.number)

   This function allows you to get the offer link set in your campaign in Voluum and use it for your custom needs. In case of a multi-offer landing page, you can pass the offer number in this function in order to get a proper offer link.

   • Use case: Dynamically redirect visitors to an offer page by using JavaScript instead of relying on elements with click URL links.

4. <script>
       dtpCallback(() => {
           // register click and redirect to offer page
           dtpCallback.registerClick();
           window.location = dtpCallback.getOfferLink();
       });
   </script>

   Register click: dtpCallback.registerClick(optional.offer.number)

   This function simply makes a request to Voluum to register a click.

   • Use case: This function may be useful when combined with other functions, such as getOfferLink. In this case, you may want to force register a click and redirecting a visitor elsewhere.

5. Tracking organic traffic

   • You can use direct tracking script to track organic traffic coming to your campaign. More on that in the Track Organic Traffic article.

1. <script>
       dtpCallback(() => {
           var clickId = dtpCallback.getClickID();
           document.cookie = “cid=” + clickId;
           });
   </script>

   Get Click ID: dtpCallback.getClickID()

   By using this function you can retrieve click ID.

   • Use case: Your offer script adds conversion tracking pixel and Click ID is necessary to track this conversion properly

2. <script>
       dtpCallback(() => {
           // assuming your HTML contains an element with “country” class use browser version token to show it on landing page
           document.querySelector(".browser-ver").innerHTML = dtpCallback.getTokens().country;
       });
   </script>

   Get tokens: dtpCallback.getTokens()

   By using this function, you can retrieve dynamic tokens resolved by Voluum. To use token, add dtpCallback.getTokens().<<token key defined in lander URL>> to your script. For example, with offer URL: https://some-offer.html?browser={browser}&version={browserversion}&country={country}

   You can use tokens: browser, version, country (dtpCallback.getTokens().version)

   • Use case: Customize your offer page using the visitor’s information to adjust content and improve click through rate. Read more in the Dynamic Call-Outs

3. <script>
       dtpCallback(() => {
           // use encoded URL if it is used as a parameter
           var convUrl = dtpCallback.getConversionPostbackPixelURL();
           window.location = 
   "https://somedomain.com/ty_page.html?conversionUrl="
       + encodeURIComponent(convUrl); 
        });
   </script>

   Get conversion Postback URL: dtpCallback.getConversionPostbackPixelURL()

   By using this function you can retrieve the conversion Postback URL.

   • Use case: Dynamically redirect visitors to some other page by using JavaScript and pass postback URL

4. <script>
       var submitBtn = document.querySelector('.submit-button');
       submitBtn.addEventListener('click', function () {
           dtpCallback(function() {
               dtpCallback.logConversion();
           });
       });
   </script>

   Log conversion: dtpCallback.logConversion(payout, txid, eventType)

   By using this function you can simply fire conversion postback with optionally specified payout, txid and event type

   • Use case: Log conversion when user makes some action (click on button) on the offer page

To use offer with subpages in order to avoid duplicating visits follow this guide:

1. <script>
       dtpCallback(() => {
           var clickId = dtpCallback.getClickID();
           var anchors = document.getElementsByTagName("a");
           for (var i = 0; i < anchors.length; i++) { 
               anchors[i].href += anchors[i].href.indexOf('?') != -1 ? "&cid=" + clickId : "?cid=" + clickId;
           }
       });
   </script>

   On the main page load the tracking script and obtain click ID. Once you have it, you can store it (in a cookie), but you should add it to all links in the page (link with URL like http://offer-url/subpage*.html should be modified with additional parameter cid, for example http://offer-url/subpage1.html?cid=wvj5qgggrgnmuc272pgoo9o6 )

2. On each page, even if you have the click ID in the cookie, load the tracking script. If the click ID parameter is present in the current page URL, no new visit will be registered.
3. Also, on each page, append the click ID parameter to all links - this will make sure the click ID parameter stays in the URL, and visits won’t be duplicated.
4. With this setup, logging conversion using dtpCallback.logConversion() should work fine from any of these pages.
5. To be even more sure you won’t have duplicate visits, consider also adding this: if you have a click ID in a cookie but you see it’s not present in the current page URL, add it to the URL before loading the tracking script.