Track Button Clicks Using GTM

How to track the button click actions in Funnelytics using GTM

If you are not comfortable with HTML, CSS, and Javascript you might want to find a developer. That being said, we will try and make it as easy as possible using Google Tag Manager. 

If you have not already installed the base Funnelytics script please refer to the other tutorials on how to do so. This will only work if the base script is installed on the page.

Overview

In this example, we are going to show how to trigger a button click action on our page. 

This is a great way to visually map out on the canvas how many times a specific button was actually clicked. 

In Google Tag Manager

Let's head on over to GTM where we have to do a few things: 

1. Enable variables. This will allow us to target the right button click. 
2. Create a new trigger using the right targeting. 
3. Create the tag to fire the click button script on that trigger.

Enable Variables

• Click on the 'Variables' settings on the left side.
• Click on 'Configure'
• Enable all variables (We won't use all of them, but just to give us targeting options and for future actions)
• Submit changes (top right corner)

Create a new trigger

First, we're going to create a new trigger that detects all button clicks on our website. Then, when we click the button that we want to track, we will be able to see what variables it has. We can then target those variables and create a new trigger specific to that button click.

• Go to the 'Triggers' tab on the left side.
• Click 'New'
• Title the trigger 'All Clicks'
• Click on tag configuration
• Under the clicks category select all elements
• Hit 'Save' in the top right

We're now going to enter debug mode and click on the button on our site to see what variables we can target. 

• Click on 'Preview' in the top right corner.
• Navigate to your website (refresh if you have to) and you should see the debug window appear on the bottom.

With the debug window open, hold CMD (CTRL on Windows) and click on your button.
Under the summary section, you will see 'gtm.click' appear at the top. Click on the click action > Then click on variables. 

You will see all the different variables that we can use to identify that button by. For this example, we will use the "Click Classes" variable

Copy the value (in this case it's: et_pb_button et_pb_button_0 main_cta et_pb_bg_layout_light)

Now that we know how to target our button using a form class variable, we are going to create another trigger just for that.

Let's go back into the triggers tab > New > Title: Main CTA Button Clicked > All Links

This time we are going to choose 'Some Clicks' and select our variable and paste our value. 

Select 'Click Classes'
> contains
> paste your form class value

Create your GTM Tag and Configure your Funnelytics Event Script

Go to 'Tags' > 'New' > Title it: FL-Action-Main Button Click > Click 'Tag Configuration' and select 'Custom HTML' 

Now in the HTML section, we are going to enter our Funnelytics Event script into the box. This is what the generic Funnelytics Event Script Looks like,

<script type="text/javascript">
window.funnelytics.events.trigger('event-name', {
    key: 'value',
});
</script>

You are allowed to pass any event name and object properties as a JavaScript action into Funnelytics, just be sure that your action has unique identifiers for event names and custom properties.

In this case, we'll use these attributes:

• The event name will be: Clicks

• Key: Button

• Value: main_cta

Once we have configured our code to track our button click, it will look like this,

<script type="text/javascript">
window.funnelytics.events.trigger('Clicks', {
    Button: 'main_cta',
});
</script>

Finally, we will need to assign a trigger for our tag. The trigger for this tag is going to be the new trigger that we created titled 'Main CTA Button Clicked'. Save the tag.

Something missing?

If something is missing in the documentation or if you found some part confusing, please reach out to our support team, with your suggestions for improvement.

We love hearing from you!