The actions features currently requires a developer. If you are not comfortable with HTML, CSS, and Javascript you might want to find a developer. We will be creating a Chrome plugin in the coming months that will allow anyone to set up actions without the need for a developer.

That being said, we'll 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 Manger

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 hand 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 hand 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 in 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 to elements than I would first assign the custom css class to this button and then use that custom class 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 the triggers tab > New > Title: Main CTA Button Clicked > All Elements

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 on your canvas you will notice a folder on the left side title 'Actions'

Open the folder and map the 'click button' action onto the canvas.

Once the action is mapped on the canvas, click the pencil button to open the action settings. 

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.

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.
Once it is pasted we need to make a slight modification to the code.
The code contains a javascript function that waits for the window to load. Well, the window has already loaded so we are going to remove that function. 

This is what the code looks like originally:

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

We are going to remove the window.onload = function ( ) { line and its corresponding close }; from the script.

<script type="text/javascript">

window.funnelytics.events.trigger('click', {
    button: 'main_cta',
}, function() {
    // continue with process..
});

</script>

You can see that we removed the two lines from the script. This is now how the code should look pasted in the HTML section of the tag. 

The trigger 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.

Let's go back to our page (refresh the page in debug mode), click on the main button and then check our Funnelytics canvas to see if it worked.

In this example I started on 1, clicked anywhere to refresh the canvas and you can see it moved to 2.

Note: I did access the page in incognito mode to test it out. This seems to work best when testing. 

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

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?