9
17 Comments

How to add Google Analytics with Manifest V3?

Hey folks!

Does anyone have a good place where I can see how to implement Google Analytics in my chrome extension with the new manifest v3?

I tried every possible way I can think of and now I am running out of ideas. :P

Or maybe any other free service to track usage? I just need to know when a button was clicked in my popup.html. 😜

Thanks!

  1. 5

    Not an exact answer but switch over to product focused analytics like mixpanel or amplitude. GA isn't really cut out for extensions.

    1. 3

      @shash7 You saved my day! I signed up for Mixpanel.

      I added the first code to track an event that is found here:
      https://developer.mixpanel.com/reference/events

      And it works perfectly!

      Thanks!!!

      1. 2

        Mixpanel quota is low :( I've decided to remove analytics when I migrate. But the chrome APIs are not ready to migrate yet anyway so I'll re-evaluate in about a year.

        1. 1

          To be honest, I just saw the "free" and I didn't read the rest. 😜
          If I reach the quota, I will be more than happy!

      2. 1

        Were you running into security issue also? I am also running into issues and considered Mixpanel. I built my extension with React but wondering which Mixpanel implementation you used?

    2. 2

      Your recommendation because a hugeee deal for me! Thank you very much! Mixpanel is amazing!

    3. 1

      I honestly didn't even think about those options. I'll definitely take a look. Thank you!

  2. 1

    I maybe year or two late here but Google finally shared an official approach to integrate with GA4. Here's an official GA sample -

    https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/tutorial.google-analytics

  3. 4

    I ran into this same issue building my extension (Hijinx) with manifest v3. Google Analytics (analytics.js) requires access to the "window" object (which is only available in a content script or popup), but manifest V3 doesn't allow connecting to the outside world except in a Service Worker.

    I did eventually find a solution: using the Measurement Protocol of Google Analytics

    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:

    1. The user clicks a button in the extension
    2. The content script/popup.html sends a message to the service worker (background.js) using Message Passing saying the event should be recorded.
    3. 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, params)
    
    

    It was definitely an hours-long journey arriving at this solution, so I hope it helps others and saves people some time!

    1. 1

      Totally works. However, you need to create universal analytics property which is valid till 1 July 2023 according to this link https://support.google.com/analytics/answer/10269537?hl=en. Also 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.

    2. 1

      I've received the question a few times about where to get the ClientID (cid). In the normal use of Google Analytics, the ClientID is generated for you. With the Measurement Protocol, you need to provide it. There is nothing particularly special about it - it just needs to be unique for each user, and stay consistent.

      In my extension I generate a unique id for each user of the extension and store it in local storage to persist it over time. I send this id as the ClientID to Google Analytics whenever that user does something in the extension.

      To see metrics for a particular Client ID within Google Analytics go to Audience -> User Explorer.

      User Explorerer

      Here is some more info from the Measure Protocol docs that may help:
      https://developers.google.com/analytics/devguides/collection/protocol/v1/parameters#cid

    3. 1

      This comment was deleted 2 years ago.

  4. 2

    I wrote a whole article on Medium after reading about the recommendation for Mixpanel here. You're welcome to check it out:
    https://medium.com/p/e8f6854eacdd

  5. 2

    Were you able to figure this out? The official page now says "This page was migrated directly from the MV2 documentation set. It has not yet been validated for compliance with Manifest V3." and the described way doesn't work.

  6. 2

    AFAIK, it didn't change from v2. The tutorials are here: https://developer.chrome.com/docs/extensions/mv3/tut_analytics/ and https://stackoverflow.com/questions/48560583/add-google-analytics-to-a-chrome-extension

    You will not be able to send an event to GA directly from the popup, so you will need to send an event to the worker first and that can log to GA

    1. 2

      I don't think it is the same. With Manifest V3, you cannot add reference to external code from the extension.

    2. 1

      Thanks, @Soft_Re. I tried that but I'm probably missing something. Anyway, I will try again.

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 47 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 27 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments How I Launched FrontendEase 13 comments