[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
- Set-up Google Tag Manager
- Installing Funnelytics
- Tracking Events
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 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.
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.
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.
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.
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.
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.
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
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!
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.
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.
Sweet! That wasn’t so bad. Now the interesting part begins.
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.
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.
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.
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.
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
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.
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.
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.
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.
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?