Takes 5 mins
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:
- A Google Analytics Custom Dimension (named – browserType) preferable of Session Scope.
- Google Tag Manager(GTM) implemented on web page.
We will now move to the implementation steps :
- 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. Ā
14 Comments. Leave new
How do you apply this code snippet to work for any in-app browser (like in Gmail or Slack or YouTube)
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.
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.
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
Hey Amelia, Thank you for your kind words! We are glad you like our blogs and find them resourceful
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.
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? š
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.
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?
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).
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.
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.
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 !
Thank you for your valuable feedback. Keep reading! We will continue to share more relevant content.
Feel free to reach us at hello@tatvic.com if you have any questions š