Implementar o snippet no Shopify para rastrear compras

Caso a opção "Use online purchases" tenha sido selecionada durante a instalação do aplicativo Connectif no Shopify na seção "Purchases", será necessário implementar o snippet que permite o rastreamento das compras no Connectif.

Neste artigo, você aprenderá como fazer isso.

PASSO 1: Obtendo o snippet de rastreamento

Para começar, você precisa obter o snippet de rastreamento da sua conta Connectif.

1. Copie o snippet de rastreamento de compras adequado à sua configuração:

• Se você selecionou a opção "Produtos com variantes", use este snippet:

<!-- 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 -->

• Se você não selecionou a opção "Produtos com variantes", use o seguinte snippet:

<!-- 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 -->

PASSO 2: Adicionando o snippet de rastreamento no Shopify

Depois de obter o snippet de rastreamento, siga estas etapas para adicioná-lo à sua loja Shopify.

2. Faça login na sua conta Shopify.

3. No painel administrativo, vá para Configurações.

4. No menu lateral, clique em Checkout.

5. Na seção Página de status do pedido, cole o código.

6. Clique em Salvar e sua loja Shopify estará pronta para passar as compras para o Connectif.

Outros casos a considerar

a. Identificadores de produtos SKU

Se a opção "Use product SKU" foi selecionada durante a instalação do aplicativo Connectif no Shopify na seção "Product", você precisará fazer as seguintes alterações no snippet de rastreamento:

7. Vá para a linha com o seguinte código: 

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

8. Substitua-o pelo seguinte 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

Caso a opção "Use offline purchases" tenha sido selecionada durante a instalação do aplicativo Connectif no Shopify na seção "Purchases", é importante que, se este snippet de código tiver sido adicionado anteriormente, ele seja removido manualmente para evitar registrar compras duplicadas no Connectif.

Continue aprendendo!

Para aproveitar ao máximo sua conta Connectif, recomendamos continuar com os seguintes artigos:

• Regeneração de carrinho abandonado no Shopify, para recuperar o carrinho no Shopify e aumentar seu volume de vendas.
• URL de Recuperação de Carrinho, para aprender como funciona essa URL no Shopify e como usá-la em workflows.
• Verificar a integração com o eCommerce, para garantir que todos os dados estão sincronizando corretamente na sua conta Connectif.
• Onboarding, para conhecer e conectar totalmente seu eCommerce e várias plataformas com o Connectif.