%3C%21-- Global site tag (gtag.js) - Google Analytics --%3E

Cómo integrar el Tag de Pinterest Ads en Shopify de forma manual

En este artículo te mostramos exactamente cómo integrar el tag de Pinterest Ads en Shopify para poder registrar eventos y atribuirlos a anuncios publicados desde Pinterest Ads.

Si tienes conocimientos de programación web o tienes un desarrollador, puedes usar esta guía como base para instalar este tag en otras plataformas como Woocommerce o Prestashop, adaptándolo a tu tienda. Puedes encontrar ayuda especñifica para diversas plataformas en este link:

https://help.pinterest.com/en/business/article/install-the-pinterest-tag

Dado que la aplicación oficial de Pinterest Ads para la integración no está disponible para España aún, te vamos a guiar para que puedas instalar el Tag por código en tu tienda web.

Aunque los cambios van a ser simples y te vamos a guiar en cada paso, por seguridad es siempre recomendable que hagas un duplicado de tu tema antes de hacer cambios en el código, para poder usarlo para restaurar la página si se "rompiera" algo.

PASOS A SEGUIR PARA INSTALAR EL PINTEREST TAG

1. Lo primero que necesitas es crear tu Pinterest píxel Tag, yendo a tu cuenta de tu negocio de Pinterest, clicando en Ads > Conversions y si no has creado tu Tag, clicando Get Started en el Tag Manager y siguiendo los pasos para crearlo.

Una vez tienes un tag creado, lo que vas a necesitar es el número identificativo único de tu Pinterest Tag (el Pinterest Tag ID), cópialo y tenlo a mano para utilizarlo durante el proceso.

2. Luego tienes que instalar el código base del píxel, para lo que necesitas copiar el código que te mostramos debajo, cambiando las partes en las que pone TU_TAG_ID por el ID de tu Tag que copiaste antes.

<!-- pinterTag -->
<script type="text/javascript">
!function(e){if(!window.pintrk){window.pintrk=function()
{window.pintrk.queue.push(Array.prototype.slice.call(arguments))};var
n=window.pintrk;n.queue=[],n.version="3.0";var
t=document.createElement("script");t.async=!0,t.src=e;var
r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r)}}
("https://s.pinimg.com/ct/core.js"); 
pintrk('load','TU_TAG_ID', { em: '{{ customer.email }}', });
pintrk('page');
</script> 
<noscript> 
<img height="1" width="1" style="display:none;" alt=""
src="https://ct.pinterest.com/v3/?tid=TU_TAG_ID&noscript=1" /> 
</noscript>
<script>
pintrk('track', 'pagevisit');
 </script>
<!-- pinterTag -->

Una vez hecho esto, dentro de tu tienda de Shopify ve a Tienda online > Temas, ve al tema que quieres modificar (recuerda hacer una copia de tu tema por seguridad antes de hacer modificaciones de código), clica en Acciones y Editar Código, y luego entra en theme.liquid.

Copia el código modificado antes de </head> dentro del código y clica en Guardar.

Ya tienes el código base y puedes registrar visitas a la página en tu Pinterest Tag.

3. El siguiente paso es configurar el evento de Compra para que cuando se produzca una compra en la tienda, el Tag de Pinterest pueda detectarla correctamente y asignarla a tus anuncios de Pinterest Ads si detectara atribución.

En tu tienda de Shopify ve a Configuración > Pantalla de pago y baja hasta que veas Procesamiento de pedidos y Scripts adicionales.

Modifica el siguiente código sustituyendo de nuevo tu Pinterest Tag ID por TU_TAG_ID, y copia el código modificado en Scripts adicionales.

<!--Pinterest Tag Checkout Code -->

{% if first_time_accessed %}
<script type="text/javascript">
!function(e){if(!window.pintrk){window.pintrk=function()
{window.pintrk.queue.push(Array.prototype.slice.call(arguments))};var
n=window.pintrk;n.queue=[],n.version="3.0";var
t=document.createElement("script");t.async=!0,t.src=e;var
r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r)}}
("https://s.pinimg.com/ct/core.js");
pintrk('load','TU_TAG_ID', { em: '{{ customer.email }}', }); 
pintrk('page'); 
</script> 
<noscript> 
<img height="1" width="1" style="display:none;" alt=""
src="https://ct.pinterest.com/v3/?tid=TU_TAG_ID&noscript=1" /> 
</noscript>
<script>
pintrk('track', 'checkout',{
value: {{ total_price }} / 100,
currency: '{{ currency }}',
order_quantity: 1,
order_id: {{ checkout.id }}
});
</script>
<noscript>
<img height="1" width="1" style="display:none;" alt=""
src="https://ct.pinterest.com/v3/?tid=TU_TAG_ID&event=checkout&noscript=1"/>
</noscript>
{% endif %}
<!--Pinterest Tag Checkout Code -->
Guarda los cambios y ya tienes el código para detectar compras con tu Pinterest Tag.
4. Finalmente, vas a p reparar tu página para que detectes los eventos de carrito.
Este paso puede variar un poco dependiendo de tu tema, ya que el código a modificar puede estar en tu tema bajo Templates,  Sections o Snippets, ya que el archivo a modificar puede ser product.liquid, product-template.liquid o product-form.liquid.
Lo que quieres es encontrar el botón de añadir al carrito, buscando add o addtocart en el código, y añadiendo el código que ves debajo dentro de los símbolos < > del elemento <button> o <input>, para que cuando se añada un producto al carrito se decte el evento en tu Tag de Pinterest.

onclick="pintrk('track', 'addtocart',{value:{{product.price | money_without_currency | remove: ',' }}/ 100,currency:'{{ shop.currency }}',order_quantity: 1,order_id:'{{product.id}}'});" onclick="pintrk('track', 'addtocart',{value:(typeof getPinterPrice === 'function' ? getPinterPrice('{{product.price | money_without_currency }}/ 100') : '{{product.price | money_without_currency | remove: ',' }}'),currency:'{{ shop.currency }}',order_quantity: 1, line_items: [{ product_id: '{{product.id}}', product_price: (typeof getPinterPrice === 'function' ? getPinterPrice('{{product.price | money_without_currency }}') : '{{product.price | money_without_currency | remove: ',' }}'), product_quantity: 1, product_category: 'default' }]});"

Una vez añadido, guarda los cambios y tienes tu evento de carrito configurado para Pinterest Ads Tag.

Artículos Relacionados