If you know Axure (a powerful wireframing and prototyping tool), you are probably familiar with Axure Cloud, their Cloud publishing platform. That’s where a designer can upload their work to make it visible at a given URL to clients and teams. Among other benefits (like comments), it offers the possibility to add plugins to your prototype, and this feature can be pretty powerful. Today I want to focus on how to use the plugins to connect an interactive prototype to Google Analytics and Hotjar, and get feedbacks on users’ behaviors with your interface.

Why plug Axure with Google Analytics and Hotjar?

Google Analytics and Hotjar are two tracking systems that live-monitor the behavior of users on a web page or app. It will know when users click, scroll, mouse over, complete tasks or exit a page, and show this to you in a dashboard.

Most of the time, these are used on published websites or mobile applications, helping product teams identify pain points and optimizations.

There is a also great value in being able to get that observation feedbacks before publishing a product. Doing so on a prototype is even better, as it allows to collect behaviorial data from users browsing freely on a digital product and helps identify pain-points and optimizations before pushing it to the market.

There is great value to observing how users interact with your prototype early on, to valide hypothesis and identify pain-points and optimizations.

Step-by-step guide

So, how can we connect Google Analytics and Hotjar to a prototype published on Axshare? Very simply, thanks to the plugin feature on Axshare, and here is how:

1. Publish your prototype on Axure Cloud

1. First of all, make sure you have an account on Axshare, Google Analytics and Hotjar. (We will work with the hypothesis that you have a working prototype ready for publication in your local Axure software.)
2. The first step is to publish your prototype on Axure Cloud (or Axshare.) To do so, go to Publish / Publish to Axure Cloud. There you will have to connect to your Axure Cloud account, and set a name and settings for your prototype (read more guidance on Axure Cloud publishing)
3. Now that your protoype is published, click on the link, or open your Axure Cloud account.
4. From there, if you click on the name or your prototype, you access to a gallery of all screens included in it. On top of this gallery, you can see 4 tabs (Overview, Discussions, Plugins and History.) Click on Plugins and open a new browser tab (we will come back to this step later.)

Note that the page titles are inherited directly from your prototype. So make sure they are meaningful. A little hint: I add a letter code before similar pages (like start all product lists pages with « pl_ ») so I can then easily group these pages in the GA tracking.

Also, GA will track pages, so best not to build your prototype with only one page and multiple dynamic panels!

2. Connect with Google Analytics

Basically, we are going to create a new Property in GA, and then add the Global Site Tag in the header of our prototype pages via the Plugin feature in Axure Cloud.

1. Now, let’s connect this prototype with Google Analytics first. In your new browser tab, go to your Google Analytics account.
2. At the bottom left, click on Admin.
3. Click on Create Property (blue button on top of the middle column.)
4. For the « What do you want to measure » question, I recommend answering Web, as Apps and web is stil in Beta, but I see no reason why it wouldn’t work too…
5. In the Property setup, enter a meaningful website name (so you can find it easy later on.)
6. In the website URL, simply enter your Axure Cloud prototype link (something like « https://abcdef.axshare.com ». You can find this in your Axure Cloud tab, to right of the Overview tab.)
7. Make sure the reporting time zone matches your market.
8. Once you click on Create, you will be prompted with your new property Global Site Tag (starts with « <!– Global Site Tag (gtag.js) – Google Analytics –> » and ends with « </script> » after several lines of code) and tracking code (looks like UA-000000-2.) More guidance on Google Analytics Property creation. You can also find this tracking code later.)
9. Your Google Analytics account is now ready to connect to your prototype.
10.  Open your prototype in Axure Cloud and select the Plugins tab. Click on the Add plugin button (top right).
11.  Add a plugin name like Google Analytics, and copy your Global Site Tag in the text field.
12. When you hit Add plugin, select the pages you want to add it to (I recommend to select all and check the Add to new pages by default.)

You are all set! Now your GA property is tracking activity on your Axure Cloud prototype. Give it a few minutes, and try it yourself, to see how it works.

3. Connect with Hotjar

We are going to follow exactly the same principle for Hotjar.

1. Open Hotjar in a new browser tab.
2. Top left of your screen, click on the « + » icon and hit Add a new site.
3. In the first field (website), enter your prototype URL (something like « https://abcdef.axshare.com ». You can find this in your Axure Cloud tab, to right of the Overview tab.)
4. Select the fitting options in the next fields (more related to your Hotjar settings, and unrelated to our topic.)
5. Once you click on Create site, you will be prompted with your Tracking code (starts with « <!– Hotjar Tracking Code for… –> » and ends with « </script> » after a few lines of code. You can find this code later by clicking on the « building » icon top left of your screen, then Sites & Organizations settings and Tracking code button. More guidance on Hotjar site creation)
6. You’re probably seing now where this is going? Right: copy the Tracking code, and paste it in a new plugin in your Axure Cloud prototype.
7. When you hit Add plugin, select the pages you want to add it to (I recommend to select all and check the Add to new pages by default.)

All ready! Now you can go back to your Hotjar account to verify the installation, and create Funnels, Heatmaps, Recordings, etc. (don’t forget to do so, otherwise the tracking will work, but it won’t know what to monitor.)

Conclusion

These few steps took a little of your time, but now you can observe your users how they browse through your screens. Google Analytics will show you most visited screens and how long users spend on them. Hotjar will tell you to what point they scroll to, and where they click. It will allow you to replay session recordings and note pain-points. You can even propose a survey to ask questions contextually to the screens people are watching!

Actually, possibilities here are unlimited, and you could very well go much further by plugging in a Google Tag Manager. In my experience, this combination of tools was plenty enough for the kind of insights we were looking for at the prototyping stage (in complement to user testings as well.)

I will try to publish a related article to share feedbacks on a recent similar implementation I worked on with one of my clients. Stay tuned and talk soon!

Index of mentioned ressources:

• More guidance on Axure Cloud publishing
• More guidance on Google Analytics Property creation
• Find Google Analytics tracking code
• More guidance on Hotjar site creation