Vous apprendrez
Découvrez comment intégrer Klaviyo à une installation Magento 2 sans tête. Si vous utilisez Magento 2 pour le backend de votre boutique e-commerce, mais un framework différent pour le frontend (comme React.js, Angular, etc.), les informations suivantes vous concernent.
Cette intégration se fait en trois étapes :
- Connectez votre boutique Magento 2 via l'intégration native de Klaviyo pour synchroniser les données relatives aux commandes, au catalogue et aux abonnés.
- Ajoutez manuellement des extraits de code à votre site pour activer la fonctionnalité de suivi sur site.
- (Si vous utilisez une structure URL personnalisée pour votre catalogue de produits) Ajoutez des règles de réécriture pour les URL de produits.
Connectez l'intégration native de Klaviyo
Tout d'abord, connectez votre boutique Magento 2 via l'intégration native de Klaviyo pour synchroniser les données de commande, de catalogue et d'abonné en suivant les étapes de la section Démarrer avec Magento 2.
Une grande partie de l'intégration de Klaviyo dans Magento 2 repose sur la récupération de données via l'API côté serveur de Magento. En général, cela n'est pas affecté par l'utilisation d'un frontend découplé, et l'intégration native suivra les événements suivants sans autre configuration :
- Commande passée
- Commande exécutée
- Envoi effectué
- Commande annulée
- Ordre remboursé
- Début de l'encaissement
En outre, veuillez noter que :
- Les événements Started Checkout seront synchronisés si vous continuez à créer des devis et à leur attribuer une adresse électronique lorsque l'utilisateur passe à la caisse.
- Si vous avez activé la synchronisation des clients abonnés à la table de newsletter de Magento 2, la synchronisation devrait fonctionner comme prévu.
Ajouter manuellement des extraits de code
Si vous utilisez une configuration sans tête, vous devez ajouter manuellement le JavaScript "Active on Site" de Klaviyo (également connu sous le nom de Klaviyo.js) à votre site. Klaviyo.js détecte les utilisateurs actifs sur votre site et active les formulaires Klaviyo.
Nous fournissons également des extraits qui vous permettent d'effectuer les opérations suivantes :
-
Suivi des produits consultés
Suivez le moment où un utilisateur consulte des produits spécifiques sur votre site (ce qui peut être exploité dans un flux d'abandon de navigation). -
Suivi des éléments récemment consultés
Suivez les éléments récemment consultés sur le profil d'un utilisateur. -
Suivi des articles ajoutés au panier
Déterminez quand un utilisateur ajoute un article à son panier. -
Suivi des utilisateurs connectés
Si vous disposez d'une fonctionnalité de création de compte, suivez l'utilisateur lorsqu'il se connecte.
Actif sur le site
Ajoutez l'extrait Klaviyo.js suivant pour qu'il apparaisse sur chaque page de votre site web. Cela permettra d'activer le suivi actif sur le site et les formulaires Klaviyo. Veillez à remplacer PUBLIC_API_KEY par votre clé d'API publique Klaviyo.
<script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>Après avoir ajouté Klaviyo.js, vous devrez charger l'objet Klaviyo sur toutes les pages où vous souhaitez ajouter l'un des snippets suivants (tels que Viewed Product, Added to Cart, etc). L'objet klaviyo ne doit être chargé qu'une seule fois par page.
Pour charger l'objet klaviyo, installez manuellement l'extrait suivant sur les pages nécessaires :
<script type="text/javascript"> !function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))});return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n ;(n=window._klOnsite).push.apply(n,arguments)}}}}() ; </script>
Produit visualisé
Si vous souhaitez mettre en place un flux d'abandon de navigation ou créer des segments basés sur l'activité de navigation sur les produits, vous devez ajouter le suivi des événements JavaScript pour l'indicateur Produit consulté. Toutes les mesures des produits visualisés sont liées aux profils des utilisateurs. Sur le modèle de votre page produit, ajoutez l'extrait suivant.
<script type="text/javascript">
var klaviyo = window.klaviyo || [] ;
var item = {
"ProductName": item.ProductName,
"ProductID": item.ProductID,
"SKU": item.SKU,
"Categories": item.Categories,
"ImageURL": item.ImageURL,
"URL": item.URL,
"Brand": item.Brand,
"Price": item.Price,
"CompareAtPrice": item.CompareAtPrice
};
klaviyo.track("Visualisé Produit", article) ;
</script>Veillez à mettre à jour les valeurs des propriétés JSON dans l'extrait afin qu'elles tirent dynamiquement les informations pertinentes nécessaires pour cette propriété.
Articles récemment consultésArticles récemment consultés
En outre, un autre extrait permet d'ajouter des entrées à un flux visuel "Éléments récemment consultés" sur le profil de l'utilisateur. L'extrait suivant peut être ajouté directement en dessous de l'extrait Viewed Product.
Veillez à remplacer item.___ dans l'extrait par l'objet item que votre plateforme utilise pour les propriétés du produit.
<script type="text/javascript">
var klaviyo = window.klaviyo || [] ;
klaviyo.trackViewedItem({
"Titre": item.ProductName,
"ItemId": item.ProductID,
"Categories": item.Categories,
"ImageUrl": item.ImageURL,
"Url": item.URL,
"Métadonnées": {
"Brand": item.Brand,
"Price": item.Price,
"CompareAtPrice": item.CompareAtPrice
}
}) ;
</script>Ajouté au panier
Si vous souhaitez envoyer des e-mails concernant les paniers abandonnés aux visiteurs qui ajoutent des articles à leur panier, mais qui ne parviennent pas à la page de paiement, vous devez suivre un indicateur relatif aux articles ajoutés au panier. Un client doit être identifié (c’est-à-dire qu’un cookie doit lui être associé) pour suivre cet événement. Voici un exemple de demande où le panier contient déjà un article (Winnie l’ourson) et où un autre article vient d’y être ajouté (Le Conte de deux cités) :
<script type="text/javascript">
klaviyo.track("Ajouté au panier", {
"$value": 29.98,
"AddedItemProductName": "Un conte de deux villes",
"AddedItemProductID": "1112",
"AddedItemSKU": "TALEOFTWO",
"AddedItemCategories": ["Fiction", "Classique", "Enfants"],
"AddedItemImageURL": "http://www.example.com/path/to/product/image2.png",
"AddedItemURL": "http://www.example.com/path/to/product2",
"AddedItemPrice": 19.99,
"AddedItemQuantity": 1,
"ItemNames": ["Winnie l'ourson", "Un conte de deux villes"],
"CheckoutURL": "http://www.example.com/path/to/checkout",
"Articles": [{
"ProductID": "1111",
"SKU": "WINNIEPOOH",
"ProductName": "Winnie the Pooh",
"Quantity": 1,
"ItemPrice": 9.99,
"RowTotal": 9.99,
"ProductURL": "http://www.example.com/path/to/product",
"ImageURL": "http://www.example.com/path/to/product/image.png",
"ProductCategories": ["Fiction", "Children"]
},
{
"ProductID": "1112",
"SKU": "TALEOFTWO",
"ProductName": "A Tale of Two Cities",
"Quantity": 1,
"ItemPrice": 19.99,
"RowTotal": 19.99,
"ProductURL": "http://www.example.com/path/to/product2",
"ImageURL": "http://www.example.com/path/to/product/image2.png",
"ProductCategories": ["Fiction", "Classics"]
}
]
}) ;
</script>Utilisateurs connectés
Si les clients peuvent créer des comptes sur votre site web, vous pouvez ajouter un code supplémentaire pour identifier et suivre les utilisateurs connectés. Ce code doit être exécuté une fois que l'utilisateur s'est connecté.
Voici un exemple de script pour vous aider à démarrer :
klaviyo.identify({
"$email" : customer.email,
"$first_name" : customer.first_name,
"$last_name" : customer.last_name
}) ;
Ajouter des règles de réécriture pour les URL de produits
Votre catalogue de produits Magento 2 devrait se synchroniser normalement avec Klaviyo via notre intégration native, bien que si vous utilisez une structure d'URL personnalisée, vous devrez ajouter quelques règles de réécriture à votre base de code.
L'URL par défaut d'un produit Magento 2 suit la structure suivante :
https://[VOTRE MAGASIN]/catalogue/produit/vue/id/[ID PRODUIT]Si votre magasin utilise une structure URL telle que :
https://[VOTRE MAGASIN]/produits/[Nom du produit]Ensuite, vous devrez ajouter quelques règles de réécriture à votre base de code pour rediriger les liens standard des produits Magento 2 vers votre structure URL personnalisée.
Ressources complémentaires