Tracking Facebook in-app browser in Google Analytics

I recently wrote about Facebook’s in-app browser over on StateOfDigital.  In that I encouraged marketers and publishers to stop ignoring what is one of the most popular and under-reported segment of browsers on the web.

Anyone involved in marketing or monetizing a website that gets traffic from Facebook would do well to read this if they are not already familiar with the issues.  In short, apps like Facebook often now open links in their own browser window. This isn’t reported by analytics, might render differently and will make a mess of your advertising revenues and cookie use.

In-app browsers, the hidden issue

The first step to dealing with the issue, as ever, is to measure it.  This is a challenge as  Google Analytics doesn’t properly report on in-app browsers.  Looking at Google Analytics might lead you believe that it is only Safari users who use in-app browsers, which is not the case. In-app browsers (accurately called “web view windows”) run as a child of whatever the user’s primary browser is.  Safari chooses to report this as ‘Safari (in-app)’ where as other browsers don’t differentiate.  A Chrome user viewing your website in-app, for instance, will simply report as using Chrome, even though their experience might be quite different to if they were using the full browser.

Throwing light on the issue

As in-app browsers can have a big impact on ad revenue, this is information that I want to be able to access when working with partners on website monetisation.   The first step for me is to plug this gap in Google Analytics.  I do this using Custom Dimensions.

Adding a Custom Dimension for in-app browsers

Custom Dimensions are a handy feature of Analytics that are perfect for jobs like this.  Adding a custom dimension of in-app browsers will allow us to start tagging up users of any that we are interested in tracking. Here is how:

In Google Analytics

1. Switch to the property where the data will be saved
2. Click Admin, then select Custom Definitions, then Custom Dimensions
3. Create a new custom dimension as shown here

This gives you a way to track the dimension. Take a note of what Dimension number is used when you create this.  We now just need to pass the value into Facebook.

On-page changes

In order to pass the value into Google Analytics we need to read the user-agent string and set the custom dimension.  This just needs a small snippet added to the Analytics tag:

Assuming you are using GPT tags simply add the following line just before ga(‘send’, ‘pageview’);

var ua = navigator.userAgent || navigator.vendor || window.opera;
ga('set', 'dimension1',(ua.indexOf("FBAN") > -1) || (ua.indexOf("FBAV") > -1) ? 'Facebook' : 'None');

Note, if the in-app dimension isn’t the first that you have created then you may need to change dimension1 to match the dimension number created in analytics earlier.

How to read this

This method allows you to add dimension to show in-app browser use to most reports.   For instance, here is a breakdown for traffic referred from Facebook to a test link that I shared.

Having this data available as a dimension allows you to apply it to many report types. You could, for instance, compare bounce rates, visitor loyalty or AdSense/Adx revenue performance.

Taking the idea further

The script snippet provided only detect’s Facebook’s in-app browser, but the logic can be applied to the webview windows opened by other mobile apps.  You simply need to find the unique strings reported in their user-agents.

For those involved in ad-serving the same technique can be used to target in-app browsers in DFP, allowing you to measure ad performance and send more targeted impressions to those users. Keep an eye on the blog for exactly how to do that in my next article.

Mat Bennett

Mat has been supporting content creators on the web since 1996. As Co-founder of OKO Digital, Mat became the first person in the UK qualified to AdSense partner status and repeated this first with Google Certified Publishing Partner programme.