CrazyEgg is a popular tool used by marketers from all over the world to collect data about how visitors interact with web pages. You can also use our Google Tag Manager (GTM) integration to view how people interact with your Flipsnack catalogs. In this tutorial I'll explain all the step you need to take in order to set up the CrazyEgg - Flispanck integration.

Before we proceed, please note that this integration is only available with the Enterprise and Elite plans.

How to set up CrazyEgg tracking for catalogs

  1. Please start by carefully reading our article about Google Tag Manager and following all the instructions listed there. It's very important to have the  GTM ID added in Flipsnack correctly before you move on to the the next steps.
    If you haven't used GTM before, don't panic. It only takes a few minutes to go though all the steps. You don't need any technical knowledge and it's completely free for anyone who has a Google account. 

  2. Now log in to CrazyEgg or sign up for an account. If you don't have an account, setting it up is super easy. The tool guides you through all the steps you need to take to finish setting up your account correctly, and even to add your GTM tracking. CrazyEgg is a premium-only tool, but it does have a 30day trial period, which is long enough to test it out.

  3. One of the required steps in setting up an account is adding your site. Here's where you need to pay attention. You will need to add your Flipsnack profile in the the site field. (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.)
    If you add a different URL, the integration will not work.

  4. After you add your profile URL, the tool automatically detects the Tag Manager integration and it recommends setting up the tracking through GTM. Here's what you will see as soon as you add your profile URL:

         Click that button: Connect with Tag manager.

     5. Next, you'll see a very detailed list of instructions.
         Please follow them step by step.  

In the screenshot above we have blurred out my CrazyEgg unique site ID, because each one of you will see a different number listed there. That is the number that you will need to enter in your GTM tag (step 4 in the screenshot above).
Also, when you click Submit as instructed by CrazyEgg (step 7 in screenshot), GTM might ask you to add a name and description to the new version of your container. This is because GTM keeps track of all the changes and edits you make in your GTM container. You can add a relevant description and name, to basically explain that you created the CrazyEgg tag, or you can skip this. Finish by clicking Publish.

Now, go back to CrazyEgg, click on Check my installation (the button that you can see in the screenshot above). 

6. In the new screen enter your profile URL and click again on Check my installation
It takes a few seconds (probably up to a minute) for the tool to verify the installation. If you've done everything correctly it will display the message Installation successful and redirect you to the admin dashboard in CrazyEgg.

How to set up heatmaps and recordings in CrazyEgg for your catalogs

The tracking installation is done, so now you can start working on setting up reports.
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.  CrazyEgg 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 recordings.
But lets start by setting up heatmaps or snapshots, as they are called in CrazyEgg.


Start by clicking on the Add new button on the top left and select snapshot. If you want to set up a heatmap for just one of your catalogs or for your profile, select One snapshot.
As you can see below, you can also set up multiple snapshots at once.
In any case, please make sure you enter the URL of each magazine or catalog that you want to track, and write a name for that snapshot. 

You have a few other settings to customize as you wish. The final step is Review & create. Finish by clicking “Create new snapshots

 CrazyEgg has a more detailed tutorial in case you need it. 

As you return to the Snapshots dashboard, you will already see the newly added snapshots there in the list. However, it will take a while before you can actually see the results, as the tool will start tracking only from this point on.

While you're waiting, you can go ahead and delete the demo snapshot, and maybe even set up recordings. 


For video recording, go to Recordings-> Settings
You will already see the Flipsnack website in the list on the left.  
You will have to turn the recording on as you see in the screenshot below.
Also check the second option: Only start recording sessions once visitors land on a specific page and enter the individual catalog URLs for which you want to see recordings.

With recordings you will also have to be patient, because you will not see recording instantly. 

If you've done everything correctly you should have some snapshots set up by now and recordings as well.
It's probably time to check the installation again just to be sure. 

Now that everything works smoothly I can go take a break and wait for data to start to register on my profile and catalogs!

I hope you found this tutorial useful. Stay tuned, we'll publish more tutorials and ideas for Google Tag Manager integrations soon!

Did this answer your question?