September 15, 2016
Inspectlet + Google Tag Manager: Complete Guide
In case you didn’t know, Inspectlet is a user testing tool. As your visitors use your site, it will record Mouse movements, scroll, click, and key-press, Heatmaps, Click Heatmaps, Scroll Heatmaps. Every recorded user session can be played back later (as a video). It’s really useful if you want to understand how users interact with your app/website on an individual level. Google Analytics is designed to show aggregated data, for example, how many people visited a page or how many people subscribed to your newsletter. With Inspectlet you can see the entire John’s session in your app/website – what he clicked, submitted, how his mouse cursor moved, etc.
In this tutorial I’m going to show you:
- How you can install Inspectlet with the help of Google Tag Manager.
- How you can mark user sessions with custom Inspectlet events/metadata (custom data allows you to filter sessions).
Install Inspectlet with Google Tag Manager
<!-- Begin Inspectlet Embed Code -->
window.__insp = window.__insp || ;
setTimeout(ldinsp, 500); document.readyState != "complete" ? (window.attachEvent ? window.attachEvent('onload', ldinsp) : window.addEventListener('load', ldinsp, false)) : ldinsp();
<!-- End Inspectlet Embed Code -->
Although instructions say that you need to paste the code as close as possible to <head> tag, I placed it after <body> tag and it worked fine (because my Google Tag Manager’s container snippet is positioned right after <body> in my website’s HTML). In order to do so, first, you need to log in to your GTM’s account and press New Tag.
- Enter title. I’d enter cHTML – Inspectlet Code. cHTML stands for Custom HTML. Learn more about naming conventions
- Choose a Tag Type – Custom HTML
- Paste Inspectlet’s code.
- Scroll down to Triggering section. Choose a trigger – All pages. It means that Inspectlet will record sessions on every page of your website (where GTM’s container is installed).
That’s a good start. Now you need to check whether this tag fires on every page.
- Open Preview and Debug mode (click a little arrow (angle) right next to Publish button and then press Preview button).
- Open your website in browser’s new tab. You should notice a Preview and Debug console at the bottom of the screen (it’s only visible to you, not your visitors). As you can see in the screenshot below, our Inspectlet code was fired. If the code did not fire, check whether you configured everything in Google Tag Manager correctly.
- Go back to GTM’s interface and hit Publish button. Voilà! Inspectlet code is now live.
Tag user sessions with Metadata/events
- Subscribed to newsletter
- Clicked “Add to cart” button
- Made a purchase, etc.
First of all, you need a trigger – a condition which defines when a tag must fire. It can be a click of a particular button, form submission, etc. Here are few useful resources which cover various types of triggers in GTM:
- Tracking button clicks – by Measureschool
- Form tracking
- DataLayer events as custom triggers. Not sure what Data Layer in Google Tag Manager is? Read this.
When your triggers are ready, you need to start sending metadata/events to Inspectlet. In order to do so, create Custom HTML tags for each event/data point. Let’s say, I want to send “Added Product To Cart” event. Tag’s configuration in GTM should look like this:
- Title – cHTML – Inspectlet – Added Product To Cart or just Inspectlet – Added Product To Cart
- Type – Custom HTML
- HTML code:
123<script>__insp.push(['tagSession', "Added Product To Cart"]);</script>
See that Added Product To Cart in code? You can change it to whatever you want.
- Triggering – Choose a trigger Click – Added Product To Cart (or whatever you named it). You can learn more about button click triggers in this tutorial (by Measureschool).
Done! Don’t forget to test your implementation by using Preview and Debug mode:
- cHTML – Inspectlet code must fire on every pageview
- cHTML – Inspectlet – Added Product To Cart must fire only when a visitor clicks Add to cart button.
Read more about tagging user sessions in official Inspectlet’s Documentation.
View recorded user sessions in Inspectlet
Open Inspectlet’s dashboard. A list of all connected websites will appear. If there is at least one captured session, click View Captures link.
A page of captured user sessions is divided into:
- List of sessions
- Filters (on the right side of the screen).
Scroll down and you should see Tagged With section in the sidebar. Click Enter Tag field. If there is at least one session recorded with that tag, it should appear as a suggestion. Choose it and press Enter (leave Tag Value field blank).
Done! You will see a list of user session when users added at least one product to their cart.
- Inspectlet is really easy to install and use. I have already used it on multiple projects and was never disappointed.
- You can record how users interact with website/app and later replay it as a video
- Other features include heat maps and click maps.
- Integration via Google Tag Manager is pretty simple:
- Fire custom HTML tag (with Inspectlet’s code) on every pageview. This step is required.
- Don’t forget to test before deployment (use Preview and Debug mode)