Exploring GA4 Measurement Protocol Integration for Chrome Extensions

Google Analytics 4

Exploring GA4 Measurement Protocol Integration for Chrome Extensions

Posted by Lucas on 8 June 2022 at 4:08 am
Hey all, I’m trying to figure something out and could do with a little help. I’m attempting to add GA4 analytics to a Chrome Extension through the Measurement Protocol (gtag).

I’ve been using this StackOverflow post as a guide, but it only covers Universal Analytics and not GA4, which uses a different protocol. Bit of a headache.

The exact code from the google instructions has been popped into the service worker, which seemed to check out in the Event Builder.
```
const measurement_id = G-XXXXXXXXXX;
const api_secret = <secret_value>;

fetch(https://www.google-analytics.com/mp/collect?measurement_id=${measurement_id}&api_secret=${api_secret}, {
  method: "POST",
  body: JSON.stringify({
    client_id: 'XXXXXXXXXX.YYYYYYYYYY',
    events: [{
      name: 'tutorial_begin',
      params: {},
    }]
  })
});
```
But for some reason, I’m not getting any event data through to GA. The extension console seems to be error-free, just no data rolling in.

Journey Update:

Got some progress here! Managed to get it working by moving the const values straight into the fetch URL:
```
fetch(https://www.google-analytics.com/mp/collect?measurement_id=G-XXXXXXXXXX&api_secret=secret_value, {
  method: "POST",
  body: JSON.stringify({
    client_id: 'XXXXXXXXXX.YYYYYYYYYY',
    events: [{
      name: 'tutorial_begin',
      params: {},
    }]
  })
});
```
Alex replied 1 year ago 3 Members · 2 Replies
2 Replies

Evelyn

Member
15 September 2022 at 5:23 pm

The person is trying to add GA4 analytics to a Chrome Extension using the Measurement Protocol with gtag, but faced an issue where no event data was being sent to GA despite no errors showing up in the console. The initial attempt used constant values for the measurement ID and API secret in a fetch URL in the Service Worker.

After some adjustments to their code, they were able to solve the issue by directly inserting the values of the measurement ID and API secret into the fetch URL. Thus, the event data began successfully showing up in GA4. The changes showcased that the problem was related to how the constant values were being used in the fetch URL.
Alex

Member
27 September 2022 at 8:12 pm

The user tried to add GA4 analytics to a Chrome Extension using the Measurement Protocol specified by Google’s instructions but didn’t get any event data. Their first approach included the measurement id and api secret as variables in the fetch URL. However, they managed to make it work when they put these values directly into the URL.

Exploring GA4 Measurement Protocol Integration for Chrome Extensions

Evelyn

Alex