Is there a way to setup Clicktale tag in Google Tag Manager?

Question

Since GTM doesn't support document.write() method the standard clicktale code doesn't work. Is there a workaround for this?

ClickTale employee has sent me these instructions:

Replace the document.write JS line above with the following: 
document.body.appendChild(externalScript);

Example:
<!-- ClickTale Bottom part --> 
<script type='text/javascript'> 
var externalScript = document.createElement('script');
var scrSrc = document.location.protocol=='https:'?
'https://clicktalecdn.sslcs.cdngc.net/':
'http://cdn.clicktale.net/';

scrSrc += 'www11/ptc/xxx-xxx-xxx-xxx.js';

externalScript.src = scrSrc;
externalScript.type = 'text/javascript';
document.body.appendChild(externalScript);
</script> 
<!-- ClickTale end of Bottom part -->

I am not sure what to do with this. Has someone tried something like this?

Answer 1

Cubius,

I actually ran into the same issue and recently contacted ClickTale Support to find out the correct solution. I was given the following instructions which worked for me. Try the following:

1) Create a new tag in your GTM container.

2) Copy and paste the code into the new tag.

3) Change the general parameters in the code (PID, Ratio, PartitionPrefix) to your project’s details. For example (12345, 0.33, “www14”)

4) Save the new tag and publish the updated version of the container.

Here is the code:

<script type="text/javascript">
function ClickTaleCreateDOMElement(tagName) {
if (document.createElementNS) {
return document.createElementNS('http://www.w3.org/1999/xhtml', tagName);
}
return document.createElement(tagName);
}
var ClickTaleIsXHTMLCompliant = true;
var ClickTalePrevOnReady;
if (typeof ClickTaleOnReady == 'function') {
ClickTalePrevOnReady = ClickTaleOnReady;
ClickTaleOnReady = undefined;
}
var ClickTaleOnReady = function() {
window.ClickTaleScriptSource = (document.location.protocol == 'https:'?
'https://clicktalecdn.sslcs.cdngc.net/www/':
'http://cdn.clicktale.net/www/');

window.ClickTaleIncludedOnDOMReady = true;
window.ClickTaleSSL = 1;

ClickTale(PID, Ratio, PartitionPrefix);

if(typeof ClickTalePrevOnReady == 'function') {
ClickTalePrevOnReady();
}
};
(function() {
var div = ClickTaleCreateDOMElement("div");
div.id = "ClickTaleDiv";
div.style.display = "none";
document.body.appendChild(div);

var externalScript = ClickTaleCreateDOMElement("script");
externalScript.src = document.location.protocol == 'https:'?
'https://clicktalecdn.sslcs.cdngc.net/www/WRe1.js':
'http://cdn.clicktale.net/www/WRe1.js';

externalScript.type = 'text/javascript';
document.body.appendChild(externalScript);
})();
</script>

Answer 2

The correct way to do it is explained in http://wiki.clicktale.com/Article/Google_Tag_Manager_Integration

The procdeure is:

• Create a new container (or add the below to an existing container).
• Create a new Custom HTML tag in your GTM container.
• Copy and paste your project’s bottom code (from the ClickTale account) into the new tag.
• Check the “Support document.write” checkbox.

I tried it and it worked. Anyway I had to wait 24h (probably it's the time that Google needs for publishing the tag).