Comment installer le code de suivi Matomo sur ma boutique Shopify ?

Shopify est une boutique de commerce électronique populaire. Avant que Matomo puisse commencer à suivre votre boutique, vous devrez ajouter manuellement le code de suivi. Ce code doit être ajouté chaque fois que vous commencez à utiliser un nouveau thème.

Vous aurez besoin d’un compte Shopify.com et de votre instance Matomo (auto-hébergée ou sur le Cloud).

Suivi des actions Shopify Ecommerce dans Matomo (Inclut le code de suivi standard)

Remarque importante : Les étapes ci-dessous devraient fonctionner pour une configuration de boutique en ligne standard et reposent sur l’utilisation de collections pour le suivi des catégories et de pages de produits pour les vues de produits. Ceci repose également sur le chargement du panier par le visiteur ou sur le chargement du modèle de panier sur la page lorsqu’un visiteur ajoute un article à son panier pour le suivi des paniers abandonnés. Si vous avez une configuration qui saute le bouton « Ajouter au panier » et passe directement à la caisse, les étapes ci-dessous ne fonctionneront pas pour suivre les mises à jour du panier.

Suivez les étapes ci-dessous pour configurer le suivi standard ainsi que le suivi du commerce électronique de votre site Shopify vers Matomo.

  1. Dans Matomo, copiez votre code de suivi Matomo dans un éditeur de texte. Vous trouverez votre code de suivi dans Administration > Indicateurs de mesure/Sites Web > Gérer > Afficher le code de suivi

. 2. Connectez-vous à votre boutique Shopify et accédez à Boutique en ligne, cliquez sur Thèmes puis sur le bouton « Personnaliser » au centre de la page.

  1. Cliquez sur les 3 points à côté du nom du thème dans le coin supérieur gauche, puis cliquez sur « Modifier le code »

  2. Cliquez sur le fichier ‘theme.liquid’ dans le navigateur de fichiers à gauche

  3. Trouvez la fin de la balise «  dans le code

  4. Collez le code de suivi de votre fichier texte au-dessus de la ligne qui contient « 

  5. Copiez le code suivant dans votre bloc de code de suivi Matomo au-dessus de la ligne trackPageView dans le fichier ‘theme.liquid’ et cliquez sur « Enregistrer ».


    {% if template == 'collection' %}
    {% capture tag_list %}{% for tag in collection.all_tags limit:5 %}{{ tag }}{% if forloop.last == false %}::{% endif%}{% endfor %}{% endcapture %}
    {% assign tag_array = tag_list | split: '::'%}
        _paq.push(['setEcommerceView',
        false, // Product name is not applicable for a category view.
        false, // Product SKU is not applicable for a category view.
        {{ tag_array | json }}, // Product category, or array of up to 5 categories
        ]);
    {% endif %}
    {% if template == 'product' %}
        {% capture tag_list %}{% for tag in product.tags limit:5 %}{{ tag }}{% if forloop.last == false %}::{% endif%}{% endfor %}{% endcapture %}
        {% assign tag_array = tag_list | split: '::'%}
        _paq.push(['setEcommerceView',
        {{ product.id }}, // (Required) productSKU
        {{ product.title | json}}, // (Optional) productName
        {{ tag_array | json }}, // (Optional) categoryName
        {{ product.price | money_without_currency }} // (Optional) price
        ]);
    {% endif %}

Un exemple complet ressemblerait à ce qui suit :

8. Cliquez sur le fichier ‘cart-template.liquid’ dans le menu de navigation de gauche sous le dossier « Sections » pour l’ouvrir
9. Insérez le bloc de code suivant en haut du fichier et cliquez sur « Enregistrer »


&ltscript&gt
var _paq = window._paq = window._paq || [];
{% for item in cart.items %}
{% capture tag_list %}{% for tag in item.product.tags limit:5 %}{{ tag }}{% if forloop.last == false %}::{% endif%}{% endfor %}{% endcapture %}
{% assign tag_array = tag_list | split: '::'%}
_paq.push(['addEcommerceItem',
   {{ item.product_id }}, // (Required) productSKU
   {{ item.title | json }}, // (Optional) productName
   {{ tag_array | json }}, // (Optional) productCategory
   {{ item.final_price | money_without_currency }}, // (Recommended) price
   {{ item.quantity }} // (Optional, defaults to 1) quantity
   ]);
{% endfor %}
_paq.push(['trackEcommerceCartUpdate', {{ cart.total_price | money_without_currency }}]);
&lt/script&gt


10. Cliquez sur « Quitter » dans le coin supérieur gauche pour revenir à la page d’administration et cliquez sur « Paramètres » dans le coin inférieur gauche
11. Cliquez sur « Caisse et comptes »

12. Descendez jusqu’au bas de la page où apparaît « Page du statut des commandes » et copiez votre code de suivi depuis votre fichier texte

13. Collez le code suivant au-dessus de la ligne qui contient <wpml_comment wpml_value="IHdwbWw6aHRtbF9mcmFnbWVudCA8L3NjcmlwdD4g"></wpml_comment>


 {%  for line_item in checkout.line_items %}
 {% capture tag_list %}{% for tag in line_item.product.tags limit:5 %}{{ tag }}{% if forloop.last == false %}::{% endif%}{% endfor %}{% endcapture %}
 {% assign tag_array = tag_list | split: '::'%}
 _paq.push(['addEcommerceItem',
    {{ line_item.product_id }}, // (Required) productSKU
    {{ line_item.title | json }}, // (Optional) productName
    {{ tag_array | json}}, // (Optional) productCategory
    {{ line_item.final_price | money_without_currency }}, // (Recommended) price
    {{ line_item.quantity }} // (Optional, defaults to 1) quantity
 ]);
 {% endfor %}
 _paq.push(['trackEcommerceOrder',
    {{ checkout.order_id }}, // (Required) orderId
    {{ checkout.total_price | money_without_currency }}, // (Required) grandTotal (revenue)
    {{ checkout.subtotal_price | money_without_currency }}, // (Optional) subTotal
    {{ checkout.tax_price | money_without_currency }}, // (optional) tax
    {{ checkout.shipping_price  | money_without_currency }}, // (optional) shipping
    {{ checkout.discounts_amount | money_without_currency }} // (optional) discount
 ]);

Un exemple complet ressemblerait à ceci :

14. Testez que le suivi du commerce électronique fonctionne comme prévu.
– Allez sur votre boutique Shopify, regardez quelques produits et ajoutez au moins un produit à votre panier.
– Allez sur votre site Matomo et vérifiez le rapport « Journal des visites » et vérifiez que la mise à jour du panier est suivie par Matomo :

– Passez votre souris sur la page où vous avez vu le produit pour confirmer que vous suivez les vues du produit/de la catégorie :

– Passez une commande sur votre site Web (en utilisant par exemple un coupon de réduction de 100 % ou lorsque votre boutique est placée en « Mode test ») et vérifiez que la commande est suivie dans Matomo :

Félicitations ! Vous devriez maintenant être en mesure de suivre les visites, les mises à jour du panier et les commandes de commerce électronique dans Matomo depuis votre boutique Shopify.

Remarque importante : Shopify ne rend pas les collections ou les catégories de produits disponibles dans les pages ‘Panier’ ou ‘Statut des commandes’. Pour cette raison, nous suivons le produit et les collections ‘Balises’ comme la catégorie de produit dans Matomo. Matomo prend en charge un maximum de 5 catégories de produits par vue de produit ou de catégorie, donc les blocs de code ci-dessus suivront les 5 premières balises dans l’ordre alphabétique.

Intégrer Matomo Analytics dans votre boutique Shopify (pas de suivi du commerce électronique)

Si vous ne souhaitez pas suivre les données E-commerce dans votre instance Matomo, vous pouvez suivre les étapes ci-dessous pour ajouter le code de suivi Matomo de base à votre site Shopify.

  1. Dans Matomo, copiez votre code de suivi Matomo. Vous trouverez votre code de suivi dans Admin > Indicateurs de mesure > Gérer > Code de suivi de vues
  2. Connectez-vous à votre boutique Shopify. Sélectionnez Boutique en ligne, puis choisissez Thèmes dans le menu déroulant. Sélectionnez Modifier le code dans le menu Actions.
  3. Sélectionnez theme.liquid dans la Disposition.
  4. Déroulez jusqu’au moment où vous verrez </head> dans le code. Juste au-dessus, collez votre code de suivi Matomo (étape 1).
  5. Cliquez sur Enregistrer en haut à droite de la fenêtre.
  6. (étape facultative) Si vous disposez de Shopify Plus (version entreprise de Shopify), contactez votre gestionnaire Shopify Merchant qui sera en mesure d’installer Matomo dans vos pages de paiement.
  7. Ouvrez votre site Web dans le navigateur et effectuez quelques actions (par exemple, naviguez vers différentes pages)
  8. Connectez-vous à Matomo et vérifiez si la visite du site Web est suivie

Félicitations, vous devriez maintenant réussir à suivre vos visiteurs sur votre boutique Shopify. Bonnes analyses !