Add Google Analytics to your apps

1
  • 29 favourites

Stats

2,448 visits, 3,535 views

Tools

Translations

This tutorial hasn't been translated.

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.

While all of this information is available through the other tutorials and forum comments I wasn't able to find a single document putting it all together the way I needed it.

I used the "Editing your Export.html templates" scirra.com/tutorials/299/how-to-edit-your-index-page-export-game-page to figure out how to do this. This method works great if you have only 1 app but I have multiple apps and don't want to change the export files each time I want to export a different app. I'm able to change back and forth between apps and export each of them without leaving the Construct 2 environment provided you setup a unique account or property for each app inside of GA.

1.

copy your tracking code from your Google Analytics account which is generated by GA for your app/site. It should look like this:

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXX-X', 'yourdomainname.com');

ga('send', 'pageview');

2.

Copy and past the top part of this script into all of your export-XXX.html files located in your Construct 2 program directory and encapsulate it inside your <script> </script> tags.

Should look like this in each of your export files:

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

</script>

This is the generic GA function that works for all of your apps.

3.

Inside of your event sheet for your Title Page (or any page) add an event: System->On Load Complete or System->On Start of Layout. If you "need" tracking for every single pageview you could put this on specific layouts or specific levels, just keep in mind you are adding additional traffic and processing to your app.

4.

Add an Action to your new event: Browser->Execute javascript. Now paste the second part of your GA javascript into the window. It should look like this:

"ga('create', 'UA-XXXXXXXX-X', 'auto');

ga('send', 'pageview');"

with the quotes. This is where you should have your unique UA-X number for each one of your distinct apps.

That's it. I've tested this on HTML5 exports and phonegap and it works. I have not tested on iOS yet because I'm brand new to this and don't have an iphone to test with yet. If I find any problems I'll update this tutorial.

If anybody has anything to contribute please let me know and I'm happy to update this or take it down if somebody has a better method.

Update: CocoonJS is not working, hopefully I'll have a fix for that soon.

  • 0 Comments

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