Saltar al contenido
Codifíca.me | Desarrollo web | Programación

Cómo insertar el píxel de seguimiento de Facebook

30 enero, 2015

Deprecated: Function create_function() is deprecated in /home/nekdyruf/public_html/codi/wp-content/plugins/wp-syntax/geshi/geshi.php on line 4751

Si has llegado hasta aquí ya sabrás que Facebook Ads te permite crear un píxel de seguimiento de tus campañas de anuncios para tu ecommerce.

En esta entrada veremos cómo insertar el píxel de seguimiento de Facebook para Opencart ya que no he visto como hacerlo en ninguna web de habla hispana, pero valdría para cualquier ecommerce. Creo que puede ser interesante orientar a la personas que utilicen Opencart a poner el código de seguimiento en su tienda.

Para lograrlo vamos a hacerlo en dos partes que te resumo a continuación, primero configuraremos una campaña de Facebook Ads en la que veremos tanto el editor del pixel, cómo la segmentación de anuncios, y el pixel de facebook, después obtendremos el código de seguimiento y como insertarlo en tu ecommerce, que en este caso será tienda online tipo Opencart

Configurar campaña de Facebook Ads

Primero, antes de ponernos con el código de seguimiento tenemos que conseguir el código de la página de Facebook Ads.

Para esto tienes que configurar una campaña en el administrador de anuncios de Facebook.

Sería aquí.

editor de pixel

Como ya habrás visto Facebook nos da la opción de crear diferentes tipos de anuncios, pero en esta caso solo nos interesa el tipo anuncio para atraer personas a tu web y que realicen una compra, por lo que vamos a seleccionar el botón de comprar.

Después crearemos el anunció con su titulo y datos, y por último cogeremos el pixel de seguimiento de conversión que hemos hecho en el editor de píxel que nos da Facebook, dónde le pondremos un nombre.

El pixel de facebook

Cómo es una tienda online es obvio que necesitamos elegir el tipo de píxel pago, ya que será el que nos interesa para poder realizar el seguimiento de las personas que vienen de este anuncio y realizan el pago.

Segmentación de los anuncios en Facebook

Facebook Ads nos permite segmentar el público al que quieres que llegue tu anuncio, eso reducirá considerablemente el alcance del anuncio pero mejorará considerablemente el público destino.
Al igual que Adwords tambien te permite segmentar los anuncios para las distintos target:

  • Puedes seleccionar la edad, idioma y sexo de segmentación.
  • Puedes seleccionar la ubicación.
  • Puedes seleccionar a los usuarios destino, eligiendo el/ los usuarios que verán los anuncios
  • Puedes seleccionar de una lista de email, como puede ser mail chimp o benchmark los emails de las personas que verán tu anuncio

Insertar el código de seguimiento en Opencart

Cómo ya habrás sospechado necesitamos insertar el código de seguimiento píxel de Facebook justo cuando se realiza la compra, cuando la compra se ha realizado correctamente, así estaremos seguros cuales son los usuarios que han comprado en nuestra web viniendo de Facebooks Ads, y saber si la campaña está saliendo correctamente.

Para esto tendrás que insertar el código de seguimiento en el archivo success.tpl de tu ecommerce.

El código es el siguiente, que en tu caso te lo dará la página de Facebook, así que tendrá otro código de seguimiento:

 
<!-- Facebook Conversion Code for clientes desde el face a web -->
<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', 'XXXXXXXX', {'value':'0.01','currency':'EUR'}]);
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=XXXXXXXXXX&amp;cd[value]=0.01&amp;cd[currency]=EUR&amp;noscript=1" /></noscript>

El tuyo será similar a este:

codigo pixel

Ops!, pues no me quiero liar que yo de código no entiendo, pues fácil te lo doy gratis hecho. Solo tienes que ayudarme a promocionar un poco este post, con una acción social y yo te hago el trabajo sucio 🙂

[sociallocker id=”4346″]

Solo tienes cambiar el código de seguimiento por el tuyo, en los DOS sitios que pone XXXXXXXXX.
Haz una copia de este archivo antes, catalog/view/theme/default/template/common/success.tpl
¿Ya tienes la copia? Ahora edítalo, y cámbialo por este, sustituyendo las XXXXXX por tu código de seguimiento como te acabo de indicar.

<?php echo $header; ?>
<?php if (isset($this->request->get['route']) && $this->request->get['route'] == 'checkout/success') { ?>
 
<!-- Facebook Conversion Code for clientes desde el face a web -->
<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', '6011533719452', {'value':'0.01','currency':'EUR'}]);
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=6011533719452&amp;cd[value]=0.01&amp;cd[currency]=EUR&amp;noscript=1" /></noscript>
 
<?php } ?>
 
<?php echo $column_left; ?><?php echo $column_right; ?>
<div id="content"><?php echo $content_top; ?>
  <div class="breadcrumb">
    <?php foreach ($breadcrumbs as $breadcrumb) { ?>
    <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
    <?php } ?>
  </div>
  <h1><?php echo $heading_title; ?></h1>
  <?php echo $text_message; ?>
  <div class="buttons">
    <div class="right"><a href="<?php echo $continue; ?>" class="button"><?php echo $button_continue; ?></a></div>
  </div>
  <?php echo $content_bottom; ?></div>
 
<?php echo $footer; ?>

[/sociallocker]

Perfecto, hecho esto, ahora podrás realizar un análisis mucho más completo del resultado de tus anuncios, conocer que personas se interesan y saber si finalmente convierten tus anuncios en este medio, o empezar a valorar otros medios de inversión.

Ahora me toca a mi, si te he sido útil esta entrada me gustaría que me dejases un +1 en Google plus, o bien un comentario! Gracias!

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Comentarios (6)

Gran aporte amigo, aun no lo he puesto en práctica pero me gustaria saber si es valido para versiones de Opencart 2.0 en adelante.

Responder

Retroalimentando este post, porque a pesar de todo me diste una pista para encontrar la solución en la versión 2.0 de Opencart, encontré que el archivo a modificar es header.tpl ubicado en la ruta aquí indicada (catalog/view/theme/default/template/common/header.tpl), simplemente copia el script de tu Pixel de Facebook dentro de las etiquetas y eso es todo.
Verifica que tu Pixel en tu tienda Opencart instalando la extension Pixel Helper en tu navegador Chrome.
Ojalá sea de ayuda para otros porque yo me llevé días buscando como hacerle.

Responder

Muchas Gracias Jorge Luis por la aportación.
Todavía no lo he probado en Opencart 2.0 igualmente gracias por el aporte seguro que es útil para los que lo estén buscando, que de Opencart no hay muchos desarrolladores.

Responder

Pixel de facebook

Buenos tardes,

te comento que visualicé tu post sobre instalar el Pixel de Facebook en Opencart.

Mi duda es la siguiente, quiero que se registre en el pantalla inicial o home y al finalizar la compra. Al finalizar la compra con que vaya al success.tpl y copie el fragmento que me da Facebook tiene que ir bien… pero si quiero que sea en la home, ¿añado el script al header? Como es común a varias paginas no se si es lo correcto.
Un saludo, Dani.

Responder

Buenas,

Creo que el código que envían ahora es parecido al código que te pongo a continuación, desglosado se pondría poner parecido a esto que te pongo a continuación:

Esto en el header.tpl

Facebook Pixel Code

!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\', \'XXXXXXXXX\');
fbq(\'track\', \"PageView\");


Standard Events
Add standard events to your code to track specific types of actions on your website. Copy the code for the type of event you want to measure, and paste it below the pixel code on the relevant page within a tag. Keep in mind standard event codes are case-sensitive. Learn more about conversion tracking.

Esto en el product.tpl

// ViewContent
// Track key page views (ex: product page, landing page or article)
fbq(\'track\', \'ViewContent\');

Esto en el search.tpl

// Search
// Track searches on your website (ex. product searches)
fbq(\'track\', \'Search\');

Esto en el catalog/view/javascript/common.js

function addToCart(product_id, quantity) {
AQUÍ

// AddToCart
// Track when items are added to a shopping cart (ex. click/landing page on Add to Cart button)
fbq(\'track\', \'AddToCart\');

Esto en el catalog/view/javascript/common.js
function addToWishList(...) {
AQUÍ

// AddToWishlist
// Track when items are added to a wishlist (ex. click/landing page on Add to Wishlist button)
fbq(\'track\', \'AddToWishlist\');

Esto en el checkout.tpl

// InitiateCheckout
// Track when people enter the checkout flow (ex. click/landing page on checkout button)
fbq(\'track\', \'InitiateCheckout\');

Esto en el payment_method.tpl (no lo utilizo)

// AddPaymentInfo
// Track when payment information is added in the checkout flow (ex. click/landing page on billing info)
fbq(\'track\', \'AddPaymentInfo\');

Esto no lo utilizo, ya lo veo en la compra

// Purchase
// Track purchases or checkout flow completions (ex. landing on \"Thank You\" or confirmation page)
fbq(\'track\', \'Purchase\', {value: \'1.00\', currency: \'USD\'});

Esto tampoco lo utilizo

// Lead
// Track when a user expresses interest in your offering (ex. form submission, sign up for trial, landing on pricing page)
fbq(\'track\', \'Lead\');

Esto en el register.tpl

// CompleteRegistration
// Track when a registration form is completed (ex. complete subscription, sign up for a service)
fbq(\'track\', \'CompleteRegistration\');

Todo iría entre etiquetas javascript y poniendo el código dentro.
codigo

Responder

hola, la instalación del pixel de facebook es igual en cualquier, pagina.

Responder