The Ultimate Guide to Google Tag Manager and Funnelytics

The Ultimate Guide to Google Tag Manager and Funnelytics

[et_pb_section bb_built=”1″ admin_label=”section”][et_pb_row admin_label=”row” background_position=”top_left” background_repeat=”repeat” background_size=”initial”][et_pb_column type=”4_4″][et_pb_text background_position=”top_left” background_repeat=”repeat” background_size=”initial” _builder_version=”3.19.8″]

Funnelytics is a powerful mapping and analytics tool that allows you to visually see the flow of traffic. Using Google Tag Manager, we’re going to make it even more powerful!

Let’s get started

Overview

The easiest way (in my opinion) to add tracking scripts to the site is by using Google Tag Manager. Google Tag Manager (GTM) acts kind of like a USB hub. Instead of plugging each accessory into a separate USB port on your computer you can use a hub. With a hub, you only have to plug one thing into your computer and everything else plugs into the hub. This is especially useful if you have more than than a few things connected to your computer.

GTM is like a USB hub

GTM acts in the same way. You install the GTM code snippet one time and then you can deploy (fancy word for ‘install’ or ‘put on’) different scripts into your site. Not only does it make it super easy to deploy these ‘tags’, but it offers a great deal more customization and targeting options that you otherwise wouldn’t have.

More on that later.

Let’s dive into how you can get GTM up and running on your WordPress site. Even if you are not using wordpress, the principles are the same. Paste the GTM code snippets in the <head> and before the </body> tags.

Installing Google Tag Manager

Once you have your GTM account you’re ready to install the code snippet into the <head> and before the </body> tags on your site. There are two ways that we can get ‘er done! The first uses my favorite theme Astra and the other uses a plugin that anyone can use.

First: we need to go over where to grab your code.

Get GTM Code Snippet

You’ll notice that it pops up with two different code snippets. The top one goes in the <head> tag and the second before the </body> tag.

The Google Tag Manager Code snippet

Copy the top code snippet and get ready to rumble!

Using Astra Hooks

WPAstra makes it super easy to add the code snippet into the head and body of the page.

where to place the tag manager script in wordpress

The top code snippet goes in the header and the second one goes before the closing body tag. The footer is usually the last part of the body so that’s where I put it. Yes, it works.

Using a plugin

Its easy to do the same using a plugin. The plugin I like to use is called “Insert Headers and Footers” by WPBeginner. Just follow the same steps paste the codes in the head and before the closing body tag.

download the insert headers and footers plugin

Paste the tag manager snippet in the header and the footer

Installing Funnelytics with Google Tag Manager

We’ll go over how to make the tag in GTM and where to get the snippet from Funnelytics.

Each project in Funnelytics has a unique code. Each project can contain multiple funnels.

To get the code from the project: simply click the project from the left hand side > Click on settings > Accepts the terms > and copy the code.

Get the Analytics script from funnelytics

With the code snippet copied to our clipboard we are now ready to create the tag in google tag manager.

To create the tag:

  • Go to the ‘tags’ menu
  • Click on add new tag
  • Choose Custom HTML
  • Paste the code in
  • Advanced Settings
    • Only fire once per page
  • Trigger on all pages
  • Save and submit changes

Create the funnelytics tag in google tag manager

Tracking Events using Google Tag Manger

Before we can track Funnelytics events using Google Tag Manger, we need to configure a few things.

In this example we will look at how to track button clicks as a Funnelytics event.

First, we want to

  • Enable Variables
  • Create a “clicks” listener

Then, we will:

  • Use debug mode to target the click
  • Create a tag to fire the action

Sound good? Let’s get started then!

Enable Variables

Click on the Variables tab in GTM. You will see a red button that says “Configure”. Don’t click it! Just kidding, you have to.

Once you click the button you aren’t supposed to click, you can pretty much turn on all the variables… just turn them all on.

We’ll use these later to set up all sorts of events. Remember though, we’re just looking at clicks in this example.

enable variables in google tag manager

Create a Clicks Listener

We need to start passing click data from our site to GTM so we can hone in our targeting. Once this is enabled, whenever a click is made anywhere on the site, we’ll be able to see what values it has for the variables we created above.

The way we do this is by creating an All Clicks trigger.

Yeah, this was kind of a hard concept for me to grasp. Sometimes it’s easier just to show you.

Okay, so first, we’re going to go to the triggers tab and create a new trigger.

The trigger will be for All clicks. Under the Clicks section select All Elements.

Name your trigger All Clicks.

Create a clicks listener

Sweet! That wasn’t so bad. Now the interesting part begins.

Target the Right Click

Now that we’ve told GTM to track all clicks on our site, we’re going to use the debug mode to see what values we can target using the variables.

We’re going to target the right click!

To enter Debug Mode, click on the Preview button.

Target the right click

Go to your site and refresh the page you will now see a popup on the bottom. That’s the debug window.

To show you that we created a clicks listener, if you click anywhere on your site, you will see the event gtm.click appear on the left of the debug panel.

Test the clicks listener in google tag manager

We’re going to use that to target our button click.

Click on the button you want to fire the Funnelytics event on.

*Pro tip: You will need to hold CTR or CMD to open the link in a new tab so you don’t reload the page.

Now, click on the top gtm.click event in the debug panel. Go to the variables tab.

You will now see all the different variables that we enabled, pretty cool right! Now we can choose a click variable that we are going to target. I like to use the click text variable.

targeting the right click in google tag manager

Now we can create a trigger that targets that exact variable to know when to fire. Once the trigger is made, we use the event code snippet from Funnelytics and create the tag.

Fire the Funnelytics Event

Create a Trigger

Remember when we created a trigger to identify all clicks? Now we’re going to create a new trigger that specifically targets the click we want! Cool!

Go back to the triggers tab and create a new one. Give a title describing exactly what click it’s targeting.

Under the Clicks category, I would choose the Just links option.

This time we are going to select Only Some Link Clicks instead of all link clicks.

Now we are going to reference the variable and the value we chose for our specific target.

In our example we chose to reference the click text with had a value equal to Get Started Today

Creating the right trigger

Create the Tag

Now we’ve created the trigger, let’s go create the tag that will fire when the trigger criteria is met.

Head on over to the tags tab and hit new.

We’re going to follow the previous steps to create a new tag but this time it’s for an event.

I would name it something like FL (for Funnelytics) – event – my event. This way you can easily identify which tags are for what.

It’s time to grab the event code from funnelytics.

Funelytics has lots of different event options, but remember, we’re focusing on just button clicks.

grab the click script from funnelytics

In the tag configuration box choose HTML and paste the code in there.

Below, in the trigger box, select the new trigger that we just finished making.

Select to fire once per event.

Save and submit.

Create the clicks tag in tag manager

Verify the tag

Whew, we made it this far! Now let’s just make sure that it’s firing correctly.

Click preview again and reload your website to open debug mode.

This time when we click on the button we should see that our new tag fired in the debug window.

Verify the tag is firing properly

If it’s not firing you know something went wrong…

If it is firing in GTM we need to go to Funnelytics and see if the event fired.

Submit the changes in GTM if you haven’t already to set the trigger live.

Make sure you have the event mapped from your page in the canvas.

You should see that the event has fired once you hit the analyze switch.

Test the action in funnelytics

Questions?

Inevitably, some might have additional questions or I might have missed something.

Do let me know in the comments so we can all learn together!

What actions are you excited to start tracking?

 

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

>
Scroll to Top