An Updated Way to Add Google Analytics To All Your Apps

Index

Stats

1,890 visits, 3,692 views

Translations

This tutorial hasn't been translated.

Tools

So this is a combination of things from Add Google Analytics to Your Apps and this forum post about Google Analytics. The exact method outlined in the first link no longer works, so I'm combining the two, plus some extra tips, into this tutorial. So thank you to droland3 and mbe whose shoulders I am standing on. I should also say that there's a Google Analytics Plugin that might be the perfect fit for you, but it wasn't for me.

I'm going to assume you know what you're doing with GA, since I made the code to allow you to make whatever calls are necessary all within Construct 2. If you aren't very familiar, hit up their docs.

Outside of Construct

Get Your GA Tracking Code

First step is to obviously have Google Analytics setup and get your tracking code.

    <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');

        ga('create', 'UA-XXXXXXXX-X', 'auto');
        ga('send', 'pageview');
    </script>


The only thing we actually need from from that is the account id, which is the UA-XXXXXXXX-X portion in there. Make sure you have that handy, you'll need it later.

Add the Code to Your Export Templates

Now we want to add the code to the render templates so when you export or preview everything will automatically be there. So fire up your favorite code editor and navigate to the Construct 2 install folder and open the exporters/html5/templates folder containing a bunch of html files most of which start with export and preview

We're going to be adding the code to inject the GA scripting into all of those files. Don't worry, it's just a bunch of copy/paste. But before we can do that we have to edit the code slightly, otherwise it will crash our games.

Here's the new code, which is a slightly tweaked version from the linked forum topic:

    <script>
    var google = (function(){    
        (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','__gaTracker');
        
        function track(){
            console.log('track', arguments);
            __gaTracker.apply(null, arguments);
        }
        
        return {
            analytics: track
        }
    })();
    </script>



I'll save you the gory little JS details, but hit up the other links at the top if you're interested.

So copy that and paste it into every file that starts with export in that folder right before the closing body tag.

Tweak for Preview

We don't want Google Tracking all of our previews, but we want to make sure it is going to work, so we're going to make a slight adjustment for all of the files that start with preview.

In the same code as above comment out the following line within the track function:

    //__gaTracker.apply(null, arguments);

Now when we call google.analytics within Construct we'll get the console logs without actually tracking.

  • 2 Comments

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