Google Tag Manager Integration

From ClickTale Wiki
Jump to: navigation, search

     Google-Tag-Manager.png

Google Tag Manager (GTM) is a widely used tag management solution providing a quick and easy deployment mechanism for a variety of 3rd party solutions, including Clicktale.

How it works

In this solution, we deploy only the ClickTale Bottom code, since the code is deployed a-synchronously and the Top code cannot be set to be inserted after the <body> tag in real time.

Inserting the Bottom code

1. Inside your GTM account, navigate to an existing GTM container for the website where you wish to add the ClickTale code (or create a new container if one doesn’t already exist).

2. Create a new Custom HTML tag in your GTM container by clicking the "New" button and selecting “tag” from the drop-down options.

3. Under “Tag Name” please add the desired name for your tag, e.g. “ClickTale”.

4. Under “Tag Type” please select “Custom HTML Tag”.

5. Copy and paste your project’s “Bottom” tracking code (from within your ClickTale account) into the “HTML” window. To obtain it, please log into your ClickTale Account, click on “Setup & Code” under the desired Project, and then click on “3. Recommendation & Code” (located in the top-right corner of the page). The second (longer) code snippet is the one to be copied over to your GTM tag. Click here for more information on how to obtain the tracking code.

  This is the same for both Atlas and Balkan code types.

6. Important: please make sure to check the “Support document.write” checkbox.

GTM add tag.png



Click the image to
view full size

7. Create a rule in GTM to define the logic for injecting the ClickTale code onto your pages, and save it.


GTM add rule.png



Click the image to
view full size

8. Save the new tag and publish the updated version of the container.

9. To confirm that the ClickTale code is deployed successfully, please add the “?ct=enable,debug” query string to your page’s URL. (Example: http://www.example.com/?ct=enable,debug). Click here for more information on how to use debug mode.

Your ClickTale code should now deploy through Google Tag Manager.

Why do the instructions above ignore the smaller “top” code snippet?

ClickTale’s tracking code is comprised of two separate code snippets; what we refer to as the “Top” and “Bottom” parts. Because the “Bottom” tracking code contains the most important code and is responsible for the recording process itself, it is the one we add to Google Tag Manager. The “Top” part of the code is a “time stamp” designed to measure pages’ “Load Time”. You can manually add this time stamp immediately after the opening <body> tag.

GTM lists ClickTale as part of its dedicated tags under Analytics. Why not use it instead?

The “ClickTale Standard Tracking” tag is based on an older (and outdated) version of the tracking code, and should therefore be avoided. Instead, please use the “Custom HTML Tag” per the instructions above.