Becoming a Digital Publishing Master with in5

Images from apps and sites created with in5.

This course will teach you how to use InDesign and in5 to create beautiful and accessible sites and mobile apps. Learn to become a master of digital publishing from the ground up by using familiar design tools.

For full course details, visit the main course page.

Lesson 19: How to Add Google Analytics

Google Analytics is the industry standard for web and app analytics. This lesson will show you had add Google Analytics tracking to your project in a matter of minutes.

Expert Contributors to this lesson

Justin Putney

Justin Putney

Creator of in5

Today's Course Outline

  1. Why Track with Google Analytics?
  2. Setting Up Google Analytics
  3. Getting the Tracking ID
  4. One-step Setup with in5
  5. Viewing Your Tracking Data

Estimated time for lesson

Today’s lesson should take approximately 10 minutes.

Why Track with Google Analytics?

Analytics are a great way to track the effectiveness of your designs, e.g.,

This information is extremely valuable for improving designs, maximizing traffic, and increasing revenue.

Best of all, it’s free to sign up for Google Analytics.

Setting up Google Analytics

If you have not yet created a Google Analytics account, follow these simple instructions to set one up.

Getting the Tracking ID

The Tracking ID is the unique bit of info that will connect your project with your Google Analytics account.

Once logged into Google Analytics, locate Tracking Code link (in this case under Tracking Info) in the Admin section.

tracking menu in the admin section of GA

The screen may look slighty different if your Google Analytics ID is part of a website.

web ID example

Or if it belongs to an app.

app ID example

Either way, all you need is the Tracking ID (starting with UA-) at the top.

ID in Google Analytics

Copy that code and head back to InDesign.

One-Step Setup with in5

With your layout open in InDesign, choose File > Export HTML5 with in5... to open the in5 dialog.

Click on the Analytics & Sharing section and paste your Tracking ID (from above) into the Google Analytics Tracking ID field.

in5 dialog: pasted ID

That’s it! No more setup required.

(The ID will be saved with this document, so you don't have to re-open Google Analytics to mak changes).

Pro Tip: You can also include an App ID (optional). E.g.,com.example.myAppName. This will make it easier to track inside the Analytics console, especially if you have one "property" with multiple apps.

In addition to the basic tracking functionality, in5 can monitor other events within the document:

Check the box next to any these settings in the Analytics & Sharing section of the in5 dialog to enable them.

When you're ready, click OK to export.

Viewing Your Tracking Data

As soon as you post your HTML files to a web server, Google Analytics will begin collecting data (though it will probably take a few days before the data is available).example data from GA

How do I know it's working?

A few days can be a long time to wait before you find out your project is tracking data properly.

To get instant feedback in the browser, install the Google Analytics Tag Assistant addon for Chrome.

tag assistant feedback shows GA working

The Tag Assistant can show you if your Google Analytics Property is a active, and when events are triggered.

If you selected events from the in5 dialog (e.g., page view, button clicks, etc) you'll see those events being track inside the Tag Assistant.

Take Aways

  • Google Analytics is free and quick to set up.
  • Adding Analytics to in5 is as simple as copy and paste.
  • You can also monitor page views, button clicks, audio and video playback, and social shares with just a few clicks.

How effective is your design? Set up tracking in minutes.