Smartlook’s powerful analytics engine shines the most with custom events and properties.
Smartlook Custom Events can be used to track any kind of interaction with your content. Custom Events Properties expand on this by providing you a way to add your own custom attributes for specific events.
On the other hand, that process is even more simplified with the Google Tag Manager (GTM). Sending custom events with GTM doesn’t require direct access to the code and it scales easily. If you have added one custom event (as I’m going to add in this short tutorial) it is easy to copy & scale the approach.
In the following example I’m going to create a custom event that will be fired (sent to Smartlook) every time someone clicks the right arrow on our Homepage, Testimonials section:
Please note that this specific click would be picked up by Smartlook automatically.
But, for this tutorial it can be used as a good example of principle how you can track Smartlook’s Custom Events with GTM.
To successfully follow the tutorial and subsequently implement the custom events tracking you’d need to:
- Have a deployed Smartlook tracking code
- Have API methods enabled for your Smartlook project
- Have an active, deployed, Google Tag Manager container on your website.
So if you still don’t have an active and deployed GTM container or a Smartlook project, please make so before proceeding.
Step One – Adding a Custom Events Tag
As you’re probably aware, GTM is a solution that allows you easy and streamlined management of various tags that get activated on your website based on various triggers.
Similarly, within this context, consider Smartlook’s Custom Events tag as another tag that needs to be activated.
Therefore, you’d start by adding a new Tag in GTM.
Define the name of the tag as you wish. I’m going to call this one: ‘HP Testimonial Arrow Right – Click’
This new tag we’re adding here would be a new Custom HTML Tag type.
Now, the content of that HTML file should include Smartlooks Custom Events script. You can review the specific custom events methods in our documentation, here.
For my example here, I’m going to add this to the HTML field:
Save that and voila, you’ve defined what kind of Custom Event Smartlook will listen for.
With that, the first bit of adding a tag is done. For the next step, and which is more important – you’d need to define a trigger.
Step Two – Setting up the firing trigger
One of the amazing powers of GTM is the ability to listen for various interactions and situations on the websites and deploy tags specific on conditional triggers.
There are 14 default triggers which can be used to trigger tags. And furthermore, GTM allows you to combine these for robust control and detailed firing.
In our example we’re going to use the Click – All Elements trigger:
Once you click there, you’ll have an option to Trigger on All Clicks or Some Clicks.
Since we already set our mission to track that specific click (right arrow on the testimonial slideshow) we’ll have to use the Some Clicks option.
But, as you can see, this opens another set of conditions and definitions.
This is expected. This windows is used to specify which kind of click GTM is listening for.
At this point, we don’t know anything about that right arrow click. We don’t know any of it’s specifics we could use for a trigger.
To find out we’d need to access GTM data layer in the Review mode. It may sound complex, but it really isn’t.
Though, we’ll have to leave this window for now. So, save this trigger with All Clicks, and head to the main page of the Workspace.
Step Three – Specifying the interaction
Another powerful feature of GTM is the Preview mode that enables a debug mode which helps you get to the specifics of the click you’re looking for the trigger.
To enter the GTM Preview mode, click on the Preview button on the main page of the workspace:
Going into Preview mode will also check your tags for basic errors and provide you a debug tool that would act as if you published the container you’re actually working on.
Once the Preview mode is activated, just navigate to your website in another tab.
The Debug tab should be there and it’ll look something like this:
The panel on the left is crucial when you want to track interactions on your website.
It is basically a step-by-step overview of all the interaction GTM is listening. And we need that for our example.
Upon clicking on the right arrow in the testimonial section this is how this list changes:
That 5th event Click is the one we’re looking for.
Clicking on that Click we’ll see what tags are fired on it.
Now we see that the tag we defined in Step One has been fired.
However, remember this tag is fired on all clicks (Step Two) at this moment, so this is not really helpful.
We still need to get to the specific click information we can use to specify that trigger.
Clicking on the Variables tab will get us on some information on that click.
Hm… as you can see, there’s nothing we can use here to get to that click. It is all general info.
Further information on clicks and interactions can be found in the data layer. To see these, click on the Data Layer tab.
For our example the data layer looks like this.
And this particular element is specific enough for us to use for that trigger.
So let’s save it:
gtm.elementClasses: 'customer-review__action customer-review__action--next',
We now have the specifics we’re looking for.
Now, we need to define a GTM Variable that will store this value for the trigger.
Step Four – Adding a Variable of that Click
To do that, go back to the Workspace and click the Variables tab.
The click gtm.elementClasses is a Built-in Variable – so you’d just click to Configure a variable:
And choose the Click Classes variable to add it to the workspace:
And the work is done here.
Next, we need to finalize that trigger.
Step Five – Finishing up the Trigger
Previously, in Step Two, we defined a trigger that listens for all clicks.
Since then we’ve successfully identified a specific variable for that click and we’re going to use to focus that trigger.
While editing the Testimonial Right Arrow Click trigger, we’re going to specify only to listen for some clicks where the Click Classes variable contains a piece of that data layer variable noted before:
Final trigger would look like this:
And that’s it.
Save the trigger. Refresh the Workspace. Enter the Preview mode again to verify that the tag launches on that specific click.
The Custom Events in Smartlook
As soon as the tag gets fired in a production (live) website with an active Smartlook tracking code deployed the data will be captured.
In Smartlook, you’d view this Custom Event in the Events Manager. You can recognize it by the cog icon and the name you defined in the tag creation (Step One).
Also you can breakdown those events by properties and discover some unique insights. Read more about that in the How to Get Unique Insights with Events & Breakdown blog post.
Sending custom events to Smartlook with GTM is easy.
In principle, all you have to do is add a simple Smartlook method (documentation here) to your GTM container tags and trigger them on specific interactions you want to track.
Truthfully, the trigger definition element is where complications may happen. Though, this all depends on your use case and what kind of interactions you want to track.