ejfrancis ejfrancis - 5 months ago 37
Javascript Question

Analytics Events Tracking for a Chrome Extension

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.com; 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
]);
}

});

Answer

GA works well in background page in my ext: https://github.com/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.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

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