1. Help Center
  2. Advanced Tracking
  3. Intro To Funnelytics Event Tracking

Adding Funnelytics Action Script to GTM to Track Customer Events

It’s just code, it can’t hurt you! A guided expedition through the world of Action Scripts with our Head Wizard.

Alright intrepid explorer, if you read the first article (An Intro to GTM) you should at least have a basic understanding of what Tag Manager is and what the main features of the platform are. With that under our belt, it’s time to start putting theory into practice!

Lights, Camera, Actions!

I’m ready for my close up Mr. Tag Manager

Let's begin by taking a look at the Funnelytics Action Script. This is the little bit of 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>


Now if you’re not very familiar with JavaScript don’t worry, we’re going to break down the Action script into all its various components and explain what each one does, starting with our Script Tags.


Let’s Talk About Scripts Bae-Bee!


Since our Action Script is a bit(snippet) of JavaScript, it’s always going to live, nestled between two script tags. An opening script tag(<script>) and a closing script tag(</script>). 

Now, much like between the sheets, between our script tags is where the magic happens! It all begins with calling our Funnelytics Events Function, and no matter what action your tracking, it’s always going to begin the same way.

window.funnelytics.events.trigger();

What’s In A Name?

 

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(don’t worry about it, it's just a scary word) our Action Name will appear between opening and closing brackets and will be wrapped in double or single quotes (the choice is yours, but I would stick to one or the other. Personally I like single quotes (‘’) as it means I don’t need to hold the shift key, but it’s up to you)

“Alright, simple enough, but what are the rules around naming my Action”, you ask?

 

 

Just kidding... you can call your Funnelytics Action whatever you like. There is no set naming convention, however I would strongly suggest you establish your own conventions.

AND STICK WITH 'EM!

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. Meaning we would have several different form submission events being tracked, something like, “Registration Form”, “Newsletter Sign-up”, “Demo Request”, “Contact Form” and so on.

 

And that’s it! In terms of what is required in your Funnelytics Event Script, you’re all done. You could send your event to Funnelytics as is, with just the name and it would be accepted and displayed on the canvas no problem.

 

“But wait… If I’ve assigned a super generic name to my Action, how do I tell one apart from the other?”

Hot Properties

 

This is where our Action properties take center stage. If you recall earlier I mentioned that the Actions Function accepts two parameters, a Name and Properties. Our properties are where we are going to define our specific action, listed out as “Key and Value” Pairs. Let's keep building our event script.

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.

 

Opps! Seems like I may have lost some of you there. No worries! If you have no idea what I’m talking about when I say “Key and Value” pairs, remain calm, take a deep breath and follow me, we’ll explore this concept right now.

 

If you’re already in the know and you’d prefer not to read more of my incessant rambling jump ahead to the next section and we’ll meet you there.

Keys Open Doors, Keys, Keys, Open Doors

 

Alright Key and Value pairs! Let's talk about ‘em! It’s a really simple concept, essentially, it’s just a way of describing an object by breaking it down into its defining characteristics.

 

Picture a car

Here’s One!

If we wanted to describe the above automobile, there are a number of descriptors that we would probably use to do so. For example, the make, model, colour, year, type and so on. These would be our Keys. These are constants that are going to apply to just about any car we might describe. 

The Values are the variables that make up this unique car. So for example, if the Car’s Make is our first Key, its Value is going to be Hyundai, as the car depicted in the above image is in fact a Hyundai.

So let's play this out.

The Key and Value Properties of a Car

KEY:

VALUE

Make:

Hyundai

Model:

Elantra

Colour:

Black

Year:

2021

Type:

Sedan

 

Now if we wanted to describe this car in our Funnelytics Action Script, it’s going to look very much the same, we’re just going to do it with text instead of a table like this,

window.funnelytics.events.trigger(‘Car’, {

  ‘Make’: ‘Hyundai’,

  ‘Model’: ‘Elantra’,

  ‘Colour’: ‘Black’,

  ‘Year’: ‘2021’,

  ‘Type’: ‘Sedan’

})

See? Nothing to it! You’ve probably been organizing things into key and value pairs for ages without even realizing it. So now let's take a look at our generic Event Script once again to learn the formatting rules and then we’ll move on to a more practical example. Sound good? Let’s GO!

Formatting your Properties… Properly

Okie Dokie Folks! Now that we have everyone on the same page, let's look at how our Action Properties are structured.


As mentioned earlier we use a comma to separate our Action Name from our Properties and then place our properties between opening and closing curly brackets. As you can see in the above image we list our properties as key and value pairs. Notice that the Key and its value are separated by a colon (:). We can think of it as an equal sign, but make sure not to confuse the two. Using the equals sign in place of a colon will cause your script to fail. 

 

I’d also like to draw your attention to the commas that separate each key and value pair. Each set of properties will be separated by comma save for the last. Once you’ve listed your last property, simply close the curly brace and you're done!

 

“But wait, what do I call my keys? I get that there is no naming convention for the action itself, but surely that isn’t true for keys right?

 

I’m glad you asked!


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

There are, however, two exceptions to this rule.

If you would like to de-anonymize visitors on your site, who have provided their name and email address, you can do so by passing that name and email by using the incredibly imaginative name and email keys (all lower case).

So that might look something like this,

window.funnelytics.events.trigger(‘Form Submit’, {

  ‘name’: ‘Test Testerson’,

  ‘email’: ‘test@testerson.com’ 

});

Summary

Cool cool cool! Now that we have completely dismantled our Event Script let's put it all back together.

  1. Since our script is JavaScript, it’s always going to live between opening and closing script tags
  2. Our script will always begin the same way, by calling,
    window.funnelytics.events.trigger
  3. We place our event name between opening and closing brackets wrapped in quotes and we can call it anything we like!
  4. If we want to add properties to further define our Action, we insert a comma after our Action Name and place our properties between opening and closing curly brackets as a list of comma separated, key and value pairs. Once again, the keys and their value can be anything you like, the world is your oyster

Whew! Nice work everyone! Now that we’re familiar with Tag Manager and we understand how our event script works, it’s time to put it all together and start looking at some real world examples!

GTM WLKTHRU

AKA: Google Tag Manager Walkthrough

I’m excited. Are you excited?

We’ve got all the pieces of our puzzle and now it’s just a matter of putting it together in order to see the complete picture of our Customer Journey.

I mean, can you feel the energy in the air?! Where do we start? Wanna start with a tag? Begin with the end in mind? Let's do that! Off we go!

Configuring your Funnelytics Tags

 

Ok, let's start with a really simple example. We’ll begin 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 click on Tags and then hit New

Once our Configuration pane opens, we’ll want to click somewhere inside the box that reads, “Tag Configuration” and then scroll down to Custom and select “Custom HTML”

When we’re configuring a Funnelytics Event, we’re always going to be using the Custom HTML Tag.

Once we’ve selected custom HTML we will be presented with our text editor and we can begin to enter our code. But before we do, let’s stop to think for a moment about what exactly it is that we want to see.

  • First and foremost, I want to know when someone has scrolled on my page.
  • Second, I want to know how far down the page they’ve scrolled, and there is more than likely a particular depth I want to know if my visitors have reached.
  • Lastly, I’d like to know what page the event has occurred on.

So I’m 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. Beauty! Let’s get to our code.

<script>

window.funnelytics.events.trigger(‘Scroll’, {

 ‘Scroll Depth’: {{Scroll Depth Threshold}},

 ‘Page Path’: {{Page Path}}

})

</script>


At this point almost everything above should look pretty familiar. We have our script tags, we’ve called our Action function and assigned our Action a Name of Scroll. Next we have added a couple of properties to our Scroll Action, the first called “Scroll Depth” and the second called “Page Path”.

 

What you may not yet recognize is the values associated with our two properties. As you may recall, Tag Manager allows us to reference variables within our tags and dynamically populate that variable with data captured during the visitor’s browsing session.

 

All that is to say that the value of our keys will be set when our tag fires. Speaking of which, when exactly do we want our tag to fire?

Let’s Get Triggered!

While we’re on the subject of triggers, we may as well take this opportunity to set up our scroll depth trigger.

 

If you’ve been following along at home, you’ll have noticed that below 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 currently available.

It is indeed possible that you already have a scroll depth trigger that will suit your needs quite nicely, but for this example, we’re going to assume that’s not the case and we’re going to build a new trigger from scratch.

To begin, go ahead and click the little plus icon (+) that appears in the top right corner of the “Choose a trigger” window that has muscled its way onto your screen.

Clicking the plus icon is going to open yet another window, presenting you with even more configuration options. It’s alright, we’re almost there! Don’t quit now! 

Go ahead and click anywhere inside the “Trigger Configuration” pane in order to reveal the various trigger types that are available to you. For our example, we’re going to choose “Scroll Depth” but since we’re here, if you’re not already familiar with the variety of trigger types at our disposal, perhaps take a moment to peruse your options before moving on.

Just as I thought I was done, when what to my wondering eyes should appear, but yet another configuration window, with even more settings to mess around with, oh dear! Home stretch now, I promise…

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 the same values listed in the example, “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. 

 

Be precise about what you’re looking to track. Not everything that is available is going to provide you with valuable insight.  

 

So, if you’re following along at home, you can go ahead and give your trigger a name in the top left of the pane and hit save in the top right, but remember, all data is NOT created equal!

 

** The following is a public service announcement from your Friendly Funnelytics Wizards **

 

Consider what it is that you want to understand about your visitors' behavior. Is there some element that lives half way down the page and you want to know if people are seeing it? There are options outside of scroll depth that would probably better answer that question. Do you just want to know if people are scrolling below the fold? Scroll depth is a good choice, but do you need to fire it at the 90% mark? Probably not. Do you need to fire it on all pages? Certainly not!


Undoubtedly you’ll have pages where when someone lands, the whole page is visible in their viewport and in that case, you’ll simply fire all your scroll depth tags at the same time. You’ll be creating noise rather than discovering value.

So please dear reader, if you take nothing else away from this missive, I implore you, be discerning about what you want to see.

Back To The Matter At Hand

So you’ve created your trigger and you’re back to our tag, only two steps left, give it a name and…

Also... don't forge to actually Submit/Publish your GTM workspace changes. 😉

Okay, let's recap where we're at:

How to install the Funnelytics Base Tracking Script Via GTM

How to verify the Funnelytics Base Tracking Setup

How to use Funnelytics Action Script to track custom Actions (you're reading this one right now) 

The final stretch ...

➡️  How to verify Advanced Action Setup