Here are a few tips for debugging your Google Analytics tagging implementation.
More and more websites and apps are beginning to use HTTPS to protect data communication between servers and users. Web-giants Mozilla recently revealed that since October 2017 more than 60% of Web traffic are using HTTPS. At Apple's Worldwide Developers Conference 2016 (WWDC), Apple announced that an iOS app is required to support App Transport Security (ATS) after 1st Jan 2017. However, Apple went on to extend this deadline, giving developers more time to prepare it.
HTTPS is a good thing, but it has raised a technical problem for digital analytics projects.
How do I decrypt the HTTPS tagging requests sent from mobile apps for debugging purposes?
Before answering this question, let’s have a look how we do that for web pages. Most desktop browsers have a built-in development tool to inspect the HTTP and un-encrypted HTTPS requests. So it’s easy to debug or investigate analytics tagging requests for web pages. However, mobile apps are built as a package. It’s impossible to modify it or inspect it unless you’re the developer who builds it. We only need to know what the app tagging requests data looks like. Therefore, this problem can be solved at a networking level - by capturing network requests from mobile. There are many excellent web debugging tools that are able to achieve this, such as Fiddler, Charles and HTTPScoop. In this article, I will demonstrate how to use Fiddler to capture and decrypt HTTPS request from an iOS app.
Firstly, the iPhone connects to the Fiddler proxy server. All network requests from my iPhone will go through Fiddler first as Fiddler relies on a "man-in-the-middle" approach to HTTPS interception. Fiddler uses a unique generated certificate to encrypt HTTPS requests.
Open Fiddler > Tools > Options > HTTPS. Select ‘Capture HTTPS CONNECTs’ and ‘Decrypt HTTPS traffic’.
Go to Connections tab. Enter port 18888 or any other port number you would like. Make sure ‘Allow remote computers to connect’ is ticked.
Visit http://127.0.0.1:18888/ in your browser. Proxy works if it return 200 response.
Find your computer’s network IP. If you don't know how to find your IP, follow this link.
In this case, my computer IP is 192.168.0.22. Visit http://192.168.0.22:18888 in Safari of your iPhone. If your iPhone can’t open it, it could be blocked by the firewall of your computer or network. Turn off firewall or add rules to allow the connection for specified port.
Tap Settings > Wi-Fi > Setting of connected Wi-Fi > HTTP Proxy Section > Manual option
Server : 192.168.0.22 (my computer network IP found in step 4)
Port : 18888 (Fiddler proxy port setup in step 3)
Alright! Fiddler is capturing all network requests from my iPhone. Wait….. now my iPhone isn’t working properly and all the requests captured by Fiddler are showing error messages. That’s because iPhone doesn’t trust Fiddler’s certificate and iOS thinks someone is doing a 'Man-in-the-middle' attack. As I mentioned earlier, Fiddler is using sa 'Man-in-the-middle' approach to decrypt HTTPS requests, so it’s ok to let iOS trust our Fiddler certificate.
The next step is very important.
Visit http://192.168.0.22:18888 in Safari on your iPhone. You MUST use Safari as other browser apps cannot install certificate.
In the web page, tap ‘FiddlerRoot certificate’ to download your unique Fiddler certifcate and install it.
Navigate to Setting > About > Certificate Trust Settings to enable and fully trust Fiddler’s certificate.
Ok. My iPhone is working again and Fiddler captures HTTPS request and I can see all the query parameters and POST data!
So there you go. You can now start to investigate IBM Digital Analytics / Google Analytics tagging requests for iOS APP now! For an Andriod APP, the process is similar. Basically, it requires a middle-ware like Fiddler which can decrypt requests and encrypt requests again with its own testing certificate.
We hope this how-to guide was helpful. If you have any questions or need some more advice, feel free to leave comment or get in contact with us.