We've already published an article in which we teach you how to set up Google Tag Manager (GTM) in your account. Before you move on to the actual tutorial, you should know that this feature is included in the Enterprise and Elite plans.

If you want to install Hotjar on your profile page and flipbook, first you should read about Google Tag Manager integration to learn the first steps. As you will learn in that article we recommend setting up a new container in your GTM account for Flipsnack tags.  

Once you complete those initial steps, you need to log in to your Hotjar account. If you don't have an account yet, you should sign up for one (it's free). 

  1. Click on the "+" sign on the top left. Or, click on the Organization icon and then on Add new site.

2. In the Website field enter your Flipsnack profile URL. If you don't know your profile URL, you should go to Brand identity - Brand Profile - Settings and copy the URL from the Default profile URL field. If you are using a custom domain/ subdomain, copy that URL instead.  

It's very important to use your profile URL, otherwise, the integration will not work.

Site type: Media or Other

Site owner: Select your organization from the list.

Click Add site.

3. There are multiple ways to proceed from here, so I'll show you the easiest one.

Click on the organization icon on the top left, then on your Flipsnack profile URL. It will take you to a new page in which there are multiple options for adding the Hotjar tracking in GTM.

Click on Install with Google Tag Manager option, then sign in to GTM to connect your account with GTM. 

Important: If you don't see the Install with GTM option listed above it means that you haven't completed all the previous steps correctly. 

4. Allow Hotjar all the permissions in need to create a tag in your GTM account. When you're redirected back to Hotjar, select your GTM account, and the Flipsnack container that you have previously created.

Then click Create and Publish tag. The tag will be automatically added in your GTM account with the name AUTO Hotjar Tracking Code

5. You're done, but you will probably want to test the integration now. You can set up a heatmap or you can set up a feedback poll.

When I went through this process for the first time to test the integration I first set up an Incoming feedback poll. Just go to Feedback -> Incoming and set up a feedback widget. The process is very simple.

Regarding Targeting (step 4): if you want to have your feedback poll appear on all your catalogs and your profile page, select the option On all pages where the Hotjar tracking code is installed. If you only want to use it on a specific page, use the other targeting option.

After you review and activate your widget, check your profile page (or targeted page specified in the Targeting step to verify the installation. 

You can obviously now create heatmaps, recordings and explore more options in Hotjar, which is an awesome tool.

If you want to activate heatmaps for your catalogs, you should remember that the heatmap is basically a static image of a webpage with click, scroll or mouse movements colors overlayed on top. This means that the static image will display the cover of your catalog. Hotjar will not create multiple individual heatmaps for all the pages of your catalogs. If you want to see how people interact with your catalogs, activate Hotjar recordings. 

Hotjar is a wonderful tool and we hope you'll make the most of it to learn about your visitor's habits and interaction with your flipbooks.  
If you have additional questions, let us know via Live chat. You might not get an instant answer if you have a technical issue, but we'll do our best to help as soon as possible.  

Did this answer your question?