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.
É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
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).
4. Dans le menu latéral, cliquez sur Passer à la caisse (Checkout).
5. Dans la section Page de statut de commande (Order Status Page), collez le code.
6. Cliquez sur Enregistrer (Save) et Shopify sera configuré pour transmettre les achats à Connectif.
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.
Continuez à apprendre !
Pour tirer pleinement parti de votre compte Connectif, nous vous recommandons de poursuivre avec les articles suivants :
- Récupération de panier abandonné sur Shopify, pour récupérer les paniers abandonnés sur Shopify et augmenter votre volume de ventes.
- URL de récupération de panier, pour comprendre comment fonctionne cette URL sur Shopify et comment l’utiliser dans des workflows.
- Vérifier l’intégration avec le eCommerce, pour vous assurer que toutes les données sont correctement synchronisées dans votre compte Connectif.
- Onboarding, pour mieux comprendre et connecter votre eCommerce et les différentes plateformes à Connectif.