Get a precise idea of your mobile user connectivity with Google Analytics
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
dev
test
.gitignore
README.md
gruntfile.js
package-lock.json
package.json

README.md

Ga-mobile-connection-type

Instead of reading this documentation have a look at the video : https://www.youtube.com/watch?v=IoNX4Wu0PPc

Send to Google Analytics how many Android Chrome mobile users use your website in WIFI / 4G / 3G Fast / 3G SLOW / 2G.

Send to GA the Time to first byte / Time to fist paint / Loadtime of the first landing other page views (with cache) will be ignored.

This code uses the netinfo API ( only available in Android + Chrome >= 59 ), so this will not track all your mobile sessions but you can extrapolate those numbers to have a good idea of the connectivity used across your website.

Mobile emulation with chrome dev tool will not fire the code only available in Android + Chrome >= 59 For debugging purposes please use the remote USB debugger.

How this works ?

  • When the mobile user loads the landing page we check if we can detect his connection type.
  • If we have his connection type we send to GA an event
  • We save the loading Time to first byte / Time to fist paint / Loadtime by sending it to GA via the User timing API
  • We put a cookie on the user's browser so we don't send the loading time for the next pages ( with browser caching )

What's 3G / 4G ... ?

I grouped the "similar connections' as follow :

3G Slow

Onsite Setup

Copy paste the content of the build/GaMobileConnectionType.min.js just after the ga('send','pageview') function

<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-45800571-1', 'auto');
	ga('send', 'pageview');

	// Paste the content of build/GaMobileConnectionType.min.js here    
</script>

Google Analytics Setup

Add a new Goal ( event tracking )

  • Go to Admin -> View -> Goal
  • Create a new custom goal.
  • Give a name to your custom goal
  • Select event
  • Only add the category connectivity

add goal demo

Create custom segments

Wifi

wifi segment

4G

4G segment

Do the same with other connection types ( 2G / 3G / H + ) ( check the table for all the labels' names)

Analyze your data

Use the custom segement to filter your data.

Here I can see the split of my users based on the location and connectivity

split

FAQ

Can I use this with Google Tag manager ?

Take a look a this video and how to setup the tag with GTM : https://youtu.be/IoNX4Wu0PPc?t=2m34s

Setup in GTM these DataLayer variables :

gacEventCategory

gacEventAction

gacEventLabel

Add a trigger :

With a trigger type of customEvent set the eventName as connectivityDetected

Add two tags :

New tag -> tag configuration -> universal analytics

Set track type as event and put as category the variables previously created in the data layer :

gtm

NB: Put non-interaction event as true

As a trigger select the trigger connectivityDetected that we created.

Add a second tag

Add a custom HTML tag and copy / paste the content of this file : https://github.com/Antoinebr/Ga-mobile-connection-type/blob/master/build/GaMobileConnectionType.gtm.min.js

Put all pages as a trigger.

As you fire an custom event, will this impact my bounce rate ?

No ! Because we fire a 'non-interaction event' more info here

Can I load the script in Async ?

Yes !

Dev

If you are a simple user you can't stop reading here.

To setup a dev environement

npm install

To build

grunt watch

To run the tests

npm test