An Updated Way to Add Google Analytics To All Your Apps

2
  • aronduby's avatar
    aronduby
    published on 30 Oct, 2015 at 05:52
    17 favourites

Index

Tagged

Stats

4,224 visits, 6,957 views

Tools

Share

Translations

This tutorial hasn't been translated.

Create a translation

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Back in Construct

GoogleAnalytics Event Sheet

Now that all of that is setup, open up your game in Construct 2 and add a Browser object if you don't already have it. That's the object we'll be using to act as a bridge between what we just setup in the html and our game's code.

I decided to make a separate event sheet to hold all of my GA related things, and just include that into other sheets as needed. So in the Project Panel, right click on the Event sheets folder and choose Add event sheet and call it GoogleAnalytics.

Within our GoogleAnalytics event sheet right click and choose "Add global variable". In the dialog give it a name of GAACCOUNTID, set its type to String, the initial value to your account id from before, and then check the box for Constant. Now we have a variable that we can't change set to our account id.

Now add a new event and choose System -> On loader layout complete. Within that event add a new action and choose Browser -> Execute javascript and enter the following code into the Javascript input:

    "google.analytics('create', '" & GAACCOUNTID & "', 'auto');"

This tells Construct, once we are loaded, call the code we created earlier with the following arguments. In this instance we are passing the string create, our account id saved in the global variable, and the string auto. The use of double and single quotes here is really important since Construct will treat this as a single javascript string at run-time.

That specific line of code tells GA which account to associate these calls with, and now our analytics are ready to go. Anytime we want to track something we just add another Browser -> Execute javascript action and call our google.analytics function with whatever parameters you would normally pass within a regular javascript call to the ga function.

But do read on as there were was a big caveat.

Tracking Layouts

My use case, and probably a pretty common use case, was tracking the start of the layouts. You would think that this would be a pretty easy thing, send your call to create on a loader layout complete event and then for every layout start send an event. Unfortunately, it's not quite as easy as that.

In all of my testing it appears that the On start of layout event will actually fire in our included event sheet before the On loader layout complete, which means that our call to track the layout happens before the call to associate with our account. So let's look at getting around that.

On Start of Layout

First, create a new global variable called GACreated as a number with a default value of 0. We're going to use to track if we've made the call to create first. Now add a new action to our existing System -> On loader layout complete event and choose System -> Set value and set our GACreated variable to 1, signifying that it's been created. Now add another action and choose System -> Signal and give it a tag of "GACreated" (quotation marks included). More on that in a little bit.

Now let's add the System -> On start of layout event. But instead of adding actions directly to that add a sub event and choose System -> Compare variable. In the resulting dialog choose GACreated as the variable, = Equal to as the comparison, and 1 (no quotations) as the value.

Within that sub-event add a Browser -> Execute javascript action to call our analytics code. What you put in here will vary depending on if you are tracking using events or page views, below is an example of both, copy/paste (and tweak as necessary) only the line you need:

     <script>
    // page view tracked as game/layout_name
    "google.analytics('send', 'pageview', 'game/" & LayoutName & "');"
    // event tracking
    "google.analytics('send', 'event', 'event category', '" & LayoutName & "');"
    </script>

Again note, the single and double quotations are very important.

So that takes care of subsequent layout starts when our create has already been called but we're missing out on the initial call since this event happens before GACreated = 1. This is where the Signal comes in.

Else

We need to tell Construct that if our create call hasn't happened yet, to wait until it is and then call our analytics function. The first step in that is to use an Else sub-event. The Else sub-event says if the condition in the event above isn't true take these actions instead. So let's set that up.

Right click on our System -> On start of layout event and choose Add sub-event, then choose System -> Else. This will add the event under our GACreated = 1 sub-event/condition. If for some reason it didn't, add it below that event. The order for Else events are very important, because otherwise it will be adding the check to the incorrect condition.

Within our Else sub-event add a new action and choose System -> Wait for Signal and then in the dialog add "GACreated" for the tag, again don't forget the quotation marks. Below that action, copy and paste the same action you created above with the GACreated=1 event.

Now everything will work properly. "But why?" you ask, "and what is this signal foolery you keep mentioning?". Yes, let's finally talk about that.

Signals

Within Construct there's 2 actions which let you hold off on performing all of the actions below it (within their specific event) while continuing on with everything else - Wait and Wait for Signal. Wait is time based, setting a delay for a specified number of seconds. Wait for Signal waits for you to tell it to continue by creating a Signal action with the corresponding tag. If you're familiar with Javscript, think of Wait as setTimeout and Wait for Signal as an Event Queue, or an Event Listener that runs once and then removes itself.

So what we did in our Else section above was tell Construct to create a queue for the GACreated signal (or Event in Javascript language) and add our analytics call to it. Our call will just kind of hang out while everything else keeps running. Then when the System -> On layout loader completed event runs it will fire our Signal action which will then finally call our javascript execution action.

You can check out the How to Use the System 'Wait' Actions' for more information if you're interested in learning more about using them.

Finally!

Here's what your action sheet should look like once everything is said and done. You'll notice that I've chosen to use events over page views, I created an additional global variable to hold the event category, and that I'm passing an additional PlayerName variable for the label. That's how I decided I wanted to use the data within GA, do whatever works for your situation.

Tracking In Game Events

Tracking in game events are much easier than the layouts due to the ordering issues above (as long as your event doesn't happen at the start of a layout). Simply add an action to whatever event you want to track and choose Browser -> Execute javascript and add the following code (with your proper modifications)

    "google.analytics('send', 'event', 'EVENT CATEGORY', 'EVENT ACTION', 'EVENT LABEL', 'EVENT VALUE');"

Here's a quick example where I track when a user sets their new high score.

That's All Folks

I hope this was useful, as a beginner these tutorials and forums have been insanely helpful, and this issue surprisingly trick for me. Hopefully this helps someone else out. If you have any questions just hit up the comments. That's all folks, go out and track to your hearts content!

  • 2 Comments

  • Order by
Want to leave a comment? Login or Register an account!