What is the best practice for testing usage from a mobile browser?

[james_hartley]

I am able to test my mobile apps (iOS) through Charles Proxy as well as the Tag Companion. However, when attempting to test basic browser traffic through Charles I do not see image requests being sent. Are there any best practices around this? How is this normally approached?

[Clint]

Hey James, the best I can offer is this: https://community-beta.tealiumiq.com/t5/Mobile/Inspecting-Mobile-html-via-Browser/m-p/2504#M164 (inspecting mobile.html). You can send test calls through the browser console and then either see the traffic reflected in your analytics suite or (I use Chrome for testing) in the Network panel of Developer Tools you will see the pixel fire and can inspect it directly.

[james_hartley]

Hey Clint, thanks for the response. But my understanding is that the method that you provided in your link is specific to a mobile app where the SDK is implemented. I am curious to see if there are practices around testing simply through a mobile browser such as Safari on an iPad. Am I making sense? Or am I missing something? Thanks!

[Clint]

Do you mean testing a mobile site (as opposed to a native mobile app)?

[james_hartley]

Exactly, Another situation I am attempting to solve for is that our mobile developers are using HTML 5 and rendering content through and iOS and Android App - this means that they are not using native mobile app code and therefore not implementing the Tealium SDK. So....how do I test our code through the app?

[Clint]

Ah, there's a way to do that with iOS browsers + Safari on a laptop/desktop (not sure if it's available on Windows machine, but here's the basic instructions (again, assuming that you have an iDevice and Safari available on your computer) 1. on your iDevice go to Settings --> Safari--Advanced and enable Web Inspector 2. Open the mobile site on your iDevice 3. Open Safari on your desktop and go to the "Develop" menu and select your iDevice -- it should show the web page url you have open on the iDevice. 4. Click that web page and the Safari browser tools will open for the mobile page and you can inspect calls that way.

[james_hartley]

Clint, thanks for the info. I am fairly sure this option is only available on an Apple Machine (which I do not have). What about an android device? Any info on how to test on an android given the same information?

[Clint]

For Chrome: https://developers.google.com/chrome-developer-tools/docs/remote-debugging

[Clint]

Just walked through this on my S3 and it worked fine.

[james_hartley]

Thanks Clint! I am going to try and get my hands on an apple machine and\or see if there is any other way to test the apple devices.

[craig_rouse · Accepted solution]

Hi James, On Android (either the emulator or a physical device), you'll need do the following: * Set Charles up to listen on an arbitrary port number (I use 8888 - set this under "Proxy Settings") * Set the proxy on your device/emulator to point to the IP address of your PC (port 8888 or whatever port you selected). This is available in the Android network settings. * Browse the mobile site on your Android and you'll see the traffic in Charles proxy. This also works for "pseudo" mobile apps that appear to be native apps, but are really rendering a standard HTML page. Hope this helps - let me know if you have any questions. Craig.

[kevin_rogers]

I've been using this method for some time and it works well. When I want to see all of the traffic from an iOS device or an Android device in Charles on my laptop this solution works perfectly.

[james_hartley]

Thanks Kevin, I have been using this method for some time now but I only see traffic from the native apps. I can't get the traffic from a device browser to pass through Charles for some reason.

[james_hartley]

Everyone - thanks for the help. I was able to solve for this by installing the Charles SSL Certificate directly to my Apple Device. Something I must have overlooked. Whoops!! I am good for Android and iPad now. Cheers!