Skip to content

Instantly share code, notes, and snippets.

@transparenceweb

transparenceweb/gtm-iframe-child.html

Last active November 13, 2018 02:29
Show Gist options
  • Save transparenceweb/6193416 to your computer and use it in GitHub Desktop.
Save transparenceweb/6193416 to your computer and use it in GitHub Desktop.
Download ZIP
Using Google Tag Manager to track a site and have a 3rd party element loading into an iframe. Need to track an event onclick within the iframe and have it push to the dataLayer on the parent page. Adding GTM snippet to child page not a possibility so using typical dataLayer.push({'event': 'event_name'}); will not work. Apply following workaround…
Raw
gtm-iframe-child.html
<!doctype html>
<html>
<head>
<title>Child page</title>
<!-- Stylesheet -->
<style type="text/css">
body
{
margin: 1em;
text-align: left;
background-color: #fdfdfd;
}
</style>
</head>
<body>
<h1>Track click in iframe</h1>
<p>Sends to parent.dataLayer.push: <a href="#" onclick="parent.dataLayer.push({'event': 'click'});">Click link</a></p>
</body>
</html>
Raw
gtm-iframe-index.html
<!doctype html>
<html>
<head>
<title>Parent page</title>
<!-- Stylesheet -->
<style type="text/css">
body
{
margin: 0;
text-align: center;
}
#content
{
margin: 0 auto;
width: 70%;
text-align: left;
}
iframe
{
width: 100%;
border: 1px solid #ccc;
}
</style>
<!-- Google Tag Manager - DataLayer -->
<script>
dataLayer = [];
</script>
<!-- End Google Tag Manager - DataLayer -->
</head>
<body>
<!-- Google Tag Manager -->
<noscript><iframe src="http://www.visitsouthport.com//www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(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=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
<div id="content">
<h1>Parent page</h1>
<p>GTM container and dataLayer initialisation script in place on parent page.</p>
<h2>Iframe containing tracking event</h2>
<iframe src="gtm-iframe-child.html"></iframe>
</div>
</body>
</html>
Raw
iframe tracking GTM
#Google Tag Manager setup
##Tags
Google Analytics pageview tag (UA-XXXXXXX-X) set to fire on *All pages*
Google Analytics event tag (UA-XXXXXXX-X) sending category, action, label set to fire on *click*
###Note
For localhost testing, the Domain name will need to be set to none for the Google Analytics pageview tag.
Do this in: **More settings > Domains and Directories > check Domain Name and add none in the input field**
* * *
##Rules
*All pages* fires on {{url}} matches RegEx .\*
*click* fires on {{event}} equals click
@ddecarlo
Copy link

Great resource, I'm going to try to use this for my ecommerce site to sale conversions. Do you think I will run into trouble trying to do that with this code. Each order is custom btw so sales price will vary.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment