Whenever I add the following code to a page of my website (https://traineeshipondernemen.nl/blog), some special characters start to misbehave. Ik have added two screen shots below to illustrate the problem.
The website is build with Bootstrap (4.3.1). Only html, css and Javascript.
Strange enough, the problem only occurs when I upload the file to the servers. When I run the site on my computer (local) everything looks fine.
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window,document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '376622943264914');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1"
src="https://www.facebook.com/tr?id=376622943264914&ev=PageView
&noscript=1"/>
</noscript>
Page without Facebook Pixel
Page with Facebook Pixel - textual changes are highlighted
This is the solution. Thanks CBroe!
Some sort of problem with character encoding, characters in UTF-8 getting interpreted as something else. validator.w3.org/nu/… lists “The character encoding was not declared. Proceeding using windows-1252” as first error. You have in there, but it comes after the tracking pixel codes - try and put it before, and see if that changes things.
I would like to send custom event data into my Facebook pixel whenever a lead is processed through one of my zaps.
Since some of my leads come through messages there isn't a good way to track this information in the pixel.
I was hoping to use the code by Zapier tool to trigger the Facebook pixel script along with event tracking parameters. When I go to set this up though it doesn't work. Can you provide me any help on how I can get a zap to ping the FB pixel?
All I've tried so far is just pasting the pixel and event parameters into the code block. My expertise does not go beyond this lol. I have removed my pixel ID from the code below.
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'PIXEL');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=PIXEL&ev=PageView&noscript=1"
/></noscript>
<script>
fbq('track', 'CompleteRegistration');
</script>
David here, from the Zapier Platform team.
First off, just dropping that code block into a Code step won't work since it is html code (that runs JS in the browser window). Code steps are Node.js, which is mostly similar but different enough that this isn't going to work.
You'll have less control, but I think what will work is doing a GET request (using a webhooks action) to https://www.facebook.com/tr?id=PIXEL&ev=PageView&noscript=1, which is what happens when javascript has been disabled. I'm not sure what exactly gets tracked, but it'll be better than nothing.
That said, this seems like a great use case and it's probably worth writing into contact # zapier . com to request this as a feature. It's likely others have also wanted this and/or there's a workaround I'm not aware of.
Hello we have setup the Facebook Instant Articles feeds in
facebook.
Facebook's Instant Article feature for publishers (rolled out on FB iOS apps mostly for now 30 3 2016)
allows tracking by Google Analytics code.
However, even after implementing GA code as instructed, we are not able to locate the referral or
other info of FB Instant Articles in GA.
Can anyone help me understand where exactly to find information in GA about content consumption on Facebook Instant Articles??
Will it appear as a referral source or a hostname?
Instant Articles open inside FB.
According to their documentaion https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingCampaigns#generalCampaign It is possible to set the source, medium and title through the analytics script. the title it is needed to be set given that the page title for the IA on the FB app is null.
PLEASE NOTICE THE CAPITAL LETTERS in the code are supposed to be updated with you static or dynamic values for it.
<figure class="op-tracker">
<iframe hidden>
<script>
(function (i,s,o,g,r,a,m) {i['GoogleAnalyticsObject']=r;i[r]=i[r]||function () {(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google- analytics.com/analytics.js','ga');
ga('create', 'ANALYTICS ID', 'auto');
ga('require', 'displayfeatures');
ga('set', 'campaignSource', 'Facebook');
ga('set', 'campaignMedium', 'Social Instant Article');
ga('set', 'title', 'POST TITLE OR THE TITLE YOU WANT');
ga('send', 'pageview');
</script>
</iframe>
</figure>
Again, Please Notice That THE CAPITALIZED WORDS are to be replaced by your actual values. Enjoy it.
As it seems this is a common issue I'll try to provide more information here:
First, make sure you check whatever code you are using on your Analytics. The first answer provided here pasted a code using Google GA.JS code, but many websites today uses the new Analytics.JS code (my case). So my suggestion is to copy your GA code from your website or from your GA panel.
Second, check if your GA code is being passed on your Instant Article RSS feed correctly (i'm assuming you are using Wordpress with some plugin to build a RSS). If you are using the new analytics.js method the code inside your RSS feed (per article) should be like this:
<!-- Adding tracking if defined -->
<figure class="op-tracker">
<iframe>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'YOUR_GA_ID', 'auto');
ga('send', 'pageview');
</script>
</iframe>
</figure>
Third, if your articles were already on Facebook Instant Article Production list BEFORE you added the Analytics code, they will NOT update / load the code. The best way to test is to edit any of your articles (a simples change of punctuation is enough) and republish it on your wordpress. Then go to your IA panel on Facebook, Configuration and click to reload / rebuild your RSS. Wait a little then check on the list of I.A that the post will update (you will see the date change), then open it on the edit option and check at the end of the code. Your GA code should be there.
So, if everything is good now, your last step (at least was for me) is to delete all the old Instant Articles on Facebook (I'm assuming you don't have them published yet) and reload the RSS feed on the Configuration area, so it will rebuild your articles with the GA code on them.
Hope this helps.
PS: I'm NOT using the plugin from Automattic to publish IA from WP as it's just garbage. There is one way simpler that work's w/o any trouble: https://wordpress.org/plugins/allfacebook-instant-articles/
Unfortunately the other answers all involve some kind of mess that will likely confuse people. Here's an attempt at a solid, modern solution that uses UNIVERSAL ANALYTICS (the new one) rather than "ga.js" (the old one, though there is an even older one urchin.js that no one uses anymore).
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'YOUR_UID_REPLACE_THIS', 'auto');
ga('require', 'displayfeatures');
ga('set', 'campaignSource', 'Facebook');
ga('set', 'campaignMedium', 'Social Instant Article');
ga('set', 'title', ia_document.title);
ga('send', 'pageview');
</script>
YOUR_UID_REPLACE_THIS: Obviously put your personal GA code here.
campaignSource: Shows up as "Source" in GA.
campaignMedium: Shows up as "Medium" in GA.
ia_document.title: This uses the FB javascript variable for title.
So far for me the title gets successfully replaced for me with this code.
I had some very confusing experiences trying to test this with the "REAL-TIME" report on Analytics, where multiple posts were showing up with the same title, but overall I think it's working.
To test the 'title' field: REAL-TIME > BEHAVIOR
To test the 'Source' and 'Media' fields: REAL-TIME > TRAFFIC SOURCES
To see the traffic under the Acquisitions section of GA, go to Acquisitions > Source / Medium where it will be listed along with other sources (including several different ones from facebook).
FLAW (shared with all the other solutions) - Unfortunately my solution doesn't get IA traffic to show in the Acquisitions > Social > Facebook report. Even worse, it doesn't even show in the Acquisitions > Social report. Sadly, it gets lost in Acquisitions > Other, and for most of us, will mean a totally messed-up Social report overall.
The "Social" channel, like other channels, has a very precise set of source / medium values that it will filter into the different categories like Facebook.
Clearly, Facebook / Social Instant Article isn't on that list.
See This other StackOverflow post I made about this particular issue for more details. I will update my example here with whatever turns out to be the best practice.
Source for ia_document.title code: https://developers.facebook.com/docs/instant-articles/analytics
Most of the answers here mention hardcoding campaignSource and campaignMedium.
If you do this, your analytics will miss recording any specific campaigns using UTM tags.
Also, Google Analytics will treat all your traffic to Instant Article as Campaigns and numbers won't come under "Social" Traffic.
The solution is to set the referrer to https://i.facebook.com/.
Using this Google Analytics will treat your traffic is coming from Facebook and behave as if it is "Social" traffic.
To distinguish Instant Article Traffic from regular Facebook traffic you can filter on referrer or add custom dimensions.
Do remember to change XX-X and in the following snippet.
<!-- Google Analytics Tracker -->
<figure class="op-tracker">
<iframe src="" hidden>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-472932XX-X', 'auto');
ga('set', 'referrer', 'https://i.facebook.com/');
ga('send', 'pageview', {title: "<page-title>"});
</script>
</iframe>
</figure>
I ran into the same issue. What works is this here:
URL to source of analytics code
If your analytics code can be served directly from a specific URL, you
can specify the URL using the src attribute on the element.
<figure class="op-tracker">
<iframe src="https://www.myserver.com/trackingcode"></iframe>
</figure>
(Source: https://developers.facebook.com/docs/instant-articles/reference/analytics)
The only thing that I do not know now is: If I use the extended Analytics code How to pull the Page Title?
I'm using the solution below (a little bit different) and it's working perfectly.
<figure class="op-tracker">
<iframe>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-9999999-9', 'mydomain.com');
ga('require', 'displayfeatures');
ga('set', 'campaignSource', 'Facebook');
ga('set', 'campaignMedium', 'Social Instant Article');
ga('set', 'title', 'My post title here');
ga('send', 'pageview');
</script>
</iframe>
</figure>
I've done it using dimensions, I think it is better practice, especially if you are tracking leads.
<figure class="op-tracker">
<iframe>
<script>
(function (i,s,o,g,r,a,m) {i['GoogleAnalyticsObject']=r;i[r]=i[r]||function () {(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google- analytics.com/analytics.js','ga');
ga('create', 'ANALYTICS ID', 'auto');
ga('require', 'displayfeatures');
ga('send', 'pageview', {
'dimension3': 'Facebook Instant Article'
});
</script>
</iframe>
</figure>
Then create dimension3 in GA's admin and create a segment where dimension3 has the 'Facebook Instant Article' value.
This way you can keep the campaign source & medium for their actual purpose.
Thanks for all the previous answers and solutions. They inspired me to summarize my learnings and solution in this public gist.
I am using Google's global site tag (gtag.js) to track the pageview and successfully attribute it to the Social medium in Google Analytics.
The following snippet illustrates what worked for me. Please note, we use jinja templates (with Nunjucks) to add the necessary and missing data (eg. {{googleAnalytics}}).
<figure class="og-tracker">
<iframe>
<script async src="https://www.googletagmanager.com/gtag/js?id={{googleAnalytics}}"></script>
<script type='text/javascript'>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{{googleAnalytics}}', {
'page_title': '{{articleTitle}}',
'page_path': '/{{articlePath}}', // The path portion of location. This value must start with a slash (/) character. (optional, but recommended)
'page_location': '{{articleUrl}}', // page's URL (optional, but recommended)
'campaign': {
'source': 'ia.facebook.com', // utm_source
'medium': 'referral', // utm_medium
'name': 'Facebook Instant Articles' // utm_campaign
},
});
</script>
</iframe>
</figure>
I embedded it like this in my feed
<figure class="op-tracker">
<iframe src="https://www.example.com/fia-google-analytics-tracking.html"></iframe>
</figure>
Implementation Docs
https://developers.facebook.com/docs/instant-articles/analytics
https://developers.facebook.com/docs/instant-articles/reference/analytics
https://developers.google.com/analytics/devguides/collection/gtagjs/pages