All Collections
Tracking setup guides for traffic sources
Other
How to deploy FunnelFlux Javascript with Google Tag Manager (GTM)
How to deploy FunnelFlux Javascript with Google Tag Manager (GTM)
Zeno avatar
Written by Zeno
Updated over a week ago

Google Tag Manager is a tag management system that allows you to quickly and easily update tracking/analytics codes and related code fragments, collectively known as "tags", on your website or mobile app.

Once the snippet of the Tag Manager code has been added to your project, you can easily deploy tag configurations from a web-based user interface.

You can learn more about GTM here.

Create a tag for FunnelFlux in your Google Tag Manager

Login to your FunnelFlux dashboard then navigate to Campaigns > your Funnel

Copy the funnel's univeral tracking JS:

Then in your Google Tag Manager dashboard add a new "Tag" then select the tag type "Custom HTML".

Enable the option "Support document.write" as this javscript code needs to be able to create an iframe on the page:

Attach a trigger > choose "All Pages".

This will trigger the FunnelFlux JS every time the page is loaded.

Place the Google Tag Manager code on your pages

1/ Copy the Javascript from your GTM account. You can get this by clicking the admin tab > install Google Tag Manager, which will look like this:

Be sure to source your code above rather than from our examples below, as GTM may update its codes occassionally.

Paste the first code as close to the opening <head> tag as possible on your lander/offer, e.g.

<head>
<!-- Google Tag Manager -->
<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=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

<!-- other stuff -->

</head>

2/ Copy the second snippet and paste it immediately after the opening <body> tag on your lander/offer, e.g.

<body>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

Note: FunnelFlux only records the page visit or stats if the URL in the browser matches the URL set in your FunnelFlux lander/offer node, and the tracker will need to be aware of what funnel a user is in for this to work.

So, ensure you either use redirect links, or pass ...?fts=xxxx or f=xxxx in your page URLs when sending traffic from traffic sources. These parameters are always added when you use the Get Links function inside FunnelFlux.

Using GTM to trigger events

Google Tag Manager also allows you to fire events on your page, which can trigger tags to execute, such as Facebook Pixel or Google Analytics tracking events.

Firstly, in GTM go to the Triggers tab and create a new trigger. Choose custom event, then provide some event name, e.g. test_event. You can name the trigger itself something like "My test event".

Now, go to the tags section. Create a new tag called test tag, choose custom HTML as the tag type, and put in some basic HTML.

For now, lets just use a basic console.log function:

<script>

console.log("oh wow my trigger works!);
</script>

Below this, click to add a new trigger and choos the custom test_event you created (which you gave some pretty name as well).

Now on our pages we can push this test_event to GTM. When we do this a cascade of things happens:

  1. We push test_event to GTM

  2. This custom event matches a trigger My test event, causing it to activate

  3. Our tag we created has My test event as a trigger, so this tag gets executed

  4. We sould then see "oh wow my trigger works!" appear in the console.

To do this in reality on the actual page, its simple - we just push a basic Javascript event. For example, we can change one of our CTA buttons to this:

<a href="#" name="button1" onClick="dataLayer.push({'event': 'test_event'});" >Button 1</a>

If you notice this part of the link or button attribute.

onClick="dataLayer.push({'event': 'test_event'});"

This triggers the GTM "data layer" and pushes an event back to Google Tag Manager, you can now associate any Tags with this pushed event, making it easy to fire analytics codes from one central, single event. Cool!

Publish your GTM updates

When you make changes in GTM, they are not instantly published.

You will need to submit them to go live, and you can also click preview to show the current settings only for you -- useful for testing and debugging, and highly recommend when you're learning.

Once it appears that all of your tags are firing correctly, you can go ahead and publish them. From the GTM dashboard, hit the “Submit” button in the upper right corner and you’ll be asked to review your changes.

P.S. as with all tracking matters, make sure you test your code and config first before using it in production. And don't forget to publish!

Did this answer your question?