I need to add Facebook tracking code to a specific page in Drupal 7. I was wondering if there was a way to add the code to the html.tpl.php file where there is some code that calls for it to be added to a specific page.
I tried adding the code to a block which would live on the page, but the code is being stripped out (disable rich text, add code and save)
This is the code I am trying to add
<!-- Facebook Conversion Code for Ecuador landing page leads -->
<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', '6026961635755', {'value':'0.00','currency':'USD'}]);
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=6026961635755&cd[value]=0.00&cd[currency]=USD&noscript=1" /></noscript>
After I save it this is what I am getting
<!-- Facebook Conversion Code for Ecuador landing page leads --><noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=6026961635755&cd[value]=0.00&cd[currency]=USD&noscript=1" /></noscript>
Facebook Tracking Pixel module provides an easy to use interface that enables you to include the conversion code to the page(s) you select.
It applies the 'new' Facebook pixel code, the one that Facebook recommends using.
Drupal project page:
https://www.drupal.org/project/facebook_tracking_pixel
When you create a static block for text format (drop-down bellow body field) select "plain text" so drupal shouldn't filter out some tags. Under visibility settings you can specify on what pages this block should be shown. For more powerful mechanism for specifying on what page to display the block look for "context" module.
Related
Accepting image uploads from a paste into the browser window is much easier than traditional file upload form inputs and even the newer style drag 'n' drop file uploads.
How do I implement it?
Here's an example PHP/JavaScript page that accepts drag 'n' drop image uploads. It's not dependent on PHP though - you could adapt it quite easily to work with another server-based language. This code was based on a snippet I found on jsFiddle by someone called Nick.
This is a full page - so you should be able to copy the code below and put it in a file on your web-server as-is (if you're not running PHP then you'll need to update the PHP code at the top or point the form to your own form handler script).
<?php
if (!empty($_POST)) {
// Handle the POSTed data here - the image is actually base64 encoded data in
// the $_POST['myTextarea'] variable which you can run through the base64_decode()
// function and then write to a file
$pos = strpos($_POST['myTextarea'], 'base64,');
$encoded = substr($_POST['myTextarea'], $pos + 7);
$raw = base64_decode($encoded);
// Show the base64 encoded $data - use the $raw variable when writing to a file
var_dump($_POST);
exit;
}
?>
<!DOCTYPE html >
<html>
<body>
<h1>File upload using paste</h1>
<p>
You can paste an image, which is on your clipboard, into this window and it will appear below.
If you use Windows you can press <b>PrtScr</b> to get a screenshot on your clipboard. Then
press <b>CTRL+V</b> to paste it into this document.
</p>
<!-- PUT THE ADDRESS OF YOUR FORM HANDLER SCRIPT IN THE ACTION ATTRIBUTE -->
<form action="" method="post">
<div id="form-elements-container">
<input type="text" value="An example text input..." name="myTextInput"><br />
<input type="submit" value="Submit form"><br />
</div>
</form>
<!-- THIS IS WHERE THE IMAGE THUMBNAILS WILL APPEAR -->
<div id="images-container"></div>
<script>
counter = 0;
document.body.onpaste = function (e)
{
// use event.originalEvent.clipboard for newer chrome versions
var items = (e.clipboardData || e.originalEvent.clipboardData).items;
// Find pasted image among pasted items
var blob = null;
for (var i=0; i<items.length; i++) {
if (items[i].type.indexOf("image") === 0) {
blob = items[i].getAsFile();
}
}
// Load image if there is a pasted image
if (blob !== null) {
var reader = new FileReader();
reader.onload = function(e)
{
// Create a new image object from the pasted data
var img = new Image();
img.src = e.target.result;
img.width = 128;
img.height = 128;
img.style.margin = '5px';
// Append the file to the document
document.getElementById('images-container').appendChild(img);
// Add a new textarea to the form
var textarea = document.createElement('textarea');
textarea.name = 'myTextarea_' + counter++;
textarea.value = img.src;
textarea.style.width = '200px';
textarea.style.height = '200px';
document.getElementById('form-elements-container').appendChild(textarea);
};
reader.readAsDataURL(blob);
}
}
</script>
</body>
</html>
I got website with facebook login, anatitycs and also I added basic facebook pixel.
[1] https://i.imgur.com/HrfCMlX.png "Facbook App snip"
Suddenly I noticed that the Facebook Pixel Helper Chrome extension shows that there are 2 pixels found on the site. All the time there was only one (PageView)
Where did the other (fb_page_view) come from?
[2] https://i.imgur.com/b9tJfYd.png "Facebook Pixel Helper snip"
I looked at the results of both and each of them shows different statistics
Facebook Pixel code in my page:
<!-- 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', '7095...'); // Insert your pixel ID here.
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=7095...&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->
Why Chrome FB Pixel Helpers shows two different pixels?
I'm expecting only one pixel - PageView, that I added (code above)
You had autoLogAppEvents set to true in your initialization of the Customer Chat SDK (which itself is just an extension of the “standard” JS SDK), and that causes it to do its own tracking, using the app id as pixel id.
I am trying to set up an extension for firefox, chrome, safari and internet explorer, I am using crossrider.
Basically I want to display a browser action when clicked displays a popup containing an input text with the current page url and a button that will open a new tab to another url passing the url as a parameter.
Here is what I did based on what I found in the documentation ;
extension.js :
appAPI.ready(function($) {
appAPI.message.addListener(function(msg) {
if (msg.request === 'getUrl'){
appAPI.message.toPopup({url:location.href});
}
});
});
background.js :
var activeTabUrl;
appAPI.ready(function($) {
appAPI.browserAction.setResourceIcon('logo-19.jpg');
appAPI.browserAction.setBadgeText('extn', [255,0,0,125]);
appAPI.browserAction.setTitle('Add Url to Site');
appAPI.browserAction.setPopup({resourcePath:'pin.html', height: 300, width: 300});
});
pin.html :
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script type="text/javascript">
function crossriderMain($) {
activeTabUrl = null;
appAPI.message.addListener(function(msg) {
if (msg.url) {
activeTabUrl = msg.url;
$('#url').val(activeTabUrl);
if(activeTabUrl){
$('#addurl').prop('disabled', false);
}
}
});
appAPI.message.toActiveTab({request:'getUrl'});
$('#addurl').click(function(){
var fullUrl = 'http://my.site.com/addurl?url=' + activeTabUrl;
appAPI.openURL(fullUrl, "tab");
});
}
</script>
</head>
<body>
<input id="url" name="url" readonly="true" type="text"/>
<input id="addurl" type="submit" value="Add Url" disabled/ >
</body>
</html>
Sometimes the field containing the url is not filled, it does not happen on a specific page, for the same page, sometimes it will be displayed, sometimes not. I can't pinpoint a specific cause.
Am I doing something wrong ?
The code looks fine, other than a minor point of declaring activeTabUrl in the pin.html code and not the background.js code as they are different scopes.
From experience, the only thing I can think of that may be causing the issue is that sometimes browsers return the message response before the message listener has initialized. To mitigate this, in the pin.html code, add a delay to sending the message requesting the URL, as follows:
setTimeout(funtion() {
appAPI.message.toActiveTab({request:'getUrl'});
}, 0);
[Disclosure] I am a Crossrider employee
Full disclosure - I'm not a programmer, but I'm the only one in my organisation who might be able to get this working. Can anyone help with the following please?
I'm trying to use Facebook's conversion pixel code to track certain button clicks on our site. Facebook's developer docs give the following instructions for tracking in-page events:
After the base code snippet is installed, you can track in-page actions, such as clicks on a button, by making a _fbq.push('track') call for the conversion pixel through registering different event handlers on an HTML DOM element. For example:
function trackConversionEvent(val, cny) {
var cd = {};
cd.value = val;
cd.currency = cny;
_fbq.push(['track', '<pixel_id>', cd]);
}
<button onClick="trackConversionEvent('10.00','USD');" /
The problem I'm facing is it's not clear to me what Facebook means by "the base code snippet". My initial assumption was that it's the conversion pixel code they give you to install in the head section of the page, i.e.
<!-- Facebook Conversion Code -->
<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', '<pixel_id>', {'value':'0.00','currency':'USD'}]);
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=<pixel_id>&cd[value]=0.00&cd[currency]=USD&noscript=1" /></noscript>
However, if I install the above on our page it loads/fires the conversion pixel code each time the page loads rather than on the button click (presumably because it's typically used on a thank you/confirmation page). Can anyone shed any light on this for me? I believe I understand where to position the onClick code to associate it with a button click but I'm struggling to understand where I need to position the trackConversionEvent code and what the base code snippet is. Through testing, I know that removing the following lines from the larger code snippet stops the pixel from loading:
window._fbq = window._fbq || [];
window._fbq.push(['track', '<pixel_id>', {'value':'0.00','currency':'USD'}]);
but I'm not sure if that's actually what I need to do. Do I for example, need to replace those two lines with the trackConversionEvent code so that the pixel doesn't fire when the page loads but the onClick code actually functions instead when the button is clicked?
Many thanks in advance for any pointers or suggestions.
This should work, I.ve just tested on a blog based on WP.
<!-- Facebook Conversion Code -->
<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 || [];
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=<pixel_id>&cd[value]=0.00&cd[currency]=USD&noscript=1" /></noscript>
<!-- End Of Facebook Conversion Code -->
This is the event handler that you could bind to any button, link or any DOM element::
function trackConversionEvent(val, cny) {
var cd = {};
cd.value = val;
cd.currency = cny;
_fbq.push(['track', '<pixel_id>', cd]);
}
<button onClick="trackConversionEvent('10.00','USD');"
I am setting up a DFP for multiple site, we have a set of line items and for each of it's creatives, the current click through is going to example.com (our own .com site), but since we are running multiple TLDs, we also want the click through URL to change accordingly. For example, when the ads is being displayed in the .jp, the click through should go to .jp.
In the DFP API reference, there's a function to change the click-through URL: http://support.google.com/dfp_premium/bin/answer.py?hl=en&answer=1650154&expand=adslot_details#setClickUrl
But in order to change our click-through URL, we also need to know what's the current URL. Example case: we need to get http://www.example.com/products/1 from the DFP adSlot in order to change it to http://www.example.jp/products/1.
I ran through trial and error using chrome web JS console and found a getClickUrl() function in the adSlot class, but it keeps returning empty string, for example:
googletag.defineSlot("/1234/Test_300x250", [300, 250], 'div-1').getClickUrl();
googletag.defineSlot("/1234/Test_300x250", [300, 250], 'div-1').addService(googletag.pubads()).getClickUrl();
Anyone have experience with this?
If you have control over the creative, I think it would be a lot easier to do by passing custom variables. You use the setTargeting method to pass a custom variable. So your client-side code to display the ad would look like this:
googletag.defineSlot("/1234/Test_300x250", [300, 250], 'div-1').setTargeting('region','jp');
And then in your HTML creative you use a pattern macro to replace part of the click-through URL.
<a href="http://www.example.%%PATTERN:region%%">
<img src="http://www.example.%%PATTERN:region%%/image.jpeg">
</a>
And DFP will replace the macro with whatever value you pass via setTargeting.
I haven't found a super simple way to do this - but it is possible.
Basically you can override an internal function in DFP and capture the content of the ad (and the URL) by getting into the DOM of the iframe.
Here is an example which should alert the URL of the ad (I've only tested this in chrome, so it may need tweaking to work in multiple browsers)
<html>
<head>
<title>DFP test</title>
<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
<script type="text/javascript">
googletag.cmd.push(function() {
var slot1 = googletag.defineSlot('/12345678/Test_300x250', [300, 250], 'div-gpt-ad-1340819095858-0').addService(googletag.pubads());
slot1.oldRenderEnded = slot1.renderEnded;
slot1.renderEnded = function(){
alert(document.getElementById('div-gpt-ad-1340819095858-0').getElementsByTagName('iframe')[0].contentWindow.document.getElementsByTagName('a')[0].href.replace(/^.*&adurl=/,''));
slot1.oldRenderEnded();
};
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
</head>
<body>
<div id='div-gpt-ad-1340819095858-0' style='width:266px; height:115px;'>
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.display('div-gpt-ad-1340819095858-0');
});
</script>
</div>
</body>
</html>
If you are using jQuery its a bit nicer to use something like:
$(adUnit).find('iframe:first').contents().find('a')
Any questions let me know.