Google Analytics events

DocsHow to › Google Analytics events

Last updated: 26 Jun 2018 / 1:06 PM / GMT

This guide will show you how to set up tracking for your paywall using Google Analtyics Events and our paywall Action Functions. The reason why you would want to use this is to make sure you know exactly where the most valuable traffic came in from so you can spend your money and efforts on the right things.

How to track events with Google Analytics

By sending in events to your Google Analytics account, these will become available in you GA dashboard. You can find them under Behavior › Events. Once available there you can set up you funnel with goals to track exactly what’s going on on your site and what traffic converts best through your paywall. You can name your events whatever you like. The structure looks like this:

ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

Adding Google Analytics events to your code

Here’s an example of what your code would look like with the InPlayer paywall inject combined with Google Event tracking. To see the basics and what functions are available, please read through the documentation for the paywall Action Functions.

Step 1. Add your Gtag to the head

This first thing you need to do is make sure you add your Google Analytics code (gtag.js) in the <head> part of your site. (If you copy paste this, make sure you update it with your own Google UA id.)

<!DOCTYPE html>
<html lang=”en”>
<head>

<script type=’text/javascript’ src=’https://assets.inplayer.com/injector/staging/injector.js’></script>
<link rel=’stylesheet’ href=’https://assets.inplayer.com/injector/staging/css/app.min.css’ type=’text/css’ media=’all’>

 

<!– Global site tag (gtag.js) – Google Analytics –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=UA-55616959-1″></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());

gtag(‘config’, ‘UA-55555555-1’);
</script>

</head>

Step 2. Add your events to the inplayer.inject

You can send in any events you like into your Google Analytics data, but some things might be more relevant to track than others. You can see all the events you can track in our Action Functions overview page. Our example below will show you how to add events for when someone clicks the buy now button and once a successful payment goes through. In our example we’ve added a value of 20 USD to the purchase, but you should change this to the value of your sales.

<body>

<div id="inplayer-00000"></div>
<script type="text/javascript"> 

inplayer.inject("00000", "00000000-0000-0000-0000-000000000000"

onInit: function(e){
document.getElementsByTagName(‘body’)[0].addEventListener(‘click’, function(e){
if (e.target.className.indexOf(‘inplayer-paywall-‘) >= 0){

// GOOGLE ANALYTICS EVENT STRUCTURE: ga(‘send’, ‘event’, [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);
ga(‘send’, ‘event’, ‘Paywall’, ‘click’, ‘Buy button’);

}
});
}
onPayment: function(e){

// GA EVENT
ga(‘send’, ‘event’, ‘Paywall’, ‘purchase’, ‘Successful purchase’, ‘20.00’);

}

);

</script>

</body>

We use cookies to analyse our traffic. We also share information about your use of our site with our analytics partners. See details