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)

**Pro tip: If you know how to assign custom CSS classes or IDs to elements than 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 grab the code from Funnelytics. 

Grab the action code from Funnelytics

When mapping out pages, there will be an option from the link wheel to map an action. Here's more info on how to map actions on the canvas. 

Once the action is mapped on the canvas, click the gear button to open the action settings. Go to the "tracking" tab under the action settings.

Make sure that your action has unique identifiers for event name and custom properties.

In this case, we'll use these attributes:

  • The event name will be: Clicks
  • Key: Button
  • Value: main_cta

Copy the code snippet to your clipboard and save your funnel.

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.

Create the tag in GTM

With the Funnelytics code in our clipboard, we are going to go create the tag that will fire that code on the specific trigger that we identified previously.

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 paste the Funnelytics script into the box. 

This is an example of what the HTML from the action looks like. You can see that the event name is click and that there is an added attribute of button: 'main_cta'.

<script type="text/javascript">
window.funnelytics.events.trigger('click', {
    button: 'main_cta',
}, function() {
    // continue with process..
});
</script>

The trigger for this tag is going to be the new trigger that we created titled 'Main CTA Button Clicked'. Save the tag.

Verify the tag

Okay, this is it! If you've followed the steps up till now, we should see that the action is firing on our page.

To see if the trigger is working on the page, check the network tab in the developer's console. When an action goes off, there should be a network request titled "trigger" in the developer's console.

The network request will have a status of 200. 

Note: I did access the page in incognito mode to test it out. This seems to work best when testing. There is also about a 30-second delay before you will see that data.

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!

Did this answer your question?