Cómo configurar el píxel de Facebook con Squarespace

Actualización: El píxel de Facebook ya está integrado en Squarespace. Aquí puedes ver cómo actualizarlo.

---

Utilizar el píxel de Facebook con Squarespace es sencillo, pero realizar el seguimiento de eventos y conversiones puede resultar complicado sin un poco de orientación.

Por ejemplo, la imagen siguiente da a entender que lo único que hay que hacer es colocar uno de los eventos estándar (3) dentro del píxel base (2).

Pero si haces esto, cada vez que alguien acceda a una página de tu sitio web, aparecerá como «añadir al carrito».

Es decir, los datos serían inútiles y no permitirían optimizar ni volver a dirigir la publicidad a las personas reales que hicieron clic en «Añadir al carrito».

Entonces, ¿qué hacemos?

Me di cuenta de que no había mucha información disponible sobre cómo implementar esto con Squarespace, así que he recopilado aquí todo lo que necesitas para ponerlo en marcha.

Ya lo aprenderás,

• Todo sobre la magia de los píxeles

• Cómo configurarlo correctamente y asegurarte de que funciona, para que no quedes como un loco delante de tu cliente

• A continuación se indican los pasos para realizar el seguimiento de eventos estándar en Squarespace.

  • Añadir al carrito

  • compra

  • clientes potenciales/registro

  • ver contenido

  • iniciar el proceso de pago

¿Qué es este «Pixel»? ¿Para qué lo necesitas?

Si estás publicando anuncios y no estás utilizando el píxel para realizar el seguimiento de estos eventos, DEJA DE HACERLO.

En palabras de Facebook:

(The) Pixel es una herramienta de análisis que te permite medir la eficacia de tu publicidad al conocer las acciones que realizan los usuarios en tu página web.

En otras palabras, si publicas anuncios sin esto, no tendrás ni idea de lo que está pasando, de cómo están funcionando ni de cómo mejorarlos. 

Sin embargo, si sigues estas instrucciones al pie de la letra, podrás llevar a cabo campañas realmente innovadoras, y Facebook no deja de mejorar su plataforma. Así que no te lo pierdas.

 

Cómo configurar el Pixel

En tu gestor de anuncios encontrarás las instrucciones de configuración de Squarespace en la sección «Integraciones de socios».

Obtendrás el código base que deberás añadir a la inyección del encabezado de tu página. Avanzado > Inyección de código. Esta es la parte sencilla. 

¿Cómo puedo asegurarme de que funciona?

Recuerda que el hecho de que todo se ilumine en verde no significa que esté funcionando.

1. Descarga la extensión «Facebook Pixel Helper» para Chrome.

2. Ahora, cuando revises tu sitio web, podrás ver qué se está rastreando y si el píxel se activa cuando y donde debería. 

3. [Opcional] También puedes realizar un seguimiento de los eventos en tiempo real accediendo a Panel de control de Pixel > Detalles > Análisis > Depurador de eventos. 

Cómo realizar un seguimiento de las conversiones de compra

1. Configuración > Avanzado > Inyección de código - PÁGINA DE CONFIRMACIÓN DEL PEDIDO

<script>
fbq('track', 'Purchase', {
value: {OrderGrandTotal},
currency: 'USD'
};
</script>

Cómo realizar un seguimiento de los clientes potenciales y las inscripciones

Añade este script a tu página de agradecimiento o, si no tienes una, puedes utilizarlo en el código HTML que se muestra tras enviar el formulario. Lo mismo se aplica a los registros. 

Además, es posible que tu embudo acabe en una aplicación de planificación o algo por el estilo. 

<script>
fbq('track', 'Lead', {
  content_name: 'Homepage form'
});
</script>

Cómo realizar un seguimiento de «ViewContent» para los productos

Esto resulta útil para configurar los anuncios dinámicos de productos, de los que hablaré en otra entrada.

1. Editar producto > Información adicional

2. Añade un bloque de código y utiliza los siguientes scripts

<script>
  fbq('track', 'ViewContent', {
  content_name: 'Americana Pestemal',
  content_category: 'SALES',
  content_ids: ['SQ5435974'],
  content_type: 'product',
  value: 25.00,
  currency: 'USD'
 });
</script>

Una vez instalado, solo deberías ver este código de seguimiento en la página del producto en la que te encuentres.

Cómo realizar un seguimiento de los eventos de «Añadir al carrito» e «Iniciar el proceso de pago»

Aquí tienes el código que necesitas para realizar el seguimiento de los eventos «Añadir al carrito» e «Iniciar el proceso de pago».

Es muy útil para recuperar esos carritos abandonados.

1. Pega esto en el encabezado de tu sitio web y asegúrate de que la carga Ajax esté DESACTIVADA en el editor de estilos.

<!-- Facebook Pixel - Tracking clicks on Buttons -->

<script>
  function fpTrackingClicks() {
    // Add to Cart
    var cartButton = document.querySelector('.sqs-add-to-cart-button');
    if (cartButton) {
      cartButton.addEventListener('click', function() {
        fbq('track', 'AddToCart');
      }, false);
    }

    // Initiate Checkout
    Y.on('available', function() {
      var checkoutButton = document.querySelector('.checkout-button');
      checkoutButton.addEventListener('click', function() {
        fbq('track', 'InitiateCheckout');
      }, false);
    }, '.checkout-button');
  }

  document.addEventListener('DOMContentLoaded', fpTrackingClicks);
</script>
<!-- end Facebook Pixel - Tracking clicks on Buttons -->

Aquí tienes un avance de cómo funciona. 

¿Y ahora qué?

Ahora puedes aprovechar estos datos para...

• Reciblas

• Anuncios dinámicos de productos

• Públicos personalizados

Si necesitas ayuda con cualquiera de estas cuestiones, ponte en contacto con nosotros aquí.

También puedes unirte al grupo de Facebook «Squarespace Entrepreneur» aquí para obtener más consejos y sugerencias sobre cómo hacer crecer tu negocio en Squarespace.