We are using Google Tag Manager to manage Java scripts for 3rd party services like Facebook retargeting pixel. In China, Facebook is blocked as a service so whenever a user opened the site it would try to work the script but eventually go into timeout because the firewall blocks the script from loading.
Is there an ability to exclude Facebook pixel script by condition? What is the best solution to define if Facebook is blocked for the current user?
You need a trigger which checks the value of a variable. This variable must return true/false whether facebook can be loaded or not.
You could try this code as your variable (custom JS code in GTM interface). Replace the facebookUrl value according.
function (){
var facebookUrl = "..." // your facebook ressource URL
var http = new XMLHttpRequest();
http.open('HEAD', facebookUrl);
http.send();
return http.status < 500;
}
Related
I have a Flutter app where I am running a Google Apps Script through an http request. The purpose of the script is to create a Form and link the responses to a spreadsheetID that is passed in. The script is configured to only allow Google accounts access it and I've set up the flutter app to use a Service Account to access the script using the format:
getCredentials().then( (AuthClient client){
response = client.get(url, headers{"Authorization": "Bearer ${client.access_token}");
});
Issue: The issue is that the first time that the Service Account makes a request it will get an HTML response saying that it the account needs to give permission to the script to access its data and I'm not sure how to do that.
I'm fairly new to making http requests and using it with the GoogleAPI so I'm stuck. Any advice?
Goal
Create a web page which anyone can use to submit a Google sheet link and for the app to create a form and link the sheet to that.
Authorization
For this users will require a google account and they will be required to go through the OAuth process to authorize your app.
To create the form and link it from client-side JavaScript you would indeed need to call the Apps Script API, though you cannot do this with a service account.
From: https://developers.google.com/apps-script/api/how-tos/execute
Warning: The Apps Script API doesn't work with service accounts.
Luckily, you don't need a service account to do this.
Instructions
Create an Apps Script project with a function something like:
function createForm(ssID){
form = FormApp.create("Your New Form");
form.setDestination(FormApp.DestinationType.SPREADSHEET, ssID);
let formLink = form.getPublishedUrl();
return formLink;
}
Save and take a note of the ID of the script project.
Set up a GCP project (sounds like you already have one).
Make sure the Apps Script API is enabled in your GCP.
Configure the OAuth consent screen and add the scope - https://www.googleapis.com/auth/forms.
Create an API key and a Client ID - add http://localhost:8000 or whatever port you are testing on to the "Authorized JavaScript Origins"
Create OAuth credentials "web browser (JavaScript)".
Link your Apps Script project to the same GCP project - Instructions
Deploy the Apps Script project as an API executable - take not of the deployment ID, although the documentation says that you need the script ID, it is wrong, at least with the new Apps Script IDE.
Write the client-side JavaScript in your app like what is found in the quickstart. Which will enable users to authorize the app. You need to add in the scopes and keys there too. I recommend just following the quick start steps first to get a feel for it. You can use the authorization parts without modification.
Then add in the function that will call your Apps Script, something like this:
function appsScriptCreateForm(ssId) {
var scriptId = "<DEPLOYMENT_ID>";
// Run your Apps Script function
gapi.client.script.scripts
.run({
scriptId: scriptId,
resource: {
function: "createForm",
parameters: [ssId],
},
})
.then(function (resp) {
var result = resp.result;
// ERROR HANDLING
if (result.error && result.error.status) {
appendPre("Error calling API:");
appendPre(JSON.stringify(result, null, 2));
} else if (result.error) {
var error = result.error.details[0];
appendPre("Script error message: " + error.errorMessage);
if (error.scriptStackTraceElements) {
appendPre("Script error stacktrace:");
for (var i = 0; i < error.scriptStackTraceElements.length; i++) {
var trace = error.scriptStackTraceElements[i];
appendPre("\t" + trace.function + ":" + trace.lineNumber);
}
}
// IF SUCCESSFUL
} else {
console.log("success", resp);
}
});
}
Write your HTML with the buttons and inputs necessary.
Add event listeners where appropriate.
Profit!
Please note
This set up is your project running with the authorization of other accounts.
The API requests count against your quota.
You can see details of all the executions in your GCP Project Dashboard.
Users require a Google account and need to authorize the app.
In the Apps Script function above, you just need to pass in the Spreadsheet ID. Not the whole link. You could ask for the whole link and then use Regex to extract the ID if you wanted.
This can be quite tricky and easy to miss a step or make a mistake, so double check your work.
If, after successful authorization, when trying to run the script you get a 404 error, the request has been built wrong, check your IDs. If you get a 500 error, that can mean that the Apps Script function has successfully been called, but, there was an error within Apps Script and failed, check the executions page of the Apps Script editor.
References
Apps Script How to Execute
Apps Script JS Quickstart - Highly recommended you follow these steps first and get that working!
How to link your Apps Script to GCP
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 want to create a flash Facebook application in which, after pressing a button, the user will be able to browse his/her photo albums and choose a photo. How should i do that? What will be the code under the button to gain authentication from any user using this application?
Thanks.
I am currently writing a facebook application for a university assignment that will allow the user to do everything you can do in facebook, but via the flash player window. You will need a few basic things happening in order to do it.
User log in and authentication - this must be done via Facebook - using OAuth authentication, and meeting all of facebook's security policies
register the application with facebook
Use the Graph API (facebook's developer's toolkit) to get the necessary functions that will communicate with facebook via flash.
In Flash itself you will use a bunch of URLRequest functions to send out to FB for information, then you will need to retrieve that data responses and store them to variables (extracting data with a few lines of code is easy, something like this;
//initialise variables
public var photoURL:String;
var Request:URLRequest = new URLRequest("http://www.whatever the url for the graph api service you are using which is founf from FB");
//that ^^ will send off a request for the url, you then want to use the returned data by registering an event handler like this below
functionName.addEventListener(onComplete, completeHandler);
functionName(event, EVENT)
{
var loader:URLLoader = new URLLoader(Request);
var data:XML = new XMLData(load.loader); //i think this is right but not 100% sure, fiddle with it
//then you want to extract the data that is returned, for example, extracting xml data from a rest request works by hitting data from the xml by specifying a path to the object you want. an example of xml is this <rsp stat="ok"><photos ......more code="morecode"><photo url="url of photo"></photo</photos> so you can hit the url in that example like this;
photoURL = data.photos.photo.#url; //this line will grab the photo url for you, allowing you to dynamically create an array and assign photos to the flash stage according to the url you get
}
this is fairly advanced stuff and I am assuming that you have some decent knowledge on AS3, XML, and the FB API, if you need more help just reply
I have set up the Google Analytics in my FBML facebook application. It works for tracking the php pages. (I can see the report in GA).
However, I also want to track the aJax calls, because most of the pages of my application is ajax driven, rather than loading differnet php pages.
so, that's what I put in the code (before ajax call)
Facebook.urchinTracker('/importantpage/');
THere is no error return when running the application.
However, when I look at the Google Analytics, I can't find any report showing this is being tracked. I look at the Event tracking.. nothing. I look at the overview, it only shows the php pages statistic.
So, where should I look in Google Analytics? and do I need to set up anything in GA for tracking the ajax call for 'importantpage' ?
try calling urchin within you AJAX function. Like :
function callPage(div,params, page)
{
Facebook.urchinTracker(page);
var ajax_content = new Ajax();
ajax_content.responseType = Ajax.FBML;
ajax_content.ondone = function(data)
{
document.getElementById(div).setInnerFBML(data);
}
var params={"Params":params,"target":div};
ajax_content.post(page,params);
}
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.