Using Google Analytics in Extensions

Reviews for Extensions, organizations, games, and chatbot verification are temporarily paused while we revise our processes. We are working to resume reviews as quickly as possible and will share updates with you shortly. Thank you for your patience and understanding.

Introduction

This guide explains the high-level steps needed to enable Google Analytics to track events from within your Extension.

This guide does not cover Safari on Mac and the Twitch iOS app.

Configuring your Extension to Use Google Analytics

Set up your Google Analytics account.
Track events by adding analytics.js for events in your extension. The sample code below explains where to load the analytics.js file. Since Twitch extensions do not allow inline Javascript, you will need to load and configure the analytics.js library from within a bundled Javascript file.
Use event measurement to track events on each page of your extension

Some examples of events are loading of a page, clicking on a link or a button, and expanding or closing a section.

Google Analytics collects user IP data by default. Since this is considered personal data under GDPR (General Data Protection Regulation), we strongly recommend that developers anonymize the user’s IP address in their applications. The sample below demonstrates how to implement this.

Sample Code

To illustrate the steps in this guide, we have used a panel extension with the following directory structure:

GA Extension/
|
|__js/
| |__mobile.js
| |__viewer.js
| |
|__css/
| |__style.css
|
|__panel.html
|__overlay.html
|__component.html

Next Steps

First, add analytics.js to your viewer.js file:

(​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'​,​'https://www.google-analytics.com/analytics.js'​,​'ga'​);
ga(​'create'​, ​'UA-123456-1'​, {
    cookieFlags: 'max-age=7200;secure;samesite=none'
}​);
ga(​'set'​, ​'anonymizeIp'​, ​true​);

Second, send a page-load event to Google Analytics via JavaScript:

$(document).ready(function() {
    //Send page load event to GA
    ga('send', 'event', 'Load', 'Load_'+$("#pageViewHeader").text(), 'PageLoaded');
  });

Third, send the event to Google Analytics via JavaScript:

$(document).ready(function() {
    //Send button click event to GA
    $("button").click(function() {
       $(this).find("span").text("I was CLICKED");
ga('send', 'event', 'Click', 'Click_'+$(this).attr("id"), 'ButtonClickDetail');

    });
  });

The code snippet above sends two events to Google Analytics. The first event is tied to the loading of a page; it sends the text of the element with the ID pageViewHeader. The second event fires when a button is clicked; it sends the ID of the button element.

Fourth, attach JavaScript to your panel HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, shrink-to-fit=no">
    <script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
    <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="js/viewer.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>Viewer</title>
</head>

<body>
    <div  id="pageViewHeader">Hello world!</div>
    <div></div>
    <div>
        <button id="redButton" class="button button3"><span>Red Button</span></button>
    </div>
    <div></div>
    <div>
        <button id="greenButton" class="button"><span>Green Button</span></button>
    </div>
</body>
</html>

Using Google Analytics in Extensions

Introduction

Configuring your Extension to Use Google Analytics

Note on GDPR

Sample Code

Next Steps