Getting to know your users and measuring user behavior is an important step in App Development. Unfortunately, it’s take a bit of non-standard work to get Google Analytics to work after wrapping your mobile app with Cordova. Setting up Google Analytics in a pure web application is quite easy, but Cordova somehow prevents pageviews and events from being sent to Google Analytics.
Follow this guide to implement Google Analytics into your Cordova App.
- Make sure all your routes have a name and path parameter specified. Otherwise, they cannot be posted to the
ga.logPagefunction. Please refer to the router docs for more info on routing.
- Have Basic knowledge of Google Analytics
Before we can start implementing Google Analytics into your application, you’ll need an account for Google Analytics and Google Tagmanager. So let’s do that first. When you have these accounts, it’s time to configure Tag manager. Follow the steps in this Multiminds article to do so.
For this guide, we’ll assume you have a fixed sessionId that you send to Google Analytics. Google Analytics uses a sessionId to distinquish different users from each other. If you want to create an anonymous sessionId, see Analytics Documentation on user id.
Place the Tag Manager snippet into head of your
index.html file (if you’ve followed the Multiminds article, you already have this.) Create a new file in your codebase called
analytics.js with the following contents:
To make sure all the pages in your application are automatically posted towards Google Analytics, import the newly created
analytics.js file into
main.js and add the following in
If you are not using Vue-router, you can log clicks manualy by calling the logPage function at any place you like.
Let’s add some event logging into a component, by calling the
logEvent function with the correct parameters. Import the
analytics.js in your component as
More information about events can be found in the Analytics documentation on events.
Now, when you build your application with Cordova and test it out on the emulator.
You’ll see the events and pageviews coming in. It usually takes around 5 to 10 seconds for a pageview to be registered in the realtime view.