I'm attempting to add google analytics events tracking in a chrome extensions, and it doesn't seem to be sending the events to the server properly. I'm sending a message message from the content script to the background script to let it know to track an event, and using _gaq.push() to attempt to send the event to the server. I'll include what I've got here and would appreciate some help as I can find what's wrong/missing

This is my manifest file, i've added google analytics to the content_security_policy

{
    "name": "XXXXXX",
    "short_name": "XXXXXX",
    "version": "0.4.2",
    "description": "XXXXXX",
    "icons": { "128": "icon_128.png", "48": "icon_48.png" },
    "permissions": ["storage"],
    "content_security_policy" : "script-src 'self' ; object-src 'self'",
    "content_scripts": [
        {
            "matches": [
                "XXXXXX",
                "XXXXXX"
            ],
            "js": ["jquery.js","jquery.ba-hashchange.min.js","contentscript.js"],
            "run_at": "document_end"
        }
    ],
    "background" : {
        "scripts" : ["background.js"],
        "persistent" : false
    },
    "manifest_version": 2
}

Here's the call in my content script to let the background script know to track an event with google analytics

//send message to background.js for analytics event tracking
chrome.runtime.sendMessage({
      action : 'analytics_add_item',
      item_name : item.name,
      item_stat : item.stat,
      item_number : itemNumber
}, function(response) {
       //
});

Here's my background script, listening for the message and responding by tracking the event (well, its supposed to anyways)

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {

        //track event - create
        if(request.action == "analytics_add_item"){
            _gaq.push(['_trackEvent',
                request.action,
                request.item_name.toLowerCase(),
                request.item_stat,
                request.item_number
            ]);
        }

});

I'm attempting to add google analytics events tracking in a chrome extensions, and it doesn't seem to be sending the events to the server properly. I'm sending a message message from the content script to the background script to let it know to track an event, and using _gaq.push() to attempt to send the event to the server. I'll include what I've got here and would appreciate some help as I can find what's wrong/missing

This is my manifest file, i've added google analytics to the content_security_policy

{
    "name": "XXXXXX",
    "short_name": "XXXXXX",
    "version": "0.4.2",
    "description": "XXXXXX",
    "icons": { "128": "icon_128.png", "48": "icon_48.png" },
    "permissions": ["storage"],
    "content_security_policy" : "script-src 'self' https://ssl.google-analytics.; object-src 'self'",
    "content_scripts": [
        {
            "matches": [
                "XXXXXX",
                "XXXXXX"
            ],
            "js": ["jquery.js","jquery.ba-hashchange.min.js","contentscript.js"],
            "run_at": "document_end"
        }
    ],
    "background" : {
        "scripts" : ["background.js"],
        "persistent" : false
    },
    "manifest_version": 2
}

Here's the call in my content script to let the background script know to track an event with google analytics

//send message to background.js for analytics event tracking
chrome.runtime.sendMessage({
      action : 'analytics_add_item',
      item_name : item.name,
      item_stat : item.stat,
      item_number : itemNumber
}, function(response) {
       //
});

Here's my background script, listening for the message and responding by tracking the event (well, its supposed to anyways)

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {

        //track event - create
        if(request.action == "analytics_add_item"){
            _gaq.push(['_trackEvent',
                request.action,
                request.item_name.toLowerCase(),
                request.item_stat,
                request.item_number
            ]);
        }

});

• javascript
• google-chrome-extension
• google-analytics

• You don't actually include the analytics code into your background page. Obviously, it won't work. – Xan Commented Dec 22, 2014 at 13:29
• 1 that's not obvious to someone who hasn't done this before. it is obvious, however, that if I'd known that I wouldn't have asked this question. could you please provide an example of how to do that? I've tried add ""google-analytics." to permissions in the manifest and "google-analytics./analytics.js" to backgrounds.scripts of the manifest but get an error "Could not load background script 'google-analytics./analytics.js'." – ejfrancis Commented Dec 23, 2014 at 2:22

2 Answers 2

GA works well in background page in my ext: https://github./WellDoneCode/perfectpixel/blob/develop/Extension/background.js

Have you added GA script to your background page?

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = 'https://ssl.google-analytics./ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

Btw you can use 'https://ssl.google-analytics./u/ga_debug.js' as src instead to see debug information in console.

This should be the right answer. I came across a reliable way to perform the task and I believe it is a sample from Google itself with their remended way(read the ments in the code snippet). Link to sample extension which tracks data using Google Analytics. https://developer.chrome./extensions/examples/tutorials/analytics.zip

The code snippet for reference:

// Copyright (c) 2012 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

  /**
   * Add your Analytics tracking ID here.
   */
  var _AnalyticsCode = 'UA-XXXXXX-X';

  /**
   * Below is a modified version of the Google Analytics asynchronous tracking
   * code snippet.  It has been modified to pull the HTTPS version of ga.js
   * instead of the default HTTP version.  It is remended that you use this
   * snippet instead of the standard tracking snippet provided when setting up
   * a Google Analytics account.
   */
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', _AnalyticsCode]);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = 'https://ssl.google-analytics./ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
  })();

/**
 * Track a click on a button using the asynchronous tracking API.
 *
 * See http://code.google./apis/analytics/docs/tracking/asyncTracking.html
 * for information on how to use the asynchronous tracking API.
 */
function trackButtonClick(e) {
  _gaq.push(['_trackEvent', e.target.id, 'clicked']);
}

/**
 * Now set up your event handlers for the popup's `button` elements once the
 * popup's DOM has loaded.
 */
document.addEventListener('DOMContentLoaded', function () {
  var buttons = document.querySelectorAll('button');
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', trackButtonClick);
  }
});

Also as Alex pointed out, to enable debug logging of the analytics data being sent out use the https://ssl.google-analytics./u/ga_debug.js while development instead of https://ssl.google-analytics./ga.js.