Understand that we can use document.referrer in JavaScript to detect where a visitor came from on the web browser.
Wondering if there's any mechanism using JavaScript to detect if the visitor arrived at the website by clicking on the link of a mobile app (e.g. Facebook)?
Mobile apps won’t send referrers. Smartphone apps are unable to pass “referring page” information to your site analytics. So direct traffic stats may be inflated.
Your best bet is to add a querystring in the links and then check that.
Ie.
https://www.yoursite.com?ref=facebook
index.html
<script>
const urlParams = new URLSearchParams(window.location.search);
const ref = urlParams.get('ref');
switch(ref) {
case "facebook":
// Count Facebook
break;
case "snapchat":
// Count Snapchat
break;
default:
// Count misc
break;
}
</script>
Related
We have an issue with GA where conversion sources are being lost after a user clicks on a link to our site, goes to the site, and then logs in using Facebook.
My understanding from GTM tips - implement referral exclusions is that our site sees the document.referrer as coming from Facebook and starts a new session, losing the original referrer. If we know the landing page on our site the user sees after logging into Facebook, is it possible to add code to exclude the FB referrer only for that page? I.e, on that one page we have something like (from the linked article):
function() {
var referrals = [
'facebook.com'
];
var hname = new RegExp('https?://([^/:]+)').exec({{Referrer}});
if (hname) {
for (var i = referrals.length; i--;) {
if (new RegExp(referrals[i] + '$').test(hname[1])) {
return null;
}
}
}
return {{Referrer}};
}
We can't simply add facebook.com to the GA exclusion list, as we have campaigns running on Facebook as well, so we'd still need visibility to organic traffic coming from Facebook.
You can copy GA tag and modify the copy with this code. Then fire that copy only on pages where you need to block referrer and block original GA tag on same pages.
If you don't want to have multiple GA pageview tags then use Lookup Table variable based on page paths. For some pages this variable should return your code as a Custom JavaScript variable and a default value should be {{Referrer}}.
I make an Photo Sharing App on facebook; It's use #myAppSharing to search Photo people share by app. It's running now but I can't find any photo with hashtag #myAppSharing. Because when user login with FB Auth2.0, app ask permision; and set default audience to "Friend". So, I can't search #myAppSharing in public.
How do I set default audience to "Public"?
note: I use Javascript SDK like this:
FB.login(function(response){
console.log(response);
switch (response.status) {
case 'connected':
fbAuth = response;//save data
state = new State('#upload');
state.active();
break;
default:
console.log('cannot connect Facebook account');
break;
}
},{scope: 'email,publish_actions',display:'popup'});// <-- maybe set audience here or where?
You should use the following js API FB.login call:
FB.login(callback, {
scope: 'publish_actions',
default_audience: 'everyone'
});
Research for hours, I found here with the same problem. Solution is setting up for app, answer base #CBroe:
You find it on the “Permissions” tab in your app settings. (While the
permissions specified there are only for login through the app center,
the Default Activity Privacy however is for all logins.)
Thank #Broe so much!
i want the codes which will redirect the user to my app if he/she tries to open my app hosting site.
for ex:
my app link: https://apps.facebook.com/gaming-zone/
app hosting link: http://gaming-zone.herokuapp.com/
i have found some codes already but those codes redirects the user continously and if he is using my app on facebook and he is playing any game then also it redirects the user to app home page.
i want the exact codes that redirect the user only when he visits my hosting site.
These are the codes that i found already:
<script type='text/javascript'>
if (window.top.location == window.location)
window.top.location = 'https://apps.facebook.com/gaming-zone/';
</script>
Here is the code that I use:
<script type="text/javascript">
function NotInFacebookFrame() {
return top === self;
}
function ReferrerIsFacebookApp() {
if(document.referrer) {
return document.referrer.indexOf("apps.facebook.com") != -1;
}
return false;
}
if (NotInFacebookFrame()) {
top.location.replace("https://apps.facebook.com/YOUR_APP_NAMESPACE");
}
</script>
This checks if they are currently in the Facebook frame and ONLY if they aren't it will redirect them to "https://apps.facebook.com/YOUR_APP_NAMESPACE"
Note: you can use this on any page in you app just change the URL accordingly.
For example: If you are using this in http://YourDomain.com/anotherpage.php you can change the URL in the code above to https://apps.facebook.com/YOUR_APP_NAMESPACE/anotherpage.php
The problem is that you cannot read the window.top.location value. You can only write it. Strange but thats it.
Option 1: Mount your app to a page tab and create a like-gate. Like gate will return false outside facebook iframe ALWAYS.
Option 2: Check signed request data when loading the page at backend.
Option 3: Other option is to examinate the top url as you do but at backend.
im building facebook app as a iframe app in fan page. My problem at the moment is next: i added facebook request dialog (http://developers.facebook.com/docs/reference/dialogs/requests), and everything goes well except for one thing: when a user gets notification, the links goes to canvas page, not to fan page (where i would like to go...)
Since i cant convince facebook to add some funcionality (that would be great), im looking for a way to automaticly redirect from app canvas page to fan page, where this app is added as iframe tab.
I hope somebody understands what i want to do... :)
thanks, Peter
I also wanted to make sure that users view my Facebook app via a Facebook Page Tab (rather than via the Facebook App page or by directly viewing the actual site itself). I have managed to achieve it with this Javascript in a <script> tag in the head of my document (tested Mac/PC FF,Chrome,Opera,IE6-8,Safari).
<script type="text/javascript">
function NotInFacebookFrame() {
return top === self;
}
function ReferrerIsFacebookApp() {
if(document.referrer) {
return document.referrer.indexOf("apps.facebook.com") != -1;
}
return false;
}
if (NotInFacebookFrame() || ReferrerIsFacebookApp()) {
top.location.replace("http://permalink-to-my-facebook-page-tab");
}
</script>
If I understand you correctly, you can do this:
top.location.href='http://www.facebook.com/YOUR_PAGE_NAME?sk=app_YOUR_APP_ID'
or you can use a header to redirect to that url. This will redirect to the application's tab on your fan page.
My application is quite dynamic and I never know which page it's added to. So when I used URL 'http://www.facebook.com/YOUR_PAGE_NAME?sk=app_YOUR_APP_ID' it only redirected me to page, but not to application tab. What I do is:
1) I get page id from signed_request (the encrypted in base64url parameter that your app gets once someone comes to the page, so you have to decrypt it and pick id value from JSON page object)
2) Then I get page data from https://graph.facebook.com/PAGE_ID_YOUR_GET. You get JSON object with some page data in response in JSON format.
3) Only after point 2 I get 'link' value of page from response. It's like http://www.facebook.com/pages/Some-Page-Name
4) And finally I add '?sk=app_YOUR_APP_ID' to page link.
Maybe that's too complicated, but that's the only way it worked for me the way I expected (redirecting exactly to page application tab).
<script type="text/javascript">
function NotInFacebookFrame() {
return top === self;
}
function ReferrerIsFacebookApp() {
if(document.referrer) {
return document.referrer.indexOf("apps.facebook.com") == -1;
}
return false;
}
if (NotInFacebookFrame() || ReferrerIsFacebookApp()) {
top.location.replace("http://permalink-to-my-facebook-page-tab");
}
</script>
I have a Facebook app that is built as an iFrame. I am using the JavaScript client API loaded via:
http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php
In my initialization code, I use the requireLogin method to ensure that the user has authorized the app. I have found this to be necessary to be able to gather the user's name, avatar, etc. for the scoreboard. Here's a representative code snippet:
FB_RequireFeatures(["Connect","Api"], function() {
FB.Facebook.init("...API_KEY_HERE...", "xd_receiver.htm");
var api = FB.Facebook.apiClient;
api.requireLogin(function() {
api.users_getInfo(
FB.Connect.get_loggedInUser(),
["name", "pic_square", "profile_url"],
function(users, ex) {
/* use the data here */
});
});
});
This causes the iframe to redirect causing the Facebook authorization screen to load within my app's iFrame. This looks junky and is somewhat confusing to the user, e.g. there are two Facebook bars, etc.
Question 1: is there anything I can do to clean this up while still implementing as an iFrame, and still using the JavaScript APIs?
According to the FB API documentation:
FB.ApiClient.requireLogin
This method is deprecated - use
FB.Connect.requireSession instead.
My experience though when I replace api.requireLogin with FB.Connect.requireSession it never gets invoked. I'd prefer the recommended way of doing it but I struggled and was not able to find a way to get it to work. I tried adding various arguments for the other two parameters as well with seemingly no effect. My expectation is that this method will load in a dialog box inside my app iFrame with a similar authorization message.
Question 2: what am I missing with getting FB.Connect.requireSession to properly prompt the user for authorization?
Finally, at the end of the game, the app prompts the user for the ability to publish their score to their stream via FB.Connect.streamPublish. Which leads me to...
Question 3: am I loading the correct features? Do I need both "Api" and "Connect"? Am I missing any others?
Here is a summary of the changes I needed to make to clean up the authorization process. It appears that iFrames must fully redirect to properly authorize. I tried using the FBConnect authorization but it was a strange experience of popup windows and FBConnect buttons.
Ultimately this game me the expected experience that I've seen with other FB apps:
FB_RequireFeatures(["Connect","Api"], function() {
var apiKey = "...",
canvasUrl = "http://apps.facebook.com/...";
function authRedirect() {
// need to break out of iFrame
window.top.location.href = "http://www.facebook.com/login.php?v=1.0&api_key="+encodeURIComponent(apiKey)+"&next="+encodeURIComponent(canvasUrl)+"&canvas=";
}
FB.Facebook.init(apiKey, "xd_receiver.htm");
FB.ensureInit(function() {
FB.Connect.ifUserConnected(
function() {
var uid = FB.Connect.get_loggedInUser();
if (!uid) {
authRedirect();
return;
}
FB.Facebook.apiClient.users_getInfo(
uid,
["name", "pic_square", "profile_url"],
function(users, ex) {
/* user the data here */
});
},
authRedirect);
});
For iFrames, the solution was ultimately to redirect to the login URL which becomes the authorization URL if they are not already logged in.
I think that FB.requireSession only works from a FB connect site outside of
Facebook. If you're using an app hosted on apps.facebook.com use the php api
call instead,
$facebook = new Facebook($appapikey, $appsecret);
$facebook->require_login();
or link to the login page.
Of these methods to login
* Using the PHP client library
* Directing users to login.php
* Including the requirelogin attribute in a link or form
* Using FBML
only the first 2 are available to iframe apps hosted on apps.facebook.com
I think requirelogin and fbml only work with fbml canvas apps.
see
http://wiki.developers.facebook.com/index.php/Authorization_and_Authentication_for_Canvas_Page_Applications_on_Facebook
Question 1: is there anything I can do
to clean this up while still
implementing as an iFrame, and still
using the JavaScript APIs?
Question 2: what am I missing with
getting FB.Connect.requireSession to
properly prompt the user for
authorization?
Please have a look at this. This article discusses correct use of require session and provides links on how to implement that. And yes, you are right, the requireLogin has been deprecated and won't help any more.
Question 3: am I loading the correct
features? Do I need both "Api" and
"Connect"? Am I missing any others?
As far as I know, you can use both API and Connect together, basically you access Facebook's API with the help of JavaScript.
For iframe apps however, there is no great help and minimum support of API with some handful functionality available. See this for more info.
This causes the iframe to redirect
causing the Facebook authorization
screen to load within my app's iFrame.
This looks junky and is somewhat
confusing to the user, e.g. there are
two Facebook bars, etc.
Finally and personally I have not seen any iframe app requiring user to add the app first. This will create the problem of two bars you mentioned as quoted above.
The link I posted at the beginning of my answer has some useful links to get you started and decide the next-steps or possibly making changes to your apps.