Si votre site e-commerce tourne avec Shopify vous avez de la chance car le système de marketplace de plugin Shopify est très bien fait et l'intégration sera rapide.
L'intégration avec Shopify comporte 2 étapes :
Connecter votre boutique au plugin Captain Metrics pour Shopify (qui se charge de la synchronisation de la base d'utilisateurs, commandes...)
Poser l'Agent web JS (qui collecte les données de navigation sur votre site)
Fonctionnalités
L'intégration avec votre boutique Shopify aura pour effet d'installer des "webhooks" qui enverront en temps réel vers Captain Metrics tous les ajouts et modifications de votre base d'utilisateurs, commandes et catalogue produit.
Votre projet Captain Metrics sera donc maintenu à jour en temps réel !
Un bouton de synchronisation totale vous permet également d'effectuer la sync initiale.
Synchronisations
Des utilisateurs
L'intégration vous permet de :
Définir Shopify comme ou non
Choisir si c'est votre source de consentement au marketing
Géolocaliser leur adresse principale (utile pour faire des segments par zone géographique)
Détecter leur fuseau horaire d'après leur adresse (utile pour automatiser des envois emails, sms... à l'heure la plus favorable pour eux)
Des commandes
L'intégration Captain Metrics pour Shopify possède la permission read_all_orders qui lui permet de récupérer l'ensemble des historiques de commandes.
Elle vous permet de :
Mapper les commandes à une Règle de Conversion et un Domaine de Captain Metrics
Géolocaliser l'adresse de la livraison (utile pour faire des segments par zone géographique)
Importer l'ensemble des données d'une commande dans Captain Metrics : panier, réductions appliquées, les taxes, les frais de port, les retours, les remboursements, changement de statut...
Catalogue produit
La synchronisation du catalogue produit permet d'alimenter les rapports de merchandising, pour vous permettre de suivre les performances de vos stocks.
Données de navigation
Connecter Shopify
Pour connecter votre boutique Shopify à Captain Metrics vous devez :
Ajouter une intégration Shopify via le menu Intégrations
Autorisez votre boutique Shopify avec le bouton "Shopify Connect"
Sélectionner la boutique Shopify à intégrer
Intégrer l'Agent web JS
La procédure suivante permet de poser le JS directement dans votre thème et nécessite l'intervention d'un développeur.
Si vous souhaitez passer par un gestionnaire de tag (Google Tag Manager...), vous devrez vous assurer que toutes les variables requises par l'Agent web JS sont exposées dans votre DataLayer.
Les scripts suivants s’appuient sur les variables disponibles par défaut dans les thèmes Shopify. Il est possible qu'ils doivent être adaptés par votre développeur si votre thème a été significativement modifié.
Initialisation
Le JS doit être initialisé dans le <head> de votre layout (habituellement Layout > theme.liquid).
L'initialisation du script permet d'identifier l'utilisateur s'il est connecté, de collecter et d'enrichir les méta-données de la page vue si c'est un article de blog ou une page produit.
La fonction cmAgent.userConsent(); doit être exécutée si vous avez déjà recueilli le consentement aux cookies ou lorsque l'internaute valide son consentement.
N'oubliez pas de renseigner votre projectId, éventuels crossDomains, et votre clé secrète pour signer les ID des utilisateurs authentifiés (ligne 11). La clé secrète se trouve dans les Paramètres > Paramètres globaux de votre projet :
Votre panier peut être soit mis à jour depuis l'URL /cart ou bien dynamiquement depuis une fonction ajax. Les deux méthodes sont probablement utilisées sur votre boutique.
Cart template
Pour tracker les modifications de panier depuis l'URL /cart il faut ajouter le script suivant au template cart.liquid :
Le panier peut être mis à jour sans redirection vers l'URL /cart, grâce à une fonction Ajax présente dans le fichier Assets > theme.js.liquid.
Pour tracker les changements de panier avec cette méthode, il faut créer la fonction cmAgent.onGetCart() après l'initialisation de l'agent :
<head>
...
window.cmAgent = new window.CM.Agent(...)
...
// map shopify cart to CM cart
cmAgent.onShopifyCart = function(cart) {
var cmItems = [];
if (cart.item_count > 0) {
cart.items.forEach(function(item) {
var cmItem = {
externalId: ''+item.id,
name: item.title && item.title != '' ? ''+item.title : ''+item.sku,
quantity: parseInt(item.quantity, 10),
price: parseFloat(item.final_price) / 100,
brand: ''+item.vendor,
};
if (item.sku && item.sku != '') cmItem.sku = ''+item.sku;
if (item.variant_id && item.variant_id != '') cmItem.variant = ''+item.variant_id;
if (item.featured_image && item.featured_image.url) cmItem.imageURL = item.featured_image.url;
cmItems.push(cmItem);
});
}
cmAgent.cart({currency: cart.currency, items: cmItems});
cmAgent.dispatch();
};
Puis modifier le theme.js.liquid comme ceci :
// theme.js.liquid
// Get from cart.js returns the cart in JSON
Shopify.getCart = function(callback) {
jQuery.getJSON('/cart.js', function (cart, textStatus) {
// appel de notre fonction cmAgent.onGetCart
if (cmAgent && cmAgent.onShopifyCart) {
try {
cmAgent.onShopifyCart(cart);
} catch(e) {
console.log(e);
}
}
if ((typeof callback) === 'function') {
callback(cart);
}
Shopify.onCartUpdate(cart);
});
};
Tracking des commandes
Bien que les commandes soient également transmises automatiquement par webhook, il est indispensable de les collecter également côté client avec l'Agent web JS afin de pouvoir récupérer l'ID de session en cours. Associer la session à la commande est nécessaire pour les calculs des performances d'attribution.
Captain Metrics fusionnera automatiquement les commandes identiques pour éviter les doublons.
Les pages de checkout utilisent un layout et des templates contrôlés par Shopify, il faut donc insérer le script suivant sur la page de confirmation de commande, accessible depuis le menu Shopify Paramètres > Paiement > Traitement des commandes : Scripts supplémentaires
N'oubliez pas de renseigner votre projectId(ligne 5), votre clé secrète pour signer les ID des utilisateurs (ligne 9) et la conversionRuleId (ligne 44).