API de conversión de Facebook para Shopify

Autor
Stape
Publicado
May 09, 2021
También disponible

Facebook ha hecho un gran esfuerzo para que los vendedores y los propietarios de sitios web implementen la API de conversión de Facebook. Si usted hace publicidad en Facebook, es probable que ya haya oído hablar de la API de conversión de Facebook y de por qué es esencial implementarla para que su seguimiento sea más preciso debido a iOS 14, AdBlockers e ITP. Entonces, ¿cómo puede implementarla?

En esta guía, quiero mostrarle cómo configurar una API de conversión de Facebook para Shopify utilizando el contenedor de servidor de Google Tag Manager. Este método permite configurar el seguimiento del lado del servidor utilizando la web de GTM, el contenedor del servidor y GA4 o las etiquetas de datos para enviar los datos de la web al servidor. El principal beneficio de este método es que funciona para los sitios web personalizados o eventos no estándar donde la aplicación nativa de Facebook no es útil.

¿Por qué implementar Facebook CAPI para Shopify?Copie el enlace a esta sección

Hace un año, Apple anunció que tras la actualización las apps tendrían que pedir el acuerdo del usuario para poder hacer un seguimiento de su comportamiento. Y ahora, en abril de 2021, finalmente lanzaron esta característica. Todas las apps tienen que pedir a los usuarios que acepten o no compartir esta información.

Según estudios recientes, el 80% de los usuarios optará por no participar en el seguimiento. Por eso Facebook está presionando a los anunciantes para que trasladen el seguimiento al lado del servidor. FB CAPI es un gran ejemplo de la próxima herramienta creada por Facebook que puede ayudar a los anunciantes a mejorar la precisión de los datos de los usuarios, a medir las acciones de los clientes de forma eficaz y a compartir los datos con la plataforma de una manera más eficiente.

A continuación se presentan algunas cifras que indican por qué es necesario implementar el seguimiento del lado del servidor:

  • Alrededor del 27% de los usuarios de Internet de Estados Unidos tienen AdBlockers.
  • Safari, Firefox y Mozilla tienen algoritmos inteligentes de prevención de seguimiento que disminuyen la vida útil de las cookies y bloquean las de terceros.
  • Menos del 20% de los usuarios de iOS aceptan el seguimiento.

Ya sabemos que Safari, Firefox y Mozilla implementaron la PTI que bloquea las cookies de terceros. Otros navegadores también anunciaron que tenían previsto eliminar las cookies de terceros. Con el etiquetado del lado del servidor y un subdominio personalizado, puede enviar solicitudes de seguimiento desde su subdominio y hacer que sea de primera parte.

Todos estos cambios en el seguimiento de usuarios explican por qué es crucial implementar el seguimiento del lado del servidor.

¿Cómo puede la API de conversión de Facebook mejorar el seguimiento?Copie el enlace a esta sección

Shopify es una de las mayores plataformas de comercio electrónico, y la mayoría de las tiendas de Shopify publican anuncios en Facebook.

La API de conversión de Facebook tiene el mismo propósito que el píxel de Facebook, pero funciona de manera completamente diferente. El seguimiento del navegador de Facebook funciona en el lado del cliente (dentro del navegador del usuario), y FB CAPI funciona en el servidor.

FB CAPI permite:

  • Hacer un seguimiento de los eventos en su sitio web
  • Recoger los datos de los usuarios (nombre, apellido, etc.)
  • Crear audiencias y segmentos basados en los datos recogidos

Con el seguimiento del lado del servidor, se puede evitar la desinformación o los vacíos de información. Facebook recomienda utilizar tanto el seguimiento del navegador como el del servidor. Esto significa que si el píxel del navegador de Facebook está bloqueado, Facebook seguirá rastreando los datos del usuario utilizando el servidor. 

¿Cómo se puede implementar la API de conversión de Facebook en Shopify?Copie el enlace a esta sección

!

Actualización de agosto de 2021:

La aplicación de Facebook para Shopify fue actualizada en el verano de 2021. La nueva versión con el máximo intercambio de datos habilitado envía todos los eventos de comercio electrónico tanto desde el navegador como desde el servidor. Esto significa que si usted quiere implementar sólo la API de conversión de Facebook para los eventos estándar, habilite el máximo intercambio de datos y compruebe el gestor de eventos de FB en un par de días. Usted debe ver todos los eventos de comercio electrónico enviados desde el navegador y el servidor. Puede utilizar el método descrito a continuación para configurar GA4 del lado del servidor para Shopify o configurar FB CAPI para los eventos no estándar.

La forma más fácil de implementar la API de conversión de Facebook es utilizar la aplicación nativa de Facebook para Shopify. Todo lo que necesita hacer es añadir la aplicación de Facebook, conectarla a su administrador de negocios de Facebook y activar el nivel de seguimiento máximo. 

setting up facebook marketing

Pero la principal desventaja de este método es que FB sólo hará un seguimiento de los eventos de compra tanto del navegador como del servidor. Todos los demás eventos funcionarán sólo desde el navegador. Esto significa que no podrá seguir los eventos PageViews, AddToCart o las vistas de productos cuando el seguimiento del navegador esté bloqueado. Si implementa el método por defecto, verá esta imagen dentro del gestor de eventos. Sólo los eventos de compra mostrarán una puntuación de coincidencia y serán seguidos a través del navegador y el servidor.

En esta guía, le mostraré cómo configurar todos los demás eventos a través del servidor. Utilizaremos la aplicación nativa de Facebook, la web de Google Tag Manager y el contenedor del servidor para configurar la API de conversión de FB. La aplicación nativa de Facebook creará un ID de evento único para todos los eventos del navegador. Utilizaré el contenedor de Google Tag Manager para capturar el ID del evento, los datos del producto y los datos del usuario. La etiqueta de datos para el contenedor web pasará estos datos al contenedor del servidor.

He creado esta guía utilizando la tienda básica de Shopify. Shopify no permite a los usuarios del plan básico añadir Google Tag Manager a las páginas de pago. Significa que para la tienda Shopify Basic puede configurar la API de conversión de FB para eventos antes del checkout + evento de compra.

Si usted tiene un plan de Shopify Plus, usted tendrá acceso a la caja y será capaz de configurar la API de conversión de Facebook para todos los eventos, incluyendo los eventos de compra.

Para configurar todos los eventos para la conversión de Facebook, necesitaremos lo siguiente:

  • Contenedor web de Google Tag Manager
  • Contenedor de servidor de Google Tag Manager
  • Aplicación de Facebook para Shopify con el nivel de seguimiento máximo activado

Cómo configurar la API de conversión de Facebook para Shopify.Copie el enlace a esta sección

3. Configure un subdominio personalizado para el contenedor del servidor. El uso de un subdominio personalizado es muy recomendable porque permite establecer cookies de origen. 

4. Instale la aplicación de Facebook para Shopify y active el seguimiento máximo.

5. Copie este script. Debe añadirlo dentro del JavaScript adicional de Google Analytics. Abra Shopify Admin -> Tienda Online -> Preferencias -> Copie el script dentro del JavaScript adicional de Google Analytics.

shopify store

6. Importe esta configuración del contenedor dentro del contenedor Web

7. Importe esta configuración dentro del contenedor del Servidor

8. Una vez hecho esto, añada sus valores dentro de estas variables:

Contenedor web: Server URL, Preview Header

Contenedor del servidor: FB Access Token, Facebook Pixel ID, Facebook Test ID

Si usted quiere enviar los datos del usuario a la API de conversión de Facebook, añada un script desde el paso 24.

9. Abra el modo de vista previa del contenedor web y del servidor, y la herramienta de prueba de eventos de Facebook. Debería ver la vista de la página de Facebook, el contenido de la vista, el evento de añadir al carrito y el evento de compra activados dentro del contenedor del servidor y la herramienta de prueba de eventos. 

shopify preview mode

Cómo configurar manualmente la API de conversión de Facebook para ShopifyCopie el enlace a esta sección

En los siguientes pasos, quiero mostrar cómo configurar Facebook CAPI manualmente, sin cargar los contenedores de Google Tag Manager de los pasos 6 y 7. Usted debe agregar una secuencia de comandos desde el paso 5, no importar los contenedores. Vaya al paso 10. Voy a mostrar cómo configurar la API de conversión de Facebook para Shopify manualmente utilizando los contenedores de Google Tag Manager Web y Server.

10. Abra el modo de vista previa de Google Tag Manager dentro del contenedor web. Compruebe que Tag Manager ve los eventos y parámetros dentro del DataLayer. 

11. Dentro del contenedor web, cree variables de capa de datos con todos los parámetros que desee enviar a la API de conversión de Facebook. Vaya a la sección Variables en el contenedor Web -> Haga clic en Crear nuevo -> Tipo de variable "Variable de capa de datos" -> añada "Nombre de la variable de capa de datos" -> Haga clic en Guardar.

La variable Event_id en la capa de datos captura el ID del evento de Facebook que la FB App for Shopify está enviando al navegador. Este parámetro es esencial ya que lo utilizaremos para configurar la duplicación de eventos.

variable configuration

12. Añada la etiqueta de datos desde la galería de plantillas GTM de la web. 

13. Añada Data Client dentro del contenedor del Servidor de Google Tag Manager. Este Cliente escuchará a Data Tag y procesará toda la información que envíe en datos de eventos dentro del contenedor del servidor. Abra este enlace -> Haga clic en el botón verde Código -> Descargue el archivo Zip -> Vaya a la etiqueta de plantillas en el contenedor del servidor de Google Tag Manager -> En las plantillas de cliente haga clic en Nuevo -> Importar -> Haga clic en Guardar. 

14. Dado que la aplicación de Facebook para Shopify envía todos los parámetros necesarios al píxel del navegador de FB, sólo tendremos que configurar el seguimiento del lado del servidor para Facebook. Utilizaremos una etiqueta de datos para entregar los datos desde el contenedor web al contenedor del servidor. En este paso, le mostraré cómo configurar un evento pageview del lado del servidor.

Abra el contenedor Web -> Cree una nueva etiqueta -> Tipo de etiqueta "Etiqueta de datos" -> Nombre del evento "pageview" -> añada su URL del lado del servidor de GTM (la ha creado en el paso 3) -> añada el ID del evento de Facebook -> esta etiqueta debería activarse en todas las pageviews.

data tag configuration

15. En este paso, configuraremos el Data Tag para el evento view content. Cree una nueva etiqueta de datos -> Nombre del evento View Item -> Añada la URL del servidor -> En Events Data añada toda la información del producto que desee utilizar dentro del contenedor del servidor y el ID del evento de facebook -> esta etiqueta debe activar un evento personalizado view_item.

data tag configuration

16. Abra el contenedor del servidor -> abra la pestaña Cliente -> haga clic en Nuevo -> elija Data Client -> haga clic en Guardar.

17. Añada la etiqueta API de conversión de Facebook desde la galería de plantillas.

18. Probemos que el contenedor Servidor ve los datos que se envían usando Data Tag. Abra el modo de vista previa de los contenedores Web y Servidor. Haga clic a través de su sitio. Debería ver eventos y parámetros page_view y view_item en el contenedor Servidor. Si no ve ningún evento asegúrese de que ha publicado el contenedor Servidor y compruebe que la cabecera de la vista previa es correcta. 

19. Cree variables dentro del contenedor Servidor que capturen los request_data que ha enviado desde el contenedor Web. Vaya a la pestaña de variables dentro del contenedor Servidor -> Crear nueva variable -> Tipo de variable datos de evento -> Añadir Key Path.

user defined parameters

20. Cree una nueva etiqueta dentro del contenedor del servidor. Tipo de etiqueta -> Datos del evento a la API de conversión de FB -> Nombre del evento Método de configuración "Override" -> Nombre del evento "Pageview -> Añada el Token de acceso a la API de Facebook (puede encontrarlo dentro del gestor de eventos en FB) -> Añada el ID del píxel de Facebook -> Añada el ID de la prueba de Facebook si quiere ver los eventos dentro de la herramienta de pruebas de FB -> abra el Server Event Data Override -> Seleccione el ID del evento y añada la variable del ID de Facebook del evento -> esta etiqueta debe activarse en el evento pageview.

facebook conversion api tag configuration

21. En este paso configuraremos un evento "View Content". Cree una nueva etiqueta dentro del contenedor del Servidor -> Tipo de etiqueta "Event Data to FB Conversion API" -> Nombre del evento Método de configuración "Override" -> Nombre del evento "View Content" -> Agregue el Token de acceso a la API de Facebook -> Agregue el ID de píxel de Facebook -> Agregue el ID de prueba de Facebook si desea ver los eventos dentro de la herramienta de prueba de FB -> abra la Anulación de datos de evento del Servidor -> Seleccione el ID de evento y agregue la variable de ID de evento de Facebook -> Agregue los datos de evento dentro de "Custom Data" -> esta etiqueta debe activarse en el evento view_content. 

view content event

22. Abra el modo de vista previa de la web y el servidor y compruebe que los eventos page_view y view_content funcionan correctamente. También puede probar estos eventos dentro de la herramienta de pruebas de Facebook. 

view content

23. Una vez que haya verificado que todo funciona correctamente, configure el evento Añadir a carrito de forma similar para ver el contenido.

Cómo enviar parámetros de usuario a la API de conversión de Facebook desde Shopify.Copie el enlace a esta sección

FB requiere el envío de parámetros de usuario para cada evento que se envía desde el servidor. Con la ayuda de los parámetros de usuario, FB puede emparejar a los visitantes de su sitio con los usuarios de su base de datos. Cuantos más parámetros envíes a FB, mejor calidad de coincidencia mostrará FB dentro del gestor de eventos.

Puede enviar algunos datos de usuario en un formato sin procesar, y la información personal del usuario (como el correo electrónico, el nombre, el apellido, el número de teléfono, etc.) debe estar codificada.

facebook events

Para enviar los datos del usuario a la API de conversión de Facebook, necesitaremos ver estos datos a la dataLayer del contenedor web. Shopify no envía estos datos por defecto. Tendremos que editar el archivo theme.liquid. 

24. Abra Shopify Admin -> Tienda Online -> Temas -> Haga clic en Acciones y seleccione Editar Código -> Haga clic en theme.liquid -> copie este script -> añádalo dentro del theme.liquid antes del código de Google Tag Manager. Este script empujará los datos del usuario a la capa de datos del contenedor web GTM. 

25. Abra el modo de vista previa del contenedor web y compruebe que ve los datos del usuario dentro de la capa de datos. Si lo hace, cree variables de la capa de datos que capturen los parámetros del usuario. 

26. Añada los datos de usuario a la etiqueta de datos dentro del contenedor web. Abra la etiqueta de datos -> añada los parámetros de usuario a los datos de usuario -> hágalo para todas las etiquetas de datos -> una vez hecho, abra los modos de vista previa de la web y del servidor y compruebe que el contenedor del servidor ve los parámetros de usuario.

27. Cree variables dentro del contenedor del servidor que capturarán los datos del usuario -> añada estas variables a las etiquetas de Facebook -> Abra el modo de vista previa del contenedor del servidor y la herramienta de prueba de eventos de FB y compruebe que FB ve los parámetros del usuario.

view-content

28. Una vez que haya verificado que todo funciona, haga la misma configuración para el evento add-to-cart y publique su contenedor.

Conclusión:Copie el enlace a esta sección

Esta guía describe cómo configurar la API de conversión de Facebook para su tienda de Shopify. Fue creada utilizando el plan básico de Shopify. Este plan no permite a los usuarios insertar el código de Google Tag Manager en la caja para configurar el seguimiento del lado del servidor para los eventos PageView, ViewContent y AddToCart. También crearé una guía para la tienda Shopify Plus, que permita a los usuarios añadir GTM al checkout. Espero que este post le haya ayudado a implementar FB CAPI para Shopify. Si tiene alguna pregunta, no dude en hacerla en la sección de comentarios de abajo o visite nuestra comunidad.

Etiquetado con:FacebookShopify

Aloje su servidor GTM en Stape

Al registrarse, usted acepta Términos y Condiciones y Política de privacidad de Stape