Add google analytics into a chrome extension using manifest v3

user_12040427 0
Viewed 1040

Is it possible to add google analytics into a chrome extension using manifest v3 ? How can i do that ?

I found this post from stackoverflow : Add Google Analytics to a Chrome Extension so i tried the code into the accepted answer, with

"content_security_policy": {
   "extension_pages": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'"
}

into my manifest.json, but when i load my extension i got this error : 'content_security_policy.extension_pages': Insecure CSP value "https://ssl.google-analytics.com" in directive 'script-src'.

I feel like it's not possible to use google analytics with chrome extension right now, but it's weird because into the chrome web store dashboard, we can see this field : https://imgur.com/a/PBHGOvu

Did i miss something ?

manifest.json google-chrome-extension google-analytics
2 Answers

I used this way to add google analytics to override.html(chrome_url_overrides) or popup.html in manifest V3:

override.html:

<head>

  // 1- Download from 'https://ssl.google-analytics.com/ga.js' and use locally
  <script src="./ga.js"></script>

  // 2- Instead of use 'content_security_policy' property in 'manifest.json' add this:
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-eval' http://www.google-analytics.com https://example.com ;style-src 'self' 'unsafe-inline' http://www.google-analytics.com https://example.com; media-src *;img-src *">
  // or
  <meta http-equiv="Content-Security-Policy" content="default-src *;img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;style-src  'self' 'unsafe-inline' *">

</head>

3- Create analytics-override.js:

var _gaq = _gaq || [];
_gaq.push(["_setAccount", "UA-01234567-89"]);
_gaq.push(["_trackPageview", "/override.html"]);

4- In override.js:

window.onload = function(){    
    const scriptTag = document.createElement("script");
    scriptTag.src = chrome.runtime.getURL("./analytics-override.js");
    scriptTag.type = "text/javascript";
    document.head.appendChild(scriptTag);
}

I hope it helps you.

user_65827760

For using google analytics with mv3 the easiest way is to use measurement protocol. In short, it allows you to send event tracking to Google Analytics through a normal POST call.

Here's the setup I used to track a click / other events:

The user clicks a button in the extension The content script/popup.html sends a message to the service worker (background.js) using Message Passing saying the event should be recorded. The service worker posts the event to Google Analytics using fetch() And here's some sample code that runs in the service worker:

const ANALYTICS_PATH = "https://www.google-analytics.com/collect";

async function postData(url = '', data = {}) {

  // Default options are marked with *
  const response = await fetch(url, {
    method: 'POST',
    mode: 'no-cors',
    cache: 'no-cache',
    credentials: 'same-origin',
    headers: {
       'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow',
    referrerPolicy: 'no-referrer',
    body: data
  });

}

var gaParams = new URLSearchParams();
gaParams.append("v", 1);
gaParams.append("tid", "UA-XXXX-X");
gaParams.append("cid", xxxxx);
gaParams.append("t", "event");
gaParams.append("ec", "myEventCategory");
gaParams.append("ea", "myEventAction");

postData(ANALYTICS_PATH, gaParams)

The only limitation to this approach is it uses universal analytics property which will stop working on 1st July 2023 according to google.

Note:- This api does not give response codes if something is wrong, instead of using https://www.google-analytics.com/collect directly on prod, one should first try https://www.google-analytics.com/debug/collect.

PS. I found this solution from a comment on this source:- https://www.indiehackers.com/post/how-to-add-google-analytics-with-manifest-v3-468f1750dc

user_87193810
Related