Debugging Google Analytics 4 (GA4) or Firebase Analytics using Charles Proxy involves intercepting and inspecting the network requests made by the app. The following is a guide on configuring Charles Proxy to decode the *.app-measurement.com/a calls initiated by the Firebase Analytics SDK on iOS/tvOS or Android. In this guide, it is presumed that you are familiar with setting up Charles Proxy on your mobile devices and activating SSL proxy for the *.app-measurement.com domain.
1. The Problem
Activating the SSL proxy for *.app-measurement.com, you'll notice that the request data appears in an unreadable format, resembling something like this -
As you can see in the raw response in the above image, you'll see random characters, making it challenging to comprehend the entire request. However, it's important to note that Firebase employs Protocol Buffers ("Protobuf"), a serialization mechanism developed by Google for structuring data.
2. Decoding Request
The Protocol Buffers serialised format is a binary encoded format that is not easily human-readable. As Protocol Buffers messages are commonly exchanged over HTTP Charles Proxy has full support for viewing and editing Protocol Buffers messages in a human-readable way.
To decode the request, simply right-click on the request and choose View Request As > Protocol Buffers....
Once chosen, a new pop-up will appear. In the Message Type: field, select google.protobuf.Any and click OK.
Now, you can see, the request data for *.app-measurement.com is available in a more readable form.
3. Protocol buffers definition for Firebase Analytics request
While the data is now easier to read, it still lacks substantial information. The challenge at this point lies in the fact that Protobuf achieves data compression by replacing lengthy key names with numerical identifiers. Consequently, following step 2, you will only observe keys represented by numbers. This key name and number mapping is defined in a .proto file (protocol buffers definitions file), essential for both the encoding and decoding of Protocol Buffers. And Google does not publicly provide the .proto file for decoding this request.
But, this GitHub repo from Lari contains protocol buffers definition that can be used to decode *.app-measurement.com/a requests made by Firebase Analytics SDK on iOS/tvOS/Android. Now you need to add this custom .poroto definition to Charles Proxy. You can clone/download the Lari repo. In the next step, you will need app-measurement.desc file from Lari's Github repo.
4. Add Firebase Analytics Protocol Buffers Definition to Charles Proxy
To use the Firebase Analytics protocol buffers definition, navigate to the View menu and select Viewer Mappings...
You will see a Viewer Mappings window. Here you must to activate the "Enable Viewer Mappings" option.
Now, click the "Add" button, which will prompt another window for editing the Viewer Mapping. In this window, fill in the input fields as follows:
Protocol: https
Host: *.app-measurement.com
Port: 443
After filling in the above details, click on the "Open Descriptor Registry" button. This will open another window called "Descriptor Registry"
Click the "Add" button and choose the app-measurement.desc file from the previous step. This will add the custom Firebase Analytics protocol buffers definition to Charles Proxy. In the "Edit Viewer Mappings" window again, enter the protocol buffers details as follows:
Request type: Protocol Buffers
Message type: app_measurement.Batch
Payload encoding: Binary and Unknown
5. Decoded Firebase Analytics Requests
Now, upon selecting any Google Analytics or Firebase Analytics request, you will observe all key-values presented in a human-readable format.