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.
"google.analytics('create', '" & GAACCOUNTID & "', 'auto');"
But do read on as there were was a big caveat.
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.
// page view tracked as game/layout_name
"google.analytics('send', 'pageview', 'game/" & LayoutName & "');"
// event tracking
"google.analytics('send', 'event', 'event category', '" & LayoutName & "');"
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.
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.
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.
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.
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.
Open full size image
Tracking In Game Events
"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.
Open full size image
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!
Unlock your full gamedev potential
Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!
Plus, it's got a lot of additional features that will help you save time and make more impressive games!