JS Tracker SDK Integration with GTM

Overview

This document will take you through the detailed step-by-step process of enabling Dailyhunt JS Tracker through your Google Tag Manager to track the down-funnel events.

If you happen to have GTM Tags already implemented on your site and you want to enable down-funnel events tracking for Dailyhunt, you don't need to integrate Dailyhunt trackers separately on your site.

Dailyhunt JS Tracker can seamlessly plug into your existing GTM Tags integration.

Assumptions

This post assumes the following -

• You have an active partnership with Dailyhunt for down-funnel events, conversion or lead tracking. (Contact Dailyhunt Advertising Team)
• You have an active Google Tag Manager account.
• You have already deployed GTM Tags in your website. (Refer Quick Start Guide by Google)

Setup

Let us now go through the step-by-step process to integrate Dailyhunt JS Tracker into your Google Tag Manager.

info

To make the tutorial easier to understand, let us take an example of an Add To Cart event in a e-commerce website.

1. Create Folder

Although, you will be mostly referring to already existing triggers and variables, we recommend you to create a separate folder that will hold all the Dailyhunt related tags, variables and triggers.

Let's name it dailyhuntTracker.

2. Create Variables

You will have to add all the variables that you need Dailyhunt to track. We might need to track below variables -

eventName, userId, productId, productName, productQuantity, productPrice, totalAmount.

We will now create all these variables in Google Tag Manager -

• Go to Variables menu and add a new User-Defined Variable.

  

• Name the variable appropriately and make sure you select dhTracker as the folder.

  

• Select Data Layer Variable as the variable type.

  

• Repeat above steps for all the variables needed.

  

3. Create Triggers

We will need to create a trigger for Add to cart event pingback.

Let's name it addToCart.

• Go to Triggers menu and add a new trigger under dhTracker folder.

  

• Select Custom Event as the trigger type.

  

• Trigger the event on appropriate action.

  Whenever there is a product added to the cart, the site should call GTM's dataLayer.push() function with all the relevant parameters we created in the previous step -

  // Make sure to replace the `{{xxxxx}}` with actual values.

  dataLayer.push({

  event: 'addToCart',

  userId: {{userId}},

  productId: {{productId}},

  productName: {{productName}},

  productPrice: {{productPrice}},

  productQuantity: {{productQuantity}},

  totalAmount: {{totalAmount}}

  });

4. Create Tags

We need to create two Tags. One to load Dailyhunt's JS Tracker and another to trigger dht() function on addToCart event to track event data.

DH Tracker Load Tag

• Go to Tags menu and create a new tag named dhTrackerLoadTag under dhTracker folder.

  

• Select Custom HTML as the tag configuration.

  

• You need to then include our javascript code snippet in the HTML section.

  

• Select All Pages - Page View as the trigger configuration and save the tag.

  

AddToCart Event Trigger Tag

• Go to Tags menu and create a new tag named dhTrackerAddToCartTag under dhTracker folder.

  

• Select Custom HTML as the tag configuration.

  

• You need to then include below code snippet in the HTML section.

<script>

dht('addToCart', {

userId: {{userId}},

productId: {{productId}},

productName: {{productName}},

productPrice: {{productPrice}},

productQuantity: {{productQuantity}},

totalAmount: {{totalAmount}}

});

</script>

• Select addToCart as the trigger configuration and save the tag.

5. Review and Publish

We are done with all the changes. We can now review and publish the changes to activate them.

• Go to Folders menu and you will be able see all the elements we just created.
• On the top right section of the page you should be able to see Submit button. Go ahead and click it to save the new version to the workspace.
• Next, you can review all the changes that is going to be pushed in this version. After the review, click on Publish.
• Finally, you will the summary of the published changes. You can go back to the Overview menu and see the new version published.

Verification

If everything went well, you should be able to see -

1. dht.min.js getting loaded at the page view.
2. /tracker?eventName=PageView getting triggered at the page view.
3. /tracker?eventName=addToCart getting triggered when user performs Add To Cart action.

Please note

If you have difficulty in any of the above steps of this guide, feel free to contact ads-tech-team@verse.in. We will get back to you as soon as possible.