Implementar el snippet en Shopify para realizar el seguimiento de compras

En caso de que en la instalación de la App de Connectif en Shopify se haya seleccionado la opción "Use online purchases" en el apartado "Purchases", será necesario implementar el snippet que permite el seguimiento de las compras en Connectif.

En este artículo aprenderás cómo hacerlo.

PASO 1: Obtención del snippet de seguimiento

Para empezar, necesitas obtener el snippet de seguimiento desde tu cuenta de Connectif.

1. Copia el snippet de seguimiento de las compras adecuado a tu configuración:

• Si has marcado la opción de "Productos con variantes" debemos usar este:

<!-- Start of Connectif Purchase Snippet v5 variants -->
<div class="cn_purchase" style="display:none">
{% if checkout.attributes.cartId %}
<span class="cart_id">{{ checkout.attributes.cartId }}</span>
{% else %}
{% assign cartId = "now" | date: "%N" %}
<span class="cart_id">{{ cartId }}</span>
{% endif %}
<span class="purchase_id">{{ checkout.id }}</span>
<span class="purchase_date">{{ checkout.order.created_at | date: "%FT%H:%M:%S.%L%z" }}</span>
<span class="total_quantity">{{ checkout.line_items | size }}</span>
<span class="total_price">{{ checkout.total_price | times: 0.01 }}</span>
{% for item in checkout.line_items %}
<div class="product_basket_item">
<span class="quantity">{{ item.quantity }}</span>
<span class="price">{{ item.final_line_price | times: 0.01 }}</span>
{% if item.variant.title == "Default Title" %}
<span class="name">{{item.product.title | escape}}</span>
{% else %}
<span class="name">{{item.product.title | escape}} {{ item.variant.title | escape }}</span>
{% endif %}
<span class="url">{{ shop.url }}{{ item.product.url }}</span>
<span class="product_id">{{ item.product_id }}</span>
<span class="unit_price">{{ item.final_price | times: 0.01 }}</span>
<span class="published_at">{{ item.product.published_at | date: "%FT%H:%M:%S.%L%z" }}</span>
<span class="image_url">https:{{item.image.src | product_img_url: '300x300' }}</span>
<span class="description">{{item.product.description | strip_html | escape }}</span>
{% assign unit_price_original = item.variant.compare_at_price | at_least: item.final_price %}
<span class="unit_price_original">{{unit_price_original | times: 0.01 }}</span>
{% assign discounted_amount = unit_price_original | minus: item.final_price %}
<span class="discounted_amount">{{discounted_amount | times: 0.01 }}</span>
{% assign percentage_factor = unit_price_original | times: 0.01 %}
{% assign discounted_percentage = discounted_amount | divided_by: percentage_factor | round: 2 %}
<span class="discounted_percentage">{{discounted_percentage}}</span>
{% for collection in item.product.collections %}
<span class="category">{{ collection.title }}</span>
{% endfor %}
{% for tag in item.product.tags %}
<span class="tag">{{ tag }}</span>
{% endfor %}
<span class="brand">{{ item.product.vendor | escape }}</span>
<span class="thumbnail_url">https:{{ item.image.src | product_img_url: '100x100' }}</span>
</div>
{% endfor %}
</div>
<div class="cn_client_info" style="display: none">
<span class="primary_key">{{ checkout.email }}</span>
<span class="_name">{{ checkout.customer.first_name }}</span>
<span class="_surname">{{ checkout.customer.last_name }}</span>
{% if checkout.customer.phone and checkout.customer.phone != "" %}
<span class="_mobilePhone">{{ checkout.customer.phone }}</span>
{% elsif checkout.shipping_address.phone and checkout.shipping_address.phone != "" %}
<span class="_mobilePhone">{{ checkout.shipping_address.phone }}</span>
{% elsif checkout.billing_address.phone and checkout.billing_address.phone != "" %}
<span class="_mobilePhone">{{ checkout.billing_address.phone }}</span>
{% endif %}
</div>
<!-- End of Connectif Purchase Snippet -->

• Si no has marcado la opción "Productos con variantes" se debe usar el siguiente:

<!-- Start of Connectif Purchase Snippet v5 -->
<div class="cn_purchase" style="display:none">
{% if checkout.attributes.cartId %}
<span class="cart_id">{{ checkout.attributes.cartId }}</span>
{% else %}
{% assign cartId = "now" | date: "%N" %}
<span class="cart_id">{{ cartId }}</span>
{% endif %}
<span class="purchase_id">{{ checkout.id }}</span>
<span class="purchase_date">{{ checkout.order.created_at | date: "%FT%H:%M:%S.%L%z" }}</span>
<span class="total_quantity">{{ checkout.line_items | size}}</span>
<span class="total_price">{{ checkout.total_price | times: 0.01 }}</span>
{% for item in checkout.line_items %}
<div class="product_basket_item">
<span class="quantity">{{ item.quantity }}</span>
<span class="price">{{ item.line_price | times: 0.01 }}</span>
<span class="name">{{ item.product.title | escape }}</span>
<span class="url">{{ shop.url }}{{ item.product.url }}</span>
<span class="product_id">{{ item.product_id }}</span>
<span class="unit_price">{{ item.product.price | times: 0.01 }}</span>
<span class="published_at">{{ item.product.published_at | date: "%FT%H:%M:%S.%L%z" }}</span>
</div>
{% endfor %}
</div>
<div class="cn_client_info" style="display: none">
<span class="primary_key">{{ checkout.email }}</span>
<span class="_name">{{ checkout.customer.first_name }}</span>
<span class="_surname">{{ checkout.customer.last_name }}</span>
{% if checkout.customer.phone and checkout.customer.phone != "" %}
<span class="_mobilePhone">{{ checkout.customer.phone }}</span>
{% elsif checkout.shipping_address.phone and checkout.shipping_address.phone != "" %}
<span class="_mobilePhone">{{ checkout.shipping_address.phone }}</span>
{% elsif checkout.billing_address.phone and checkout.billing_address.phone != "" %}
<span class="_mobilePhone">{{ checkout.billing_address.phone }}</span>
{% endif %}
</div>
<!-- End of Connectif Purchase Snippet -->

PASO 2: Inclusión del snippet de seguimiento en Shopify

Una vez que hayas obtenido el snippet de seguimiento, sigue estos pasos para añadirlo a tu tienda Shopify.

2. Accede a tu cuenta de Shopify.

3. En el panel de administración, dirígete a Settings.

4. En el menú lateral, haz clic en Checkout.

5. En el apartado Order Status Page, pega el código.

6. Haz clic en Save y ya estará listo Shopify para pasar las compras a Connectif.

Otros casos a tener en cuenta

a. Identificadores de productos SKU

En caso de que en la instalación de la App de Connectif en Shopify se haya seleccionado la opción "Use product SKU" en el apartado "Product", será necesario realizar los siguientes cambios en el snippet de seguimiento:

7. Accede a la línea donde se encuentra el siguiente código: 

<span class="product_id">{{ item.product_id }}</span>

8. Reemplázala por el siguiente fragmento:

{% if item.sku != "" %}
<span class="product_id">{{ item.sku }}</span>
{% elsif item.product_id != "" %}
<span class="product_id">{{ item.product_id }}</span>
{% endif %}

b. Compras offline

En caso de que en la instalación de la App de Connectif en Shopify se haya seleccionado la opción "Use offline purchases" en el apartado "Purchases", es importante que si se ha añadido previamente este snippet de código se elimine manualmente para evitar registrar compras duplicadas en Connectif.

¡Sigue aprendiendo!

Para aprovechar todo el potencial de tu cuenta en Connectif, te recomendamos continuar con los siguientes artículos:

• Regeneración de carrito abandonado en Shopify, para rescatar el carrito en Shopify y aumentar tu volumen de ventas.
• URL de Recuperación de Carrito, para conocer cómo funciona esta URL en Shopify y cómo utilizarla en workflows.
• Comprobar la integración con el eCommerce, para asegurarte de que todos los datos están sincronizándose de forma correcta en tu cuenta de Connectif.
• Onboarding, para terminar de conocer y conectar tu eCommerce y las diferentes plataformas con Connectif.