Implémentez le snippet dans Shopify pour suivre les achats

En cas d'avoir sélectionné l'option "Utiliser les achats en ligne" lors de l'installation de l'application Connectif sur Shopify, il sera nécessaire de mettre en œuvre le snippet permettant le suivi des achats dans Connectif.

Dans cet article, vous apprendrez comment le faire.

  

Temps d'implémentation : 15 min.
Difficulté : Faible.
Quand l'utiliser : Lorsque vous souhaitez suivre les achats dans votre boutique Shopify.

shopify_snippet_4 (1).jpg

 

ÉTAPE 1 : Obtenir le snippet de suivi

Pour commencer, vous devez obtenir le snippet de suivi depuis votre compte Connectif.

1. Copiez le snippet de suivi des achats adapté à votre configuration :

  • Si vous avez coché l'option "Produits avec variantes", utilisez le snippet suivant :
<!-- 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 vous n’avez pas coché l’option "Produits avec variantes", utilisez le snippet suivant :
<!-- 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 -->

 

ÉTAPE 2 : Inclusion du snippet de suivi dans Shopify

 

Dans le cas où l'application Connectif est désactivée ou désinstallée, le snippet ne sera pas supprimé.

Une fois que vous avez obtenu le snippet de suivi, suivez ces étapes pour l’ajouter à votre boutique Shopify.

2. Connectez-vous à votre compte Shopify.

3. Dans le panneau d'administration, allez dans Paramètres (Settings).

mceclip0.png

4. Dans le menu latéral, cliquez sur Passer à la caisse (Checkout).

mceclip1.png

5. Dans la section Page de statut de commande (Order Status Page), collez le code.

mceclip2.png

6. Cliquez sur Enregistrer (Save) et Shopify sera configuré pour transmettre les achats à Connectif.

  

Assurez-vous que le snippet est correctement copié et collé afin de garantir un suivi précis des achats.

 

Autres cas à considérer

a. Identifiants de produits SKU

Si, lors de l'installation de l'application Connectif dans Shopify, vous avez sélectionné l'option "Utiliser le SKU des produits (Use product SKU)" dans la section "Produit (Product)", il sera nécessaire d'effectuer les modifications suivantes dans le snippet de suivi :

7. Accédez à la ligne contenant le code suivant : 

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

8. Remplacez-la par le fragment suivant :

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

 

b. Achats hors ligne

Si, lors de l'installation de l'application Connectif dans Shopify, vous avez sélectionné l'option "Utiliser les achats hors ligne (Use offline purchases)" dans la section "Achats (Purchases)", il est important de supprimer manuellement ce snippet si vous l'avez déjà ajouté, afin d'éviter d'enregistrer des achats en double dans Connectif.

 
 
 

Succès ! Le suivi des achats est désormais implémenté dans votre boutique Shopify.

 


Continuez à apprendre !

Pour tirer pleinement parti de votre compte Connectif, nous vous recommandons de poursuivre avec les articles suivants :

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 1 sur 1