Bringing Together Hotjar and Google Optimize

by Syrup | Mar 19, 2019

Kraig talked about Hotjar. Bonnie talked about Google Optimize. Now I’m here to bring it all together.

We’ve used Hotjar and Google Optimize separately for some time now. Hotjar lets us see heatmaps of user activity – where people are clicking, scrolling, moving, etc. Google Optimize lets us see how changes to the site impact end results – conversion rates, conversion volume, conversion value, etc. On their own, each of these tools provides incredible insight and value, but there isn’t a native way for them to work together. We didn’t have Hotjar heatmaps for Google Optimize variations. So in classic Syrup fashion, we set out to find a solution.

Now for you CEOs, owners, marketing directors, and big-picture thinkers who aren’t in the weeds of this stuff every day, let me just leave you with 3 reasons for why this is so important, and then you can stop reading.

• Greater insight into the user journey. With Google Optimize, you only know which variation most often leads to the final action. But what about when there isn’t a significant enough difference and your Google Optimize test is inconclusive? If you have heatmaps for each variation, you may find that “Learn More” as a call to action received 3 times more click engagement than “About Us.” While it may not have led to a direct conversion at that exact moment, your visitors were significantly more likely to click one CTA over the other, something you weren’t able to see by only looking at the end result.
• Visual proof of performance. Who doesn’t love a visual representation of performance? Instead of just looking at the numbers, you can actually see how your users interacted with each test. This also lets you see whether or not your change had any impact on the engagement with surrounding content.
• More testing opportunities. Being able to have heatmaps for each Google Optimize variation opens the door for even more testing opportunities. You can see how users interact with certain colors, text, placements, etc., which can inform future decisions for your brand and website.

Now for those of you who want to get in the weeds of how to actually do this, stick around. I’m here to share my findings on how to make Google Optimize and Hotjar talk, so you can do the same.

SWEET SOLUTION:

First, create your heatmap

When you get to the “Page Targeting” for your heatmap, you want to select the JavaScript trigger and name the trigger something descriptive for your test. In this case, we labeled it “homepage_variation.”

Next, create your Google Optimize variation

Start off business as usual. Make all the changes you want to your variation until it’s ready to go live because you want this to be the last thing you do. Select the square icon in the top left for “Select Elements.”

Regardless of what content is there when you open it up, complete the following steps to ensure your view matches the screenshot:

• Change the “Element Selector” to ‘body’
• Uncheck “Use element id”
• Uncheck “Use element class”

Once these settings are adjusted, click the blue box to “Add Change” and select “Javascript.” Copy the following code and replace homepage_variation with whatever you defined as the Javascript trigger for your heatmap.

try { hj(‘trigger’, ‘homepage_variation’);} catch(e) {}

Paste your code it in the box provided and click “Apply.”