Make Facebook pixel fire on click event - javascript

I'm currently trying to follow this FB resource about tracking on page events with conversion pixels.
If I'm understanding correctly, the gist of it is to paste my base pixel code in the header, then add the tweaked "example code" underneath it.
Here is our base pixel code:
<!-- Facebook Conversion Code for Cool Company LLC -->
<script>(function() {
var _fbq = window._fbq || (window._fbq = []);
if (!_fbq.loaded) {
var fbds = document.createElement('script');
fbds.async = true;
fbds.src = '//connect.facebook.net/en_US/fbds.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(fbds, s);
_fbq.loaded = true;
}
})();
window._fbq = window._fbq || [];
window._fbq.push(['track', '6029151989664', {'value':'0.00','currency':'USD'}]);
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=6029151989664&cd[value]=0.00&cd[currency]=USD&noscript=1" /></noscript>
And here is the "example code" they say to use for tracking in-page events:
function trackConversionEvent(val, cny) {
var cd = {};
cd.value = val;
cd.currency = cny;
_fbq.push(['track', '<pixel_id>', cd]);
}
<button onClick="trackConversionEvent('10.00','USD');" />
And finally the question: we want the in-page event to be hitting the submit button on the rightside subscription widget at http://wearablestylenews.com/
To do this, do I just change the last line of example code to this?
<input id="ykfmc-submit_0-2f6a0367b1" onClick="trackConversionEvent('0.00','USD');" />
And do I just put it after the base code in the header?
Thanks guys, I really appreciate your help!

Related

Find and remove scripts from html page with jQuery script

I want to remove annoying ads from a web page, that on every click on link opens a link (iframe), and I think these are the scripts that I think I have to remove from the page:
<script type="text/javascript">
window.onload = function() {
var oi, aframes;
aframes = document.getElementsByTagName("iframe");
for (oi = 0; oi < aframes.length; ++oi) {
var ns = aframes[oi].getAttribute("data-src");
if(ns != undefined && ns != '') aframes[oi].src = aframes[oi].getAttribute("data-src");
}
};
</script>
<script>
window.url = "http://xml.adventurefeeds.com/redirect?feed=59533&auth=1IHLhM&subid=15067&url=http%3A%2F%2Farenabg.com%2F%3Fq%3Dbest%2Bdeals&query=torrent%20%2C%20streaming%20%2C%20download%20%2C%20movie%20%2C%20games%20%2C%20gaming%20%2C%20binary%20option%20%2C%20gambling%20%2C%20betting%20%2C%20sport&default_url=http%3A%2F%2Fviralture.com";
window.arrClicks = [1, 3];
</script>
<script src="http://worldsearchpro.com/popUnderResources/popUnderAdvan.js"></script>
Want to use jQuery script to do that because I want to use the script in violentmonkey as userscript. The problem is, that I don't know how to find/select with jQuery exactly these scripts. I would really appreciate if anyone can helps me to remove these three scripts.

Facebook ad tracking without noscript portion

The facebook implementation for the custom audience pixel is written in this form:
<script>(function() {
var _fbq = window._fbq || (window._fbq = []);
if (!_fbq.loaded) {
var fbds = document.createElement('script');
fbds.async = true;
fbds.src = '//connect.facebook.net/en_US/fbds.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(fbds, s);
_fbq.loaded = true;
}
_fbq.push(['addPixelId', '###########']);
})();
window._fbq = window._fbq || [];
window._fbq.push(['track', 'PixelInitialized', {}]);
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?id=###########&ev=PixelInitialized" /></noscript>
We want to deploy this using a tag manager but ours only supports javascript only not HTML. I'm wondering how important the noscript portion of this is? Would the only drawback be that we would be just losing a certain portion of our audience, namely those on devices that do not support javascript or those who disabled javascript themselves?
The noscript portion is a fallback, yes. But if you can't add it with a tag manager, why not simply place the img tag <img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?id=###########&ev=PixelInitialized" /> on the page somewhere, e.g. just at the bottom of the body tag.

Why does calling a function onclick not work all the time in Chrome and FF, but works in IE?

I have the below code:
<HTML>
<HEAD>
<SCRIPT>
function myFunction(atlasTrackingURL)
{
var atlasURL = atlasTrackingURL;
if (!atlasURL) return;
//Build a cache busting mechanism
var timestamp = new Date();
var queryString = "?random=" + Math.ceil(Math.random() * 999999999999) +
timestamp.getUTCHours() + timestamp.getUTCMinutes() +
timestamp.getUTCSeconds();
//Build the final URL
atlasURL = atlasURL + queryString;
if (!document.getElementsByTagName || !document.createElement
|| !document.appendChild)
{return false;}
else
{ //Activate the JACTION call
var script = document.createElement("script");
script.type = "text/javascript";
script.src = atlasURL;
document.getElementsByTagName("head")[0].appendChild(script);
return true;
}
}
</SCRIPT>
</HEAD>
<BODY>
Test - Click Me
</BODY>
</HTML>
It works in Internet Explorer every time, but rarely works in Chrome and Firefox. Why would this be?
Can these browsers not handle a function onClick very well? Are there any other options I can take?
I am trying to help a client figure out why one of their tracking tags are not firing off all the time on click in these browsers.
Thanks,
You've got some kind of browser-dependent race condition going on, as Musa pointed out.
Try hiding the link initially, waiting for the document to load, and then adding the onclick attribute and revealing the link with javascript.
So, for example, change the link HTML to something like:
<a id="microsoft-link" href="http://www.microsoft.com" style="display: none;">Test - Click Me</a>
And add in your javascript, below the myFunction(), something like:
document.addEventListener('DOMContentLoaded', function(){
var link_elem = document.getElementById("microsoft-link");
link_elem.onclick = function() {
myFunction('http://view.atdmt.com/jaction/adoakb_PiggybackJSTest_1');
};
link_elem.style.display = 'inherit';
});
jsfiddle -- http://jsfiddle.net/m8VTy/3/
edit: I realized I may be misinterpreting what you're trying to do. What exactly is myFunction() supposed to accomplish ?

Google Analytics Virtual Pageviews not being recorded

We're having an issue with Virtual Pageviews not being recorded in Analytics.
We have the following tracking code at the bottom of the page (not the async version)
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-3']);
_gaq.push(['_trackPageview']);
(function ()
{
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
And for the individual virtual pages we're trying to track we have the following code:
$(".contact_sub a").click(function ()
{
//instantiate it
var pageTracker = _gat._getTracker("XX-XXXXXXXX-1");
//get company name
var companyName = $(this).parents(".resultContainer").find("H2").text();
//track this click event as a page view
pageTracker._trackPageview("/click-tracking/company/" + companyName + ".html");
$(".window_" + $(this).attr("rel")).dialog({
modal: true,
width: "350px"
});
return false;
});
In Firebug NET tab we can see the correct call be sent out to google and the Image is returned. The parameters being sent out are right too.
Problem is nothing is showing up in Analytics. We've done this for another project and it worked just fine.
I just noticed now that in the two lines that deal with getting an instance of the tracker there's one tiny difference and that's the last number. One is a 1 and the other is a 3. Not sure why that is that way.
Any help would be great.
Thanks
Jacques
The getTracker needs your website ID, as specified in google analytics. They should be the same basicly, those pageview are now being registered at another website. So just change the 3 in a 1.

Google Analytics pageTracker is not defined?

Little bit confused... I am trying to track mailto links being clicked, but constantly 'pageTracker is not defined' is shown. I have the following code just before my end body tag ()
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-000000']); // This is my account number, I have added the zeros in this editor
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
Then I am using this in my mailto links
hello#mydomain.co.uk
I cannot see why its not working? Any help would be appreciated
The new Async Google Analytics code (that you're using) works a bit differently than the non-Async. Any time that you want to call a method on pageTracker you simply push a "message" onto the "_gaq" queue.
hello#mydomain.co.uk
Although, tracking a mailto link may work better as an event:
hello#mydomain.co.uk
For more info take a look at the Async Tracking Users Guide.
We can also add:
//mantain syntax between old and new asynch methods
//http://code.google.com/apis/analytics/docs/tracking/asyncUsageGuide.html#Syntax
function _pageTracker (type) {
this.type = type;
this._trackEvent = function(a,b,c) {
_gaq.push(['_trackEvent', a, b, c]);
};
}
var pageTracker = new _pageTracker();
in new code to mantain old code in pages.
Here is the code :
onClick="_gaq.push(['_trackEvent', 'pdf', 'download', '/pdf/myPdf'])">myPdf</a>
I needed a way to tack downloading PDFs too and heres what I used:
Download Brochure
For more info about _trackEvent, heres the API Doc page

Categories

Resources