Funnelytics Action Script with GTM

Adding Action Script to GTM to track customer events

Let's begin by taking a look at the Funnelytics Action Script. This is the code that is going to make up our tag and it looks something like this.

<script>

window.funnelytics.events.trigger('Action Name', {
  'Key1': 'Value1',
  'Key2': 'Value2',
  'Key3': 'Value3'
});

</script>

Since our Action Script is a bit(snippet) of JavaScript, it’s always going to live, nestled between two script tags.

In order to call our Funnelytics Events Function, the script has to start with the following command (independently of what action your tracking, it’s always going to begin the same way)

window.funnelytics.events.trigger();

The action script accepts two components(parameters), a Name and properties, but only the Name is required. 

window.funnelytics.events.trigger(‘Action Name’);

Following our function - our Action Name will appear between opening and closing brackets and will be wrapped in double or single quotes.

The Funnelytics Action name can be whatever you like. There is no set naming convention, however we strongly suggest you establish your own conventions.

As more of a best practice, it’s a good idea to name your actions in the most general terms possible so that we have the ability to group them together and aggregate our data.

For example, I would advise calling all form submission actions something like, “Form Submit”. That way if you ever want to represent all form submissions across your entire site with a single Action Icon, you have that option.

Like this,

window.funnelytics.events.trigger('Form Submit')

If you were to assign a unique Action Name to each Form Submit Event, then Funnelytics would see each of those events as being distinctly unique and we would not have the option to group them together. 

Properties

Our properties are where we are going to define our specific action, listed out as “Key and Value” Pairs.

window.funnelytics.events.trigger('Action Name', {Properties})

If we want to assign properties to our Action, all we need to do is to insert a comma after our Action Name (still within the brackets mind you) followed by your properties listed out as key and value pairs between opening and closing curly brackets.

Example of how Action Properties are structured.

 There is no set convention here and you can call your keys whatever you like.

There are, however, two exceptions to this rule.

For example:

window.funnelytics.events.trigger('Form Submit', {

  'name': 'Test',

  'email': 'test@testerson.com'

});

Configuring your Funnelytics Tags

Start by setting up a tag that is going to tell us how far down a particular page a visitor has scrolled. So let's open up GTM > Tags > New

Once the Configuration pane opens, click inside the box that reads, “Tag Configuration” and then scroll down to Custom and select “Custom HTML”

Once selected the custom HTML we will be presented with our text editor and we can begin to enter our code.

In this case we are tracking a scroll event, and it will be defined by the page on which the event occurred as well as how far down the page my visitor scrolled. 

<script>

window.funnelytics.events.trigger('Scroll', {

  'Scroll Depth': {{Scroll Depth Threshold}},

  'Page Path': {{Page Path}}

})

</script>

For this example we added a couple of properties to Scroll Action (“Scroll Depth"- "Page Path")

Tag Manager allows us to reference variables within our tags and dynamically populate that variable with data captured during the visitor’s browsing session.

In our Tag Configuration pane, there is another pane that reads, “Triggering”

Clicking inside of the Triggering Pane will open a whole new set of configuration options and it is here that we will define exactly when we want to fire our tag.

Now, when the trigger options first appear, you’re going to notice that it provides a list of all of the triggers that are available.

For this case we will use a scroll depth trigger.

Now that we’ve selected our Scroll Trigger, we just need to set the conditions under which this trigger will fire.

For our example we’re going to want to hit the “Vertical Scroll Depths” checkbox and then define the percentages that are of interest to us. You can set this to be whatever you’d like, but I typically follow Google’s lead and assign > “10, 25, 50, 75, 90”

Now towards the bottom of the Trigger Configuration pane, you’re going to see an option that reads, “This trigger fires on” with two radio buttons below. By default, the trigger will be set to fire on all pages, though you’ll also see the option to further define when this trigger should fire. For our example, in the interest of simplicity, we’re going to leave the “All Pages” option selected, but this leads me to an important disclaimer. 

Something missing?

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

We love hearing from you!