GTM in external frame

pdenchfield · Post by **pdenchfield** » Thu Apr 13, 2017 3:52 pm

Hi, we have Google Tag Manager (GTM) working on the content frames of our tripane HTML5 outputs, but it's not showing up in the external frame. Apparently inserting GTM in the external frame helps to track navigation clicks. Any idea how to do that?

p.s. Following is the working GTM code for content frames ("Google Tag Manager" blocks in <head> and <body> of master page, trimmed for emphasis)

Code: Select all

    <head profile="http://www.w3.org/2005/10/profile">
        <!--[if lt IE 9]>
		<script src="../scripts/html5shiv.js"></script>
		<![endif]-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<!-- Google Tag Manager -->
		<script src="../scripts/googleanalytics-new.js">
		</script>
		<!-- End Google Tag Manager -->
    </head>
    <body>
        <MadCap:bodyProxy />
		<!-- Google Tag Manager (noscript) -->
		<noscript><iframe src="http://www.googletagmanager.com/ns.html?id=GTM-NMSQ7Z" height="0" width="0" style="display:none;visibility:hidden"></iframe>
		</noscript>
	<!-- End Google Tag Manager (noscript) -->
		    </body>
</html>

Following is the referenced script:

Code: Select all

(function(w, d, s, l, i){w[l] = w[l] || [];w[l].push({'gtm.start':
			new Date().getTime(),event:'gtm.js'});var f = d.getElementsByTagName(s)[0],
			j = d.createElement(s),dl = l != 'dataLayer' ? '&l=' + l:'';j.async = true;j.src =
			'https://www.googletagmanager.com/gtm.js?id=' + i + dl;f.parentNode.insertBefore(j, f);
	})(window, document, 'script', 'dataLayer', 'GTM-NMSQ7Z');

Thanks in advance!

Daniel Ferguson · Post by **Daniel Ferguson** » Fri Apr 14, 2017 2:03 pm

As you've discovered, the MasterPage applies only to the content within the content iFrame in TriPane output. To make changes to the external frame, you'll need to use javascript or jquery in the TriPane skin file. This actually creates a separate javascript file that gets called from the external frame, which gives you the option to manipulate the external frame code.

To get your GTM file reference to show up in the external frame, open your TriPane skin file in Flare, click the Toolbar tab, and then click the Edit button beneath the Custom JavaScript to include in Toolbar page box. Insert this line of code:

Code: Select all

$('head').append(' <!-- Google Tag Manager --><script src="../scripts/googleanalytics-new.js"></script><!-- End Google Tag Manager -->');

You may need to do some experimenting to verify that your script source path is correct.

When you rebuild your target, you should see your GTM code in the <head> section of your external frame.

Let me know if you have any questions.

Daniel

Daniel Ferguson · Post by **Daniel Ferguson** » Fri Apr 14, 2017 2:45 pm

I just read in another post that someone was having trouble with GTM affecting page load time. If you want to insert the GTM script reference at the bottom of the external frame file rather than in the head section, use this code snipped in your skin file instead:

Code: Select all

$(document).ready(function () {
$('body').append(' <!-- Google Tag Manager --><script src="../scripts/googleanalytics-new.js"></script><!-- End Google Tag Manager -->');
});

pdenchfield · Post by **pdenchfield** » Fri Apr 14, 2017 2:47 pm

Thanks, Daniel! I'll post back when the other team has had a chance to confirm it works

Daniel Ferguson · Post by **Daniel Ferguson** » Fri Apr 14, 2017 2:51 pm

And just to clarify, you'll need to adjust the GTM code as necessary. There may be other elements are are needed in there.

MadCap Software Forums

GTM in external frame

GTM in external frame

Re: GTM in external frame

Re: GTM in external frame

Re: GTM in external frame

Re: GTM in external frame