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

After you create an account (Free plan includes 100 sessions/month which are automatically staggered throughout the month), you’ll get a Javascript code which needs to be placed in your website’s HTML. It should look like this (but with a different ID):

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.
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).

 

Let’s test

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.
    preview and debug console
  • Go back to GTM’s interface and hit Publish button. Voilà! Inspectlet code is now live.

TAG user sessions with METADATA/events

With the JavaScript tagging API, you can optionally send any metadata to Inspectlet about a user or a session. For example, you can push email address of the user, so that you can search for it from the Dashboard to find all recordings of that user. Other examples include events that occurred during user’s session:

  • 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:

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:

    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.

inspectlet dashboard

A page of captured user sessions is divided into:

  • List of sessions
  • Filters (on the right side of the screen).

Inspectlet list of user sessions

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).

Inspectlet tags

Done! You will see a list of user session when users added at least one product to their cart.

 

Conclusion

  • 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.
    • In addition, you can fire custom HTML tag with tagSession Javascript code when a user completes a particular action on your website/app. You can later filter user sessions by those custom actions/events.
  • Don’t forget to test before deployment (use Preview and Debug mode)
Julius Fedorovicius

Head of Developer Operations at Omnisend. I am highly interested in Google Tag Manager, Google Analytics, Google Ads, Email marketing, Email Deliverability, Digital Marketing in general. You can follow me on Twitter or Linkedin.