Comment intégrer une configuration headless Magento 2
Objectif de cet article
Découvrez comment intégrer Klaviyo à une configuration headless Magento 2. Si vous utilisez Magento 2 pour alimenter le back-end de votre boutique e-commerce, mais un autre framework pour le front-end (comme React.js, Angular, etc.), les informations suivantes vous concernent.
Cette intégration nécessite 3 étapes :
- Connectez votre boutique Magento 2 via l’intégration native de Klaviyo pour synchroniser les données de commande, de catalogue et d’abonné.
- Ajoutez manuellement des extraits de code à votre site pour activer la fonctionnalité de tracking sur site.
- (Si vous utilisez une structure d’URL personnalisée pour votre catalogue de produits) Ajoutez des règles de réécriture pour les URL de produits.
Connecter l’intégration native de Klaviyo
Tout d’abord, connectez votre boutique Magento 2 via l’intégration native de Klaviyo afin de synchroniser les données de commande, de catalogue et d’abonné en suivant les étapes dans Démarrer avec Magento 2.
Une grande partie de l’intégration Magento 2 de Klaviyo repose sur la récupération de données via l’API côté serveur de Magento. En règle générale, cela n’est pas affecté par l’utilisation d’un frontend découplé, et l’intégration native suivra les événements suivants sans configuration supplémentaire :
- Commande passée
- Commande Traitée
- Expédition Terminée
- Commande Annulée
- Commande Remboursée
- Début de commande
En outre, veuillez noter que :
- Les événements Started Checkout seront synchronisés, à condition que vous continuiez à créer des devis et à leur attribuer une adresse e-mail lorsque l’utilisateur passe au paiement.
- Si vous avez activé la synchronisation des clients abonnés à la table de newsletter Magento 2, la synchronisation devrait fonctionner comme prévu.
Ajouter manuellement des extraits de code
Si vous utilisez une configuration headless, vous devez ajouter manuellement le JavaScript « Active on Site » de Klaviyo (également connu sous le nom de Klaviyo.js) à votre site. Klaviyo.js suit quand les utilisateurs sont actifs sur votre site et active les formulaires Klaviyo.
Nous fournissons également des extraits qui vous permettent d’effectuer les actions suivantes :
- Tracking Viewed Product
Suivez lorsqu’un utilisateur consulte des produits spécifiques sur votre site (ce qui peut être exploité dans un flux d’abandon de navigation). - Tracking des articles récemment consultés
Effectuez le tracking des articles récemment consultés sur le profil d’un utilisateur. - Tracking Added to Cart
Suivez le moment où un utilisateur ajoute un article à son panier. - Tracking des utilisateurs connectés
Si vous disposez d’une fonctionnalité de création de compte, suivez lorsqu’un utilisateur se connecte.
Activité sur le Site
Ajoutez l’extrait de code Klaviyo.js suivant afin qu’il apparaisse sur chaque page de votre site web. Cela activera le tracking Active on 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 toute page sur laquelle vous souhaitez ajouter l’un des extraits de code suivants (comme Produit consulté, Ajouté au panier, etc). L’objet klaviyo ne doit être chargé qu’une seule fois par page.
Pour charger l’objet klaviyo, installez manuellement l’extrait de code 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>Consultation d’un produit
Si vous souhaitez configurer un flux d’abandon de navigation ou créer des segments basés sur l’activité de consultation des produits, vous devrez ajouter un tracking d’événement JavaScript pour l’indicateur Viewed Product. Tous les indicateurs Viewed Product sont associés à des profils utilisateur. Dans le modèle de votre page produit, ajoutez l’extrait de code 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("Viewed Product", item);
</script>Veillez à mettre à jour les valeurs des propriétés JSON dans l’extrait afin qu’elles soient extraites dynamiquement des informations pertinentes nécessaires pour cette propriété.
Articles consultés récemment
De plus, il existe un autre extrait de code qui permet d’ajouter des entrées à un flux visuel « Articles consultés récemment » sur le profil de l’utilisateur. L’extrait de code suivant peut être ajouté directement sous l’extrait de code Viewed Product.
Veillez à remplacer item.___ dans l’extrait de code 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({
"Title": item.ProductName,
"ItemId": item.ProductID,
"Categories": item.Categories,
"ImageUrl": item.ImageURL,
"Url": item.URL,
"Metadata": {
"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 contenait déjà un article (Winnie l’ourson) et où un autre article venait d’être ajouté au panier (Le Conte de deux cités) :
<script type="text/javascript">
klaviyo.track("Added to Cart", {
"$value": 29.98,
"AddedItemProductName": "A Tale of Two Cities",
"AddedItemProductID": "1112",
"AddedItemSKU": "TALEOFTWO",
"AddedItemCategories": ["Fiction", "Classics", "Children"],
"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 the Pooh", "A Tale of Two Cities"],
"CheckoutURL": "http://www.example.com/path/to/checkout",
"Items": [{
"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 souhaiterez peut-être ajouter du 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 des produits
Votre catalogue de produits Magento 2 devrait se synchroniser normalement avec Klaviyo via nos intégrations natives, mais si vous utilisez une structure d’URL personnalisée, vous devrez ajouter des règles de réécriture à votre base de code.
L’URL de produit Magento 2 par défaut suit la structure ci-dessous :
https://[YOUR STORE]/catalog/product/view/id/[PRODUCT ID]Si votre boutique utilise une structure d’URL comme :
https://[YOUR STORE]/products/[Product Name]Vous devrez ensuite ajouter des règles de réécriture à votre base de code pour rediriger les liens produits Magento 2 standard vers votre structure d’URL personnalisée.