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' ; 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 "; 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 : .jpg

Did i miss something ?

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.; 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." 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://i.sstatic/RVv59.jpg

Did i miss something ?

• javascript
• google-chrome-extension
• google-analytics
• manifest.json

• Are you trying to use GA in service_worker or content_script? – Kenny Lim Commented Feb 5, 2022 at 0:50
• i'm on manifest v3 so it's a service_worker, manifest v3 doesn't allow content_script – Gauthier Tassin Commented Feb 6, 2022 at 15:56
• 1 MV3 doesn't allow background script but it supports content_script. – Kenny Lim Commented Feb 8, 2022 at 2:17
• true, sorry i was confused between background_script and content_script. I have to use service_worker because my extension does not interract with the web page and it should work when chrome is in background. – Gauthier Tassin Commented Feb 13, 2022 at 15:25
• Btw, the screenshot mentioned are for the Chrome web store only, meaning, it tracks how many times the extension is installed/uninstalled and what OSs and countries the users are from, but, that's it. It doesn't track events in the extension itself or in any other background/content-scripts, so, this field is for your extension's Chrome web store only. – user7607751 Commented Apr 5, 2022 at 2:44

2 Answers 2

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./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)

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

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

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./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. https://example. ;style-src 'self' 'unsafe-inline' http://www.google-analytics. https://example.; 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.