Objective

• I am developing a Chrome DevTools extension to display data sent to GA4.
• Example output: https://github.com/temelm/tealman/blob/357c3a5472cc6737781268499f49802530d833cc/store-listing/screenshots/2.png
• I do not want to put any company's GA4 tracking/measurement ID on Stack Overflow. Hence, to see an example POST request I am trying to parse: 1. Open DevTools => 2. Select Network tab => 3. Filter by collect?v=2 => 4. Visit https://www.ocado.com/search?entry=nutella => 5. Slightly scroll down
• You should be able to see a network hit with both query string parameters and request payload.
• I am trying parse this data and display it nicely to assist debugging.
• Code currently failing to do this can be found at: https://github.com/temelm/tealman/blob/357c3a5472cc6737781268499f49802530d833cc/src/panel/scripts/GA4.js
• Functions of interest: groupData(), parseData(), getParameterAliasAndGroup(), formatProduct()

Problem

• Main problem, as far as I can see, is when multiple GA4 hits are sent close to each other, GA4 batches and sends them together.
• I am struggling to understand how to go parse GA4 hits which carry data for multiple events.
• I was able to do the same exercise for other providers including GA3 for which documentation is brilliant.
• I was unable to find anything useful reading the GA4 Measurement Protocol Reference.
• This problem causes the data displayed to be incomplete / incorrect.

• Standalone GA4 hits are POST requests with query string parameters.
• Batched GA4 hits are POST requests with query string parameters and payload.
• Splitting payload text by one or more whitespace characters will return an array of strings where each string represents the data associated with a batched GA4 event.
  • Example: postDataText.split(/\s+/)