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: https://developers.google.com/analytics/devguides/collection/analyticsjs/events

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.

Example:

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: http://tumult.com/hype/documentation/javascript/

4 Likes

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

@john58975
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.

Thanks jameskoh,

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

@john58975 http://blog.woorank.com/2014/07/10-web-analytics-tools-analytical-tools-other-than-google-analytics/

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?

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:
https://developers.google.com/analytics/devguides/collection/gtagjs/events

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

Would this be essentially similar to track swipe interactions on mobile banners?

You could run these GA events in response to any action. I’m not sure what you’re asking?

Just getting started with GA so apologize for beginner-type questions! My ultimate goal is to tie the GA code to different Hype events and actions.

What I have done:

  • Added gtag to Head HTML (I know this is working because it shows 1 active user when I land on the Hype page)
  • Tried 2 versions of code on Layout Load

First:
gtag('event', 'Load', { 'event_category': 'Page', 'event_label': hypeDocument.currentSceneName() });

Second:
_gaq.push(['_trackEvent', 'Scenes', 'Load', hypeDocument.currentSceneName()]);

Questions:

  • What is the difference between code 1 and 2?

  • Even though I have landed on the page 2 times on different devices, why does it show 0 Total and Unique Events? Why is there no data for the Primary Dimension of Event Category, Action or Label? Note: The only section in GA where I seem to see data is the Real-time tab.

  • Why is GA not generating any data or even the Event Label for my Hype Scene name?

  • Am I looking for the data in the wrong place in Google?

Thanks!

Happy Hyper

To clarify, you see the event data or just the visit data in the real time tab?

If you are seeing it in real time then it likely means the data is being transmitted correctly. I find for normal page view analytics it can take a several hours for the data to show up.

Otherwise my first suggestion would be to check the developer console and make sure there are no errors :slight_smile:. Looking at the code and what you've said as far as it being in the Head HTML, the most likely issue (from the Hype side) is that you don't have a hypeDocument object?

Unfortunately I don't know enough about the GA API to know the difference between the two calls.

In real time tab, I see the visit data, not the event data.

There are no errors in the console.

What do you mean by "don't have a hypeDocument object"?

Thanks!

Update:

Yes, the results showed up after several hours!

1 Like

Great, then it sounds like this is all good :slight_smile:. I wonder if there is a better testing flow?

If within Hype you add a JavaScript function, you'll see that the signature usually starts out like:

function untitledFunction(hypeDocument, element, event) {

In this regard, hypeDocument is a local variable to the function. If you were to write a <script> tag in the Head HTML, you therefore wouldn't have this variable since it is not in the global scope. The two primary methods to get access to a hypeDocument variable would be:

  1. Use the HYPE.documents global variable and either access it by name (HYPE.documents["myDocumentTitle"]) or via the first object in that list (Object.values(HYPE.documents)[0]).
  2. Attach to a global event like the HypeDocumentLoad and capture from there.
1 Like