Tracking visits, events, and actions with Google Analytics



Google Analytics is a popular service for tracking visit and actions on your site. It’s easy to extend Google Analytics to keep track of scenes visited, animations played, and virtually any event that occurs in your Tumult Hype document.

Basic Setup

To setup Google Analytics track visits to your HTML page which contains your Tumult Hype document, simply copy and paste the <script>...</script> code that Google provides into the ‘Head’ area of your document. You can edit the contents of the <head>…</head> of your exported .html file by clicking on ‘Edit HTML Head’ in the Document Inspector.

For more advanced tracking, read on:

Advanced Event Tracking

This webpage outlines event tracking and explains in detail the different event types:

Please note that when testing this, you’ll need to have your Tumult Hype document uploaded to a web server belonging to the domain of your Google Analytics tracking code.

Here’s how to begin tracking events in Hype:

Install the Tracking Code

Before anything will work you’ll need to embed the provided Google analytics tracking code explained in ‘Basic Setup’ above.

Track an Event with Gtag

Google provides the following example for tracking an event:

 gtag('event', <action>, {
  'event_category': <category>,
  'event_label': <label>,
  'value': <value>

If you had a scene containing a video, you could run this function ‘On Scene Load’. Simple go to the scene, and add a ‘On Scene Load’ function and paste in the above code.

Load Scene or Document Names Dynamically

When loading JS in Hype, you have access to all of Hype’s APIs, so you could easily include the Scene Name in your events. Use hypeDocument.currentSceneName() wherever and Hype will write the scene name wherever used.


gtag('event', 'Load', {
  'event_category': 'Scene',
  'event_label': hypeDocument.currentSceneName()

You can also include hypeDocument.documentName() if you have multiple Hype documents on the same page.

For more ideas, please view the JavaScript documentation:

Tracking Scene Loads in Google Analytics
Google analytics
Hype Pro In-depth Tutorials
Do scenes = web pages in a complete site?
Hype reflect has stopped showing the document
(John) #2

I have tried to setup this code so many times but its not working. Google analytics is very hard to understand as it contain huge amount of data, Sometime it contain ambigious data where it is difficult to know what are the actual visitors & what are the bounce rate. Now I’m working with GoStats & it works better the Google anlaytics

(james koh) #3

follow below instruction

  1. go to google analytics website
  2. click Admin
  3. in account menu, click create new account.
  4. fill out information
  5. click on get tracking id
  6. copy and paste that code to your head using edit head html in hype program.

you can download the google analytics app and get the results or website.

(John) #4

Thanks jameskoh,

For this useful information but would you suggest me some more tools other then Google analytics?

(james koh) #5


(Jess) #7

Hi jameskoh,
I was working with GA. I had setup it, but after sometime it started giving problems. I reinstall it but still the result was same. It tracks data from invalid source & shows zero page views in dashboard. How it is possible?

(bjm) #8

FYI, if you’re using the latest version of the GA script (gtag.js). The correct code would be something like this (the Hype API calls the scene name for the event label in this example):

gtag('event', 'Load', {
  'event_category': 'Scene',
  'event_label': hypeDocument.currentSceneName()

Here’s the documentation:


Thanks for posting this update :), I’ll adjust the example above.