Last active
November 13, 2018 02:29
-
-
Save transparenceweb/6193416 to your computer and use it in GitHub Desktop.
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…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.