Getting Google Analytics from a Storyline Website

Jul 10, 2012

Hi,

Just thought that you might be interested.....

Via some code additions to the published story.html file, (which has been renamed to an index.html file...), have managed to start getting Google analytics off my Storyline-based Website.

High "bounce" rate, because they basically have nowhere else to go (!), but spending average 1 minute on the site, which is about as good as I could have hoped.

I know it's not the usual way to run a website, but it's plenty good for me at the moment.

Bruce

http://www.pperf.co.uk

59 Replies
Bruce Graham

Hi Adrian.

Just added this code to the story/index.html file.

Please do not ask me what it means, it my as well be another language to me, (which thinking about it is precisely what it is...)

Anyway...no, once they get to the prezzi, that's it, it's basically "How many people looked at the site?"

I cannot tell much more, however, I am about to try something completely foolhardy that may tell me something about one of the other documents that I have on the server, in a folder  

Watch this space.

Bruce

Daniel Ruelle

Thanks for the great information, everybody!  I've got Google Analytics to work by pasting the code into story.html as indicated above, but I'm curious if there is any way (or any other tools) to find out the total duration spent in the Storyline presentation.

Is there a way to embed some kind of code so when the user closes the window/tab, it will send a notification to Google Analytics indicating so?  Or perhaps another workaround to track the total amount of time spend in a presentation by a user?  

Thanks in advance for any ideas!

Daniel Ruelle

Wow, thanks Bruce for the amazingly quick reply!  This truly is a fantastic community of Heroes!

I went back into GA and refreshed and you are right: the avg. visit duration increased.  I suppose it takes a few minutes for Google to refresh these stats so I must have been checking too soon after visiting my test page.

This looks like a very powerful tool to gather statistics about engagement.  Combined with other aspects, like quizzing and possibly some other features which I have yet to discover, should provide a wealth of information for course designers.

Very exciting stuff!  Thanks again for the assistance, Bruce.   If you have any other tricks to share about measuring audience engagement, I'd love to hear them!

Bruce Graham

I think using SL in this way all depends on what you want from a "website", and how you use it.

I do not use my website as an "advert for me", I use it as an "advert of my capability".

Most of the time my pipeline flow for client/prospect contact is:

"Somewhere else on the Web > Heroes for validation > Website > Phonecall".

Because almost all of the work I do is under NDA, I thought it would be much more fun and interesting for visitors to learn about me (!), and about Storyline, thereby almost negating the need for a formal "Portfolio". By the time they reach me, we have got through most of the initial "dating and getting to know you" steps and can get on with discussing project needs and pricing. It always seemed the best way to maximise my time, trying to get as many of the "sales" steps done for me by existing Web-based mechanisms...

Unfortunately, having a SL website does not allow for a huge amount of GA activity at "lower levels". My webmaster and I have played around with other objects one level down in the webserver file structure, but the code does not seem to get recognised. We are still trying

I'm nor sure that there is a huge anount more I can do now unless I start adding "standard" web features such as contact forms.

Anyway....for now it suits me - you do need to wait a while to allow GA to catch-up with activity though.

Bruce

Allen O'Leary

Hi Phoebe

I cheated to start with, simply by linking a storyline's last link to an exclusive web page - so I can tell how many people finished the storyline.

There's no reason you couldn't extend this to multiple pages - an html page for each section and tracking the jumps that way. 

However I was going to try taking it one step forward and using GS's event tracking to tag multiple exits points using this method:

 <a href="next_page.html" onclick="_gaq.push(['_trackEvent', stroyline, 'click', 'section_2']);">

You can find more on events code with a quick search, it's pretty straight forward.

But this is as far as I can think how to do it without being a developer - SL will track internal events only and GA will track html link and page loads only, there's no bridge yet, though I would love something.

I suspect that's why articulate want you to buy the online hosted service, but that's overkill for most of us I suspect...

A

Chris McQueen

Looks like Storyline does have html templates down in the bowels of the Program Files area, but it's unclear how these could be (should be?) tweaked to include Google's Analytics tracking code.

Ideally, Articulate would allow for snippets of code to be included either in the Head section of a page or just before the closing body tag (to allow the page to load first, then load the JavaScript).

Google offers analytics tracking for web/iOS/Android, so it would make sense to just assume that customers will want to track interaction. Being able to enter our tracking ID as a project property or setting would be awesome. If we could then select the interactions we want to track/trigger as an event, it would be possible to tweak the Analytics dashboard to show the path and level of interaction we're getting with in a .Story.  So... I'm kind of new here, how do we put in a feature request?

Katie Bright

Does this method of inserting Google Analytics enable you to track how many times each slide within the Storyline presentation has been viewed/viewed by unique user or just how many people have 'opened' the course?

It would be really useful to track which slides are the ones which get looked at the most and how long people spend using the course in order to inform future course development.

Allen O'Leary

Inserting GA into the page code will only ever track the number of times the page is viewed - it will not tell you how many slides are used within the prez.

*Possibly* you could use the call javascript event on *each* button you needed to track to send an EVENT to GA

onclick="_gaq.push(['_trackEvent', stroyline, 'click', 'section_2']);"

Not tried it, but seems like the only way forward if you want page by page or action by action tracking in GA.

As above I cheat and use the last button in the prez to forward people to an html final page - so I can tell how many people started the prez and how many finished by tracking the prez and final 'success' page.

Chris Ammon

I just successfully added the Google Analytics javascript call as a timeline trigger and button trigger and both worked. My site uses the ga.js approach versus what I think is a newer code-base (analytics.js), so check which one you're using. In any case, Google explains it all pretty well: https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide

To add timeline triggers to track when a user finishes a course, add a timeline trigger that executes javascript and put this in the javascript window:  _gaq.push(['_trackEvent', 'ga-test-course', 'end', 'course-button']);

'ga-test-course' can be renamed to whatever you want. That term will show up in GA as the Event Category

'end' can be renamed and it is recorded as the Event Action in GA

'course-button' can be renamed and it is recored as the Event Label.

You could use that code on any triggers you want to track. I would use the Event Category to identify the course, and then use Action and Label to detail what event you are recording.  

After you publish--as explained above--put the GA tracking code inside the tags of story.html. I saw events show up in GA within minutes of testing.

Cheers.

Guy Greenbaum

As @chris says, there is a new 'Universal Analytics' implementation of Google Analytics.  GA now uses analytics.js instead of ga.js.  The good news is that it works reliably with any Storyline trigger.  The bad news is that usage is completely different.  Chris' example above now looks like this:

ga('send', 'event', 'ga-test-course', 'end', 'course-button');

There are more optional variables and once you get over the pain of moving over to Universal, it's actually simpler to use and has more functionality.  Not to mention, eventually everyone will have to move to Universal.

For those more technical, note there is no more 'utm' beacon.  Now GA uses 'collect' to which it appends all variables.  You can see all the new variables by digging into the asset header in the network panel using Firebug or similar developer tool.  Google's Analytics debugging plugin is also helpful.

Hope this helps.

Monique Donahue

I know this thread is a little dated now, but over the weekend I successfully used it as a jumping off point to figure out how to track individual pageviews and other events within my Storyline course, and I wanted to share my solution since my approach is slightly different from what has already been posted here. It is tedious but gives me a LOT of control over what is reported in GA.

As others above have posted, I plugged the javascript code provided by GA into my story.html file. This tracks the initial hit to the course, but not time in course, individual pageviews, and other actions that I wanted to track. To track these things, I added triggers as follows.

PAGEVIEWS:

I inserted a timeline trigger to execute javascript at the beginning of each slide, with the following code:

ga('send', 'pageview', '/PAGENAME');

For each slide, I changed PAGENAME to the name of the slide I want to track. This was tedious in a course with nearly 100 slides, but the benefit is that I will be able to easily see the average time spent on each slide, which slides have the most views, and which slide(s) people are dropping out of the course on.

I discovered that you can also create a virtual path for your pagename. For instance, you could include a path that has both the scene name and page name. So instead of a page named '/PAGE 1', I could name the page '/INTRODUCTION/PAGE 1' in the above javascript. I haven't decided yet how useful this will be, but it does give me some additional data for each scene within my course. I can see this in GA under Behavior > Site Content > Content Drilldown. Since I was already adding a unique page name to the javascript code on each slide, adding the path with scene name wasn't really any additional work.

OTHER EVENTS:

For other non-pageview events that I want to track, I used the following javascript code in button and hotspot triggers:

ga('send', 'event', 'CATEGORY', 'ACTION',  {'nonInteraction': 1});

Replace CATEGORY with a category of events that you want to track, such 'Downloads' or 'Links'.

Replace ACTION with the next level that you want to drill down to, such as name of the downloaded document or linked website.

The {nonInteraction': 1} bit specifically prevents this event from being calculated in the bounce rate, since this is not a pageview.

You can view event information in GA under Behavior > Events. This lets me track how many people are downloading linked documents or clicking on external website links that I have included in the course.

Note: You can also add a 'LABEL' field to this javascript for even more granular event reporting, but I didn't feel this was necessary for my purposes.

Just wanted to document this info in case it's useful for anyone else who stumbles across this thread.

Becky Lucas

Monique - I stumbled and found your post.  Thank you so much. This is exactly what my client wants to do with a storyline we are going to embed into their website.  Since I'm not a techy or coder - I think I'm going to need to source some help. Can you tell me what type of skill sets I need to source? I assume someone who knows javascript would be useful, for exaple.

Monique Donahue

Hi Becky,

I am not a coder and I handled adding the javascript myself to my current courses. However, I am pretty "techie," so it was fairly easy for me to figure out what I needed from the javascript snippets and where to place them. I don't think you necessarily need someone who knows javascript specifically to accomplish this, but it certainly wouldn't hurt. I think anyone who is technology savvy, familiar with Storyline, and not afraid to make a direct edit to an HTML file could handle this.

Laura Sund Martin

hi all, really basic question that I don't see the answer to:

HOW do I open the story.html file in order to add my GA code?  If I right click on it, I don't have an "open with" option.  I tried opening Notepad first but Notepad then wouldn't let me open an html file.  And I've tried a few other things.  Thanks!