New facebook conversion pixel on one page site (exclude audience) - facebook

complicated situation, i'll try to be as clear as possible.
I have a one page site with a contact form, index.html.
The page has the following remarketing facebook pixel:
<!-- 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','//connect.facebook.net/en_US/fbevents.js');
fbq('init', '123456789');
fbq('track', "PageView");</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=123456789&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
When a user submit the form, and i get a response from the ajax, I load an external html file to an iframe on my page (conv.html).
that external html file has a conversion code in it:
<!-- 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','//connect.facebook.net/en_US/fbevents.js');
fbq('init', '123456789');
fbq('track', "PageView");
fbq('track', 'Lead');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=123456789&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
which is basically the same, only with a 'Lead' track event.
as you can see im using 'PageView' on both pixels in order to exclude by the url audience who has submited the form (i need that in addition to the lead event), the thing is, that when i load the second pixel, i get an error saying that the pixel was fired more than once.
im not sure if that any matters, but we have also applied a rule to the second pixel to fire only on page url that contains 'conv.html' (the page that is loaded to my iframe).
i have been look around on google for a solution, but couldnt find anything.
im trying to figure out if thats even possible on a one page site.
any ideas?

Related

Add external code to npm run build for index.html

I wanna add a Tracking Code from FB to my VueJS LandingPage.
But i'm not sure where i have to place the code snippet?
<!-- 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', 'xxxxxx');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1"
src="https://www.facebook.com/tr?id=xxxxxx&ev=PageView
&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->
If i copy this code by myself to the index.html it work. but where i have to place this snippet that it will copy in my index.html build?
If you use Vue CLI 3, you should have a src folder and a public folder. The public folder contains the index.html that is used to generate the index.html-file you see in the dist folder after building. Just add your tracker to that and it should be included in your built version as well.
You can also copy the tracker script to the mounted hook of App.vue, or whatever you use as your main component. Since your application will do nothing useful anyway when javascript is disabled, there is little reason to track that as well.

Facebook Pixel Tracking Installation in Magento 1.9

I have been trying to implement the new Facebook Tracking Pixel to track conversion in a Magento store.
I have the base pixel code in the head tags
<!-- 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','//connect.facebook.net/en_US/fbevents.js');
fbq('init', 'PIXELID');
fbq('track', "PageView");</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=PIXELID&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
I have then found the success.phtml file within the themes directories as added the following code as per my understanding when reading the Facebook documentation I have found;
<?php
//Get Order Number & Order Total
$order = Mage::getModel('sales/order')->loadByIncrementId(Mage::getSingleton('checkout/session')->getLastRealOrderId());
$amount = number_format($order->getGrandTotal(),2);
?>
<script>
// Purchase
// Track purchases or checkout flow completions (ex. landing on "Thank You" or confirmation page)
fbq('track', 'Purchase', {'value': '<?php echo $amount; ?>', 'currency': 'GBP'});
</script>
<noscript>
<img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?id=PIXELID&ev=Purchase&cd[value]=<?php echo $amount; ?>&cd[currency]=GBP&noscript=1"/>
</noscript>
The above code isn't sending any data at all upon placing an order via a Facebook ad click. Can anyone shed any light as to what I am doing wrong?

Facebook conversion tracking values for predetermined events

Can the {value: '0.00'} parameter be used with all 9 predetermined Facebook events for conversion tracking? For example, I am trying to say that a Search is worth 2.30. This is not a monetary value however, so I was leaving out the currency. Will this show up in Facebook's system?
<!-- 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','//connect.facebook.net/en_US/fbevents.js');
fbq('init', '924082587688070');
fbq('track', "PageView");
fbq('track', 'Search', {value: '2.30'});
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=924082587688070&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
As far as I have read, this is valid for all the facebook standard events. If you do not supply a currency I am pretty sure facebook will use the currency you have registered for you account.

Facebook share button is scraping a different page's info

I have this code for a Facebook custom share button:
<script>
function fbs_click() {
u=location.href;
t=document.title;
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');
return false;
}
</script>
<a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" onclick="return fbs_click()" target="_blank" class="fb_share_link">
<img src="../../../../../image/photography/pics/fb-share.png" alt="Share this!" width="57" height="21" border="0">
</a>
This is supposed to scrape info from the page but for some reason it doesn't and it gets redirected to the site's main index.html.
I've tried adding facebook og tags and the extra code in the but to no avail.
Any thoughts?
EDIT: Having been told that the share function has been deprecated, I tried to do this with the feed dialog:
<a href="https://www.facebook.com/dialog/feed?link=http://www.travel2italy.com/Travel/Italy/Company/photography/index.html&picture=http://www.travel2italy.com/image/photography/pics/homepage/florence1-home.jpg&name=travel2italy.com&caption=Photo%20Gallery&description=A%20Beautiful%20photo%20of%20Florence&redirect_uri=http://www.travelive.com" target="_blank">
<img src="../../../../../image/photography/pics/fb-share.png" alt="Tweet this!" width="57" height="21" border="0">
</a>
but when i click on the link it takes me to facebook and says an error occured, wth?!:(
EDIT 2:
I wasn't aware that the app_id argument is needed, signed up for an app and it works now, but it strips away the #section I have at the end of the link (i want it to link to a specific slide in a slideshow)
EDIT 3:
Now some of the share buttons using the sharer do seem to work but don't pull all the photos off the page for me to choose the one i want, this is insane-o, could it just be a caching issue?

How to embed iframe in facebook?

An associate of mine maintains a facebook page for the company we work for.
The company wants a widget to put on their facebook to allow users to enter their email and subscribe to our newsletter.
The associate who does facebook is not a programer so he asked me to build something.
I made a small page that uses jquery and ajax to allow you to enter your email address and it sends it to our server using ajax so you never leave the page you are on.
We want to embed this page on facebook using an iframe.
First we just tried entering the iframe, which did not work,
then we found a tutorial and tried to embed the iframe the way it says like this:
<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Let's see that iframe....</a>
<div id="outside_location"></div>
<fb:js-string var="link_1">
<fb:iframe height="500" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%; border:none" src="http://URL-TO-OUTSIDE-LOCATION"></fb:iframe>
</fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>
It seems like facebook is appending things to our variables so link_1 becomes something like a325461252_link_1
Then we get a JS error like this:
Uncaught reference error:
a325461252_link_1 not defined
But every once in a while it will work but 99% of the time we get this error.
I have never built anything for facebook before, I am not sure there is is some sort of facebook way of doing things.
Is there something I am doing wrong? I have done many google searches trying to find answers and everything I find varies from "facebook does not allow iframes" to "facebook recommends iframes" so I really don't know what to think.
Check to see that your application is setup as an FBML applicaiton and not an Iframe application. An iframe application will not expand fb:... tags by default. Also inspect the DOM (Chrome or Firebug) to see if the Dom is getting changed when you click the link, but the iframe just isn't visible.
I just tested the following and it worked:
<hr/>
<a onClick="outside_location.setInnerFBML(location_two);" style="cursor: pointer;">Other IFrame Location</a>
<div id="outside_location" width="540" height="270" >
<fb:iframe width="540" height="270" frameborder="1" src="http://www.yahoo.com" />
</div>
<fb:js-string var="location_two">
<fb:iframe width="540" height="270" frameborder='1' src='http://www.google.com' />
</fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>
If all you wanted to do is add an iFrame to your application canvas then you can simply use this line:
<fb:iframe width="720" height="570" frameborder="1" src="http://www.yahoo.com" />
Or just change your application from an FBML canvas application to an iFrame application and point your Canvas Callback and Connect URL to your current page or page's directory. If you aren't using Facebook's API or FBML elements then you may not need to be in an FBML application at all.
BTW: To programmatically add iframes in Facebook you can use JavaScript like so:
<script type="text/javascript">
var Iframe = document.createElement('iframe');
Iframe.setStyle('smartsize','true');
Iframe.setStyle('frameborder','yes');
Iframe.setStyle('scrolling','no');
Iframe.setStyle('include_fb_sig','true');
Iframe.setStyle('width','500px');
Iframe.setStyle('height','500px');
Iframe.setSrc("http://www.msn.com");
document.getRootElement().appendChild(Iframe);
</script>
Good Luck!