Track Button Clicks Using GTM

How to track the button click actions in Funnelytics using GTM

Note: This feature currently requires a developer.

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. 

In reality, you could use almost any of them. But, we are going to use the 'Click Classes' variable and corresponding value to target our button.

 

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

Tip: If you know how to assign custom CSS classes or IDs to elements then I would first assign the custom CSS class/Id to this button and then use that custom class/Id as the value.

 

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

 

Sweet! Now we have our trigger, it's time to enter our Funnelytics Event Script. 

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.

Note: When using GTM it is of little importance what you place in the key and value fields. You could not change anything and it would still work when using GTM. However, we recommend that you add attributes to make that action unique.

How to Assign Action Data To An Action Icon

AFTER data has been received in the workspace, you can right-click anywhere on the canvas, go to the explore tab, then click on the Actions tab. You will see a list of all the actions that we have received data for (in the given time range).

Alternatively, if you already have an icon on the canvas and you wish to associate that action with action data then do the following:

  • Click on the action, then click on the tracking settings icon
Image 2021-01-13 at 12.19.18 AM-1
  • In the tracking menu, open the Custom Actions dropdown and select the desired action.
Image 2021-01-13 at 12.23.12 AM
  • Optional - You can add additional AND WHERE properties to further define that event. For example, instead of the icon representing ALL click actions, we only want it to represent when someone clicks our main Call to Action
Image 2021-01-13 at 12.25.49 AM

You can now track any button click following the same process!

FAQ:
What if my click doesn't have a class name?
There needs to be some variable that is unique to your specific button. So if there's no class name, then you'll have to use some other attribute like ID, or Click Text.

Can I use a different event name or event attributes?
Absolutely, those are completely customizable to your situation. They do not need to be anything specific. We recommend adding an attribute that identifies that specific button/click.

 

If you have any questions or need further clarification with tracking button clicks, remember to reach out to our support team anytime by clicking the support icon in the bottom-right corner of your dashboard, we are always ready to assist you!