How to Implement Hotjar Personalized Surveys for New and Returning Visitors [Free Google Tag Manager Custom Template]

One of the most insightful ways to segment website visitors is by new or returning. Obviously, those who’ve never visited your website before are new users while those who have, fall into the returning category. Nothing groundbreaking so far. 

Here’s the thing though – the quantitative data you get from Google Analytics for these users will only take you so far.

What would really be useful is getting the context of WHY those users are behaving the way they are. 

If you’re a CRO specialist – wouldn’t you want to know more about your users’ concerns, friction points or usability issues based on where they are in the decision-making process?

Or maybe you’re a digital marketer in search of new ways to connect with both warmer and colder audiences. How cool would it be to use the very same language of your returning and new prospects, respectively,  to generate authentic cold-audience and retargeting campaigns?  

This is the power segmented surveys hold!

That being said, let’s see how you can dig deeper into understanding the whys and the hows behind these two prospect segments with personalized Hotjar surveys.

Throughout this article, we’ll discuss and explain topics such as:

• Why Hotjar and Google Tag Manager go together like milk and cookies;
• A step by step Google Tag Manager implementation of segmented surveys;
• And how to set up surveys that only trigger for new or returning website visitors;

Let’s go!

Why Hotjar and Google Tag Manager Go Together Like Milk and Cookies

Whether it’s through heatmaps, recording sessions, or surveys, Hotjar works miracles in helping you understand what keeps people back from becoming your customer.

We’re going to stick to surveys throughout this article for obvious reasons – however, we highly recommend you try its entire range of features. 

Now, our favorite way of triggering special Hotjar surveys for new and returning visitors is through pairing Hotjar with a Google Tag Manager Custom Template. 

It’s worth noting that if you only have Hotjar’s Basic Plan, you will need to upgrade to their Plus subscription for this to work. 

Now let’s see what’s the deal with Hotjar and Google Tag Manager.

When working together this dynamic duo is like Batman and Robin. Like Sherlock and Dr. Watson. Like Han Solo and Chewbacca. You get the point. 

That’s not to say Hotjar is not incredibly powerful by itself.

However, suppose you want to dig deeper into a specific segment of your audience, (in our case new and returning visitors), you have to go beyond the usual 3-clicks setup, and help the survey trigger only to the specific type of website visitors you want to.

This way you get more valuable insights that can be used across all your marketing efforts.

And while there are a few ways to implement these types of personalized surveys, our go-to solution is to team up Hotjar with the Google Tag Manager Custom Template you’ll receive from us. 

Step by Step Google Tag Manager Implementation of Personalized Surveys

1. Integrate Hotjar with Google Tag Manager 
2. Add the Custom Variable Template
3. Create a variable, based on the Custom Variable Template
4. Create a “new visitor” and/or “returning visitor” trigger.
5. Create a Custom HTML Tag to fire a Hotjar event for a ‘new visitor’ and/or ‘returning visitor’

Let’s pause for a moment and zoom out towards the big picture. We’ll do that by going the steps mentioned above in reverse – it’s easier this way. To form a better understanding of the logical steps, we need to use some GTM-specific terms – Tag, Trigger, Variable, and Custom Variable Template. 

Now, like we said, to form a better understanding of the overall ensemble, we’re going to start off at Step 5. Hotjar needs some help to know which survey to fire for a new or returning. This is where Google Tag Manager comes in. GTM needs a Custom HTML Tag that will feed Hotjar the information it needs so it can differentiate what survey to fire and when.

This Custom HTML Tag uses the Trigger created in Step 4, which in turn fires anytime the Variable you’ve put together in Step 3 meets the condition you set. 

Here comes the good part. If you already have the Custom Variable Template needed for Step 2 in place (drop us your email and we’ll send you ours for free), creating the Variable becomes a lot easier to do.  

Now, with the big picture explained, let’s get to the actual process. 

1. Integrate Hotjar with Google Tag Manager (GTM)

First and foremost, you need your Google Tag Manager container in place and at least a Page View Tag installed on your website.

Next, you need to integrate Hotjar with Google Tag Manager. If you’re new to it, make sure to check out this guide.

2. Add the Custom Variable Template

Half the job is already done with the Custom Variable Template for Hotjar surveys in your toolkit. You can get our pre-built Custom Template for free at the end of this article.

You’ll get easy-to-follow instructions about adding it to GTM inside the email we’ll send you. The email will also feature a script you’ll use when you get to step four, below. So make sure to let us know where we can send your Custom Template – it will really make your life that much easier. 

Now, you’re probably wondering what this Custom Variable Template does.

The answer is simple – it serves to differentiate between New and Returning Visitors on your website. Basically, you want to be able to tell who’s visiting your website for the first time, and who’s just coming back. All for the purpose of knowing which type of survey to show to each one of these two categories. 

To do that, you will make use of one of Google Analytics’ features, called Client ID.

As Google itself says “Users may interact with your website or application from a number of different devices, such as a desktop web browser, a browser on a mobile phone, or via a native mobile application. By default, Analytics assigns each device a unique Client ID, and considers each unique Client ID as a unique user in your reports.” (Source here)

Back to the template – make note it contains a smart piece of script that identifies the Google Analytics Client ID of a user who visits your website. Then, if the User is new to your website, meaning the Client ID was created less than one day ago (a.k.a. 1440 minutes), it returns ‘True’. 

Note for advanced users: The amount of time in minutes can be edited. So, if you consider that your Client ID must be created within the last 60 minutes, go ahead and modify the template. However, our recommendation is to keep the template as it is and only perform these modifications in the next step, when you create a variable based on this template.

Here’s what the template will look like once you add it to GTM.

Now let’s move on to the next step.

3. Create a variable based on the Custom Variable Template

Before we go any further, we need to make clear that you don’t necessarily need a Custom Variable Template for this to work. 

The alternative would be to code a script to identify the Client ID that returns ‘True’ if the ID was created less than 1440 minutes ago. 

However, our template already does this for you – and creating the new variable gets a lot easier.

 Now, you’re probably wondering Why do I need both a Custom Variable Template and a Variable?

Think of the Custom Variable Template as a compass. While it does a good job of identifying your North (new and returning visitors in our case), it’s pretty much useless unless a real person (in our case – the variable) uses it.

This step is particularly important because the Variable you are about to create stands at the core of connecting Google Tag Manager with Hotjar. 

So, go ahead and create a new Variable (we called ours Is new visitor). Then, assuming you’ve decided to get our Custom Variable Template and you’ve already added it to your container, select it from the variable type menu.

4. Create a “new visitor” and/or “returning visitor” trigger.

From this moment on you’ll need to go side by side with the ‘new’ and ‘returning’ duo. This means you’ll have to create two triggers, then two tags, as well as two surveys :).

Let’s start with the two triggers – one for each type of visitor. These triggers will serve the tags you’ll create at the next step, when connecting GTM with Hotjar.

Choose a Page View – Window Loaded type of trigger for both.  

The variable that you are going to use to fire these triggers only returns true or false if Google Analytics is initialized. That’s why we recommend using a Window-Loaded trigger.

For New Visitors, fire the trigger when the Is new visitor Variable is true.

For Returning Visitors, fire the trigger when the Is new visitor variable is false.

5. Create two tags for Hotjar

Now that you’ve got a variable and two triggers set, the last thing to do is tell Hotjar when to show your desired survey. 

For this to happen,  you’ll need to create two tags – one for each type of visitor.

a. ‘CHTML – New visitor survey’ tag

Remember when we said you’ll need a script code when you get to step 4? Well, here you are. 

So, create a new tag, configure it as a Custom HTML tag, then copy-paste the script you received via our email. Haven’t added your email address where we can send you the Custom Template along with the script?  Do so now at the end of the article or on the sticky box from the right side of your screen.  

This tag should have the trigger for new visitors you created at step #3 (ours is called “Page View – Window Loaded – New visitor”).

b. ‘CHTML – Returning visitor survey‘ tag

The second tag needs almost the exact same setup. 

Use a Custom HTML tag and copy-paste the same script. The only difference is you’ll replace ‘new-visitor-survey’ with ‘returning-visitor-survey’ within the script. 

All that’s left is to use the trigger you’ve just created for returning visitors (ours is called: “Page View – Window Loaded – Returning visitor”).

Important note: To maintain a flawless implementation, we recommend firing your tags in the following order. 

1. UA/GA4 is initialized
2. CHTML – New/Returning visitor survey tags

Great! You’re just about done. All that’s left is to set up your surveys in Hotjar which is the easiest bit.

How to Set up Surveys in Hotjar

Head to your Hotjar dashboard, go to Surveys in the left panel, then click the New Survey button in the top right corner.

Creating your survey from there is as straightforward as it gets (see screenshot below).

So, go ahead and:

• [Section 1: Details] Give your survey a name.
• [Section 2: Location] Choose which type of survey you want (we recommend the Popover one in this case).
• [Section 3: Questions] Create the questions you want to ask.
• [Section 4: Appearance] Arrange your design setup.

Then you’ll reach [Section 5: Targeting]. This one ties in to your previous implementation in Google Tag Manager. This is where the actual magic happens.

So, within Section 5: Targeting:

• Choose the devices you need; 
• Then, from the Pages subsection choose Specific Pages. Next, from the drop-down menu, select Event and copy and paste the text new-visitor-survey within that field.

You can now head to the next sections to finalize the survey setup.

In [Section 6: Behavior], select when to show this survey to users and how often you want them to see it (for this survey’s purpose we recommend showing it only once, after a delay or when the user intends to abandon the page).

[Section 7: Forward Response] Toggle the setups you want.
[Section 8: Review & Activate] Set your survey to Active and click Create Survey.

There you have it. You’ve just told Hotjar which visitors to show the survey to. That wasn’t so difficult, was it? 

Next, you’ll have to go through the same steps to create a second survey specific to the returning visitors.The only difference here is you’ll add returning-visitor-survey in the section you previously added new-visitor-survey with the previous one. 

It’s also incredibly important to use exactly the same naming convention in Hotjar and Google Tag Manager.

You’re all set and ready to go once you’ve got that out of the way. 

Final Thoughts

The qualitative data from on-site surveys is a real goldmine of growth opportunities for any business. 

Just think about the revenue boost you could bring in by redesigning your retargeting campaign based on returning visitors’ objections and pain-points.

If you’re a CRO specialist you could end-up with a full calendar of A/B testing ideas  that could help you generate massive conversion rate uplifts. 

New and returning visitors may be at different stages of the decision-making process – meaning their friction-points and usability issues may very well be different. With surveys by your side, that’s for you to discover!  

There’s really no telling of what else you’ll find out from your surveys. And if you’re like us, you probably can’t wait to get started.

If you choose to go with the Hotjar and Google Tag Manager duo, add your email address in the box below to grab your ready-to-use Custom Template personalized surveys. Trust us, you’ll save yourself a LOT of time and a LOT of nerves by having one that’s already built for you. 
Finding opportunities where no one else dares to look is what we do best at Growth Savvy. If you think your business or marketing department could do with our help in data analytics, CRO, or advertising, don’t be a stranger and book a free strategy call or send us an email.