Quick Tip: How to Identify Facebook In-App Browser

 

Google Analytics offer a dynamic platform to track and analyze your website traffic in various ways. Talk about the hidden gem of Google Analytics, talk about Acquisition Report. This blog explores the Acquisition Report to understand the diverse channels that identifies the source of origin from where users lands on to your website.

Since it is crucial to know the source of your website visitors, the Acquisition Report helps in comprehending the right channel, referral, and source performances.

However, the challenge in Google Analytics is to track a web page that is displayed in Facebook in-app browser. The implausible result can be any of the following:

  • Difficulty in identifying the actual origin of traffic.
  • Inadequate estimation of the ad campaign(s) that are active on social networking sites.

To bridge the above gap in Google Analytics, we will here understand how to track a web page that is rendered in a Facebook in-app browser.

Following are the prerequisites to track the actual in-App browser in Google Analytics:

  1. A Google Analytics Custom Dimension (named – browserType) preferable of Session Scope.
  2. Google Tag Manager(GTM) implemented on web page.

We will now move to the implementation steps :

  1. Create one Data Layer variable “browserType” in GTM

     2. Create a Custom HTML tag in GTM and add the following code within it

NOTE : Make sure that the Custom HTML tag triggers before or along with the the pageview in GTM implementation.

3. Set the browserType in a Page view Tag

NOTE : The index number set in custom dimensions is equal to the index number of the custom dimension in which you desire to view the data

    4. You can also track the browser type with an event. Below is the Event Tag configuration:

 

That’s that! You are now all set to track the Facebook in-app browser.

Below image is just a glimpse of the report you would see post atoning to the above-mentioned changes.

Leave your comments to further offshoot the In-App Browser Tracking and we will be glad to assist you further.  

, ,
Previous Post
Implement dataLayer and Google Tag Manager: Best Practices and Advantages
Next Post
Google Analytics 360 Premium vs Google Analytics Standard Comparison

14 Comments. Leave new

  • Avatar
    Darren Selberg
    May 30, 2018 10:06 pm

    How do you apply this code snippet to work for any in-app browser (like in Gmail or Slack or YouTube)

    Reply
  • I have gone through the post it is very helpful. You can identify the facebook app browser. You can open it by adding m before the whole URL.

    Reply
    • Thanks for the tip! Although, doing that will give us referral and mobile traffic from Facebook, also most users, as a trait, don’t edit the URLs manually and it would still give us discrepancies in data.

      Reply
  • I was very delighted to locate this site on bing.I wished to say many thanks to you with regard to this good post!! I certainly loved every little bit of it and I’ve you bookmarked to have a look at new stuff you post

    Reply
  • The quick tip of the Facebook may help you to use in the new browser where you might get to know about it. The coding here that you will get here will be very helpful as the app might tell you about the usage of it.

    Reply
  • Amazing analytics hacking! As for the code, I have a few questions.

    1. What’s tvc_ua? is that name of a tag? Should I change it when I customize the code for a specific app?

    2. The code says ‘window.opera’ what does opera mean in the code? In my view, in-app browser follows to user’s browser configuration so it’s flexible. How can I define a specific app’s in-app browser?

    3. what is “FBAN” and “FBAV” in tvc_ua.indexOf()?

    4. Would it possible to audit how I can customize my code for a specific app below?

    var tvc_ua = navigator.userAgent || navigator.vendor || window.opera
    var browserType = tvc_ua.indexOf(“WMPAN”) > -1 || tvc_ua.indexOf(“WMPAV”) > -1 ?
    ‘wemakeprice’ : ‘Regular’;

    dataLayer.push({
    ‘event’ : ‘loaded’,
    ‘browserType’ : browserType
    });

    the website URL is: http://www.wemakeprice.com/

    I am struggling to fix this up asap for my client.
    Would you please help me out? 🙂

    Reply
    • Hi Anthony,

      We’re glad you liked our solution. To answer your questions,

      1. ‘tvc_ua’ is a variable name. This variable stores the value of the current userAgent. The name of the variable can be changed if required.
      2. window.opera is used to get browser data if the browser is an Opera Browser.
      3. FBAN and FBAV depict the Facebook App User Agents.
      4. The User Agents are App specific and depend on the configuration.

      Reply
  • Thanks for the great post, but you lost me at step 3. Step 1: Create a variable. Step 2: Create a tag (custom html). I’m not sure what to do next. Do I add a trigger to this new tag? Your screen shots don’t match my current version of GTM. I don’t see More Settings > Custom Dimensions > Index. Can you point me in the right direction?

    Reply
    • Hi Jared,

      Thanks for your query.

      Yes, you need to add trigger to the Custom HTML tag created in step 2, in-order to fire the tag.
      The trigger for the tag in step2 needs to be in such a way that the tag is fired before the pageview tag (already existing pageview tag) in step 3

      The more settings variable will be available in pageview tag(Tag of type: Google Analytics – Universal Analytics) not for tag type Custom HTML.
      Below is the reference screenshot link:
      https://prnt.sc/o8w94k

      Also, step 3 just talks about adding a custom dimension to the capture the browser name and pass it with the pageview (that’s being fired via a pageview tag).

      Reply
  • Great blog.
    If you have a phone with web access, enter m.facebook.com into your web browser. On most phones, you can access the internet browser from your phone’s menu. To save time, you can add Facebook to your phone’s bookmarks. Keep in mind that the Facebook mobile site is the version that works with most mobile browsers.

    Reply
    • Hi Hassan,

      Thanks for writing in, here the solution is to identify what is the browser type for pages that are opened from facebook in-app browser and attributing to m.facebook referrals for such instance. Facebook now a days definitely allowing users to open facebook’s domain from the mobile device. However this is to identify such user’s browser. As currently browser (GA dimension) is showing Android Webview / Safari (in-app) in front of facebook referral’s source/medium.

      I hope this answers your query.

      Reply
  • Hi,

    Incredible hack !
    Could you update a better quality of your image for this please ?

         2. Create a Custom HTML tag in GTM and add the following code within it

    Read more at: https://www.tatvic.com/blog/quick-tip-identify-facebook-app-browser/?utm_source=copytext&utm_medium=text&utm_campaign=textshare

    Thank you !

    Reply

Leave a Reply

Your email address will not be published.

Fill out this field
Fill out this field
Please enter a valid email address.
You need to agree with the terms to proceed

Menu