Comment s’intégrer à OpenCart

Objectif de cet article

Apprenez à intégrer OpenCart avec Klaviyo. Une fois ces étapes franchies, vous serez en mesure de personnaliser et de cibler les e-mails en fonction des achats de chaque client et de l'activité du site Web. L'intégration d'OpenCart se synchronise toutes les heures.

Avant de commencer

Veuillez noter que Klaviyo ne synchronise pas votre catalogue à partir d’OpenCart.

Ajouter l’intégration OpenCart

Le processus d’ajout de l’intégration OpenCart de Klaviyo se fait en plusieurs étapes et nécessite des actions au sein d’OpenCart et de Klaviyo.

Pour commencer, Klaviyo prend actuellement en charge OpenCart 1.4.x et 1.5.x. Téléchargez le module OpenCart de Klaviyo ici : https://www.klaviyo.com/media/downloads/OpenCartKlaviyo-1.1.0.tgz.

1. Extrayez l’archive à la racine de votre installation OpenCart.
2. Connectez-vous à la section d’administration OpenCart et accédez à la page Extensions > Modules.
3. Installez le module Klaviyo, puis cliquez sur Modifier pour le module Klaviyo.
4. Copiez et collez le code PHP suivant à la fin de upload/index.php, juste avant la ligne $response->getOutput(); :

// [Klaviyo] Save customer cart if it exists.
if ($registry->get('cart')->hasProducts()) {
  $registry->get('load')->model('module/klaviyo');

  if ($registry->get('customer')->isLogged()) {
    $registry->get('model_module_klaviyo')->saveCustomerCart(
      session_id(),
      $registry->get('customer')->getId(),
      $session->data['cart']
    );
  } else if (array_key_exists('guest', $session->data)) {
    $registry->get('model_module_klaviyo')->saveGuestCart(
      session_id(),
      $session->data['guest'],
      $session->data['cart']
    );
  }
}

1. Dans Klaviyo, sélectionnez l’onglet Intégrations.
2. Cliquez sur Découvrir les applications et recherchez OpenCart, puis cliquez sur la carte. Ensuite, cliquez sur Installer.
3. Saisissez l’URL de votre site OpenCart dans URL du magasin, puis cliquez sur Se connecter à OpenCart.

4. Sur la page suivante, copiez la clé d’API sous Klaviyo OpenCart module, puis collez-la dans les paramètres du module Klaviyo dans OpenCart. Enregistrez les paramètres du module Klaviyo dans l’administration OpenCart. Conservez une copie de cette clé en lieu sûr avant de terminer la configuration ; Klaviyo ne l’affichera plus ensuite.

5. Dans Klaviyo, sélectionnez Ajouter de nouveaux clients OpenCart à une liste Klaviyo, puis choisissez une liste si vous souhaitez ajouter les clients qui ont accepté de recevoir votre newsletter OpenCart lorsque les données de leur commande se synchronisent. Ce paramètre ne les abonne pas aux messages marketing dans Klaviyo. Si vous ne souhaitez pas ajouter de clients à une liste, décochez la case.
6. De retour dans Klaviyo, cliquez sur Finaliser la configuration pour commencer à synchroniser les données.

Installer le tracking sur site de Klaviyo

Pour suivre l’activité sur site dans OpenCart, commencez par trouver votre clé d’API publique Klaviyo en cliquant sur le nom de votre compte dans le coin inférieur gauche, puis en accédant à Paramètres > clés d’API. Copiez la clé sous Clé d’API publique / identifiant de site. Votre clé publique comporte 6 caractères et est différente de la clé du module OpenCart utilisée ci-dessus. Il existe 2 types de tracking sur site que vous pouvez installer :

• Active on Site
  Cet indicateur est suivi chaque fois qu’un navigateur identifiable consulte votre site web
• Viewed Product
  Cet indicateur est suivi chaque fois qu’un navigateur identifiable consulte une page produit sur votre site web

Ajouter le tracking « Activité sur le site »

Cet indicateur est suivi chaque fois qu’un navigateur identifiable visite votre site web. Pour commencer à suivre l’activité Active on Site :

1. Ajoutez l’extrait de code suivant à votre modèle de boutique principal afin qu’il soit inclus sur toutes les pages. Vous devriez placer cet extrait soit avec les autres scripts d’analyse que vous utilisez, soit juste avant le tag de fermeture </body> :
   

<script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>
<script type="text/javascript"> 
//Initialize Klaviyo object on page load
!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>

1. Veillez à remplacer PUBLIC_API_KEY par la clé d’API publique de votre compte Klaviyo.
2. Si les visiteurs ou les clients peuvent créer des comptes pour votre boutique, adaptez l’exemple suivant au langage de modèle OpenCart, puis ajoutez-le directement sous le premier extrait de code. Remplacez les champs client d’exemple par les données client connectées de votre boutique avant de publier :

<script type="text/javascript">
  var klaviyo = window.klaviyo || [];
  {% if user.is_logged_in %}
  klaviyo.identify({
    $email: '{{ user.email }}',
    $first_name: '{{ user.first_name }}',
    $last_name: '{{ user.last_name }}'
    });
  {% endif %}
</script>

1. Selon les types de modèles que vous utilisez pour votre site web, la syntaxe {% if user.is_logged_in %} et {{ user.email }} est probablement différente. À l’aide du langage de modèle disponible, vous souhaitez vérifier si la personne qui consulte la page actuelle est connectée. Si c’est le cas, vous devez afficher son e-mail et son nom, s’ils sont disponibles. Si vous n’avez pas d’informations sur le nom, supprimez ces deux lignes, ainsi que la virgule finale après la ligne $email. Échappez les valeurs d’e-mail et de nom pour JavaScript afin que les guillemets ne cassent pas l’extrait de code.

Ajouter le tracking « Produit consulté »

Si vous souhaitez configurer un flux d’abandon de navigation ou créer des segments basés sur les données de navigation des produits, vous devrez ajouter un tracking d’événement JavaScript pour un indicateur « Produit consulté ».

1. Sur votre modèle de page produit, ajoutez l’exemple suivant après l’extrait de tracking sur site principal et son code d’initialisation. Adaptez les espaces réservés au langage de votre modèle OpenCart avant de publier :

<script type="text/javascript">
    var klaviyo = window.klaviyo || [];
    klaviyo.track("Viewed Product", {
      Title: '{{ product.title }}',
      ItemId: {{ product.id }},
      Categories: {{ category in product.categories|json }}, // The list of categories is an array of strings. 
      ImageUrl: '{{ product.image_url }}',
      Url: '{{ product.url }}',
      Metadata: {
        Brand: '{{ product.brand }}',
        Price: {{ product.price }},
        CompareAtPrice: {{ product.compare_at_price }} // If you have a compare at price. You could also include this for a sale or special price.
      }
  });
</script>

1. L’extrait ci-dessus utilise des espaces réservés {{ }} à titre d’exemple. Remplacez-les par des valeurs rendues dynamiquement pour le produit consulté, en utilisant le langage de modèle OpenCart. Affichez les catégories sous forme de tableau de chaînes, et les prix sous forme de nombres, et échappez les valeurs de texte pour JavaScript afin que les noms contenant des guillemets ne cassent pas l’extrait de code. Supprimez le champ de prix comparé si votre boutique ne l’utilise pas.
2. Une fois le tracking Viewed Product configuré pour votre site, les données Viewed Product devraient commencer à s’afficher dans votre compte Klaviyo à mesure que des visiteurs connus consultent vos pages produit.

Comment fonctionne le tracking sur site

Klaviyo associe l’activité sur site à un profil une fois que le navigateur du visiteur est identifié. Une visite précédente n’est pas requise. Votre boutique peut identifier un visiteur des manières suivantes :

• Si quelqu’un a, à un moment donné, cliqué sur un Klaviyo Email pour accéder à votre site web
• Si quelqu’un s’est, à un moment donné, abonné/inscrit via un formulaire Klaviyo
• Si quelqu’un se connecte à votre boutique et que l’extrait de code d’identification ci-dessus envoie ses informations client à Klaviyo

Si Anonymous backfill est activé, Klaviyo peut stocker l’activité sur le site dans le navigateur du visiteur avant qu’il ne soit identifié, et l’ajouter ensuite à son profil. En savoir plus sur l’intégration des données manquantes dans l’activité des visiteurs anonymes.

Suivre la synchronisation Klaviyo

Le temps nécessaire pour synchroniser les données historiques de clients et de commandes depuis votre boutique OpenCart dépend de la taille de votre boutique. Pour vérifier la progression, ouvrez intégrations et sélectionnez OpenCart, puis ouvrez l’onglet Données. La section données historiques affiche la progression de la synchronisation et confirme lorsque la synchronisation des données historiques est terminée.

Pour vérifier vos intégrations :

1. Accédez à Analyse > Indicateurs et filtrez par OpenCart. Ouvrez Placed Order et sélectionnez l’onglet Fil d’activité. Si votre intégration a commencé à synchroniser des données, vous commencerez à voir les événements Placed Order s’afficher ici.
2. Klaviyo importe automatiquement les commandes historiques associées à des adresses e-mail client valides, ainsi que les statuts de commande listés ci-dessous. Une fois la synchronisation historique terminée, comparez le nombre d’événements Commande passée sur un jour donné avec les commandes correspondantes dans OpenCart.
3. Par exemple, ouvrez l’onglet Graphique pour Commande passée, choisissez Quotidien et Total, puis sélectionnez une plage de dates qui inclut hier. Survolez le point de données d’hier, ou consultez le tableau sous le graphique, pour voir le nombre de commandes signalées.
4. Comparez ce nombre aux commandes OpenCart du même jour qui répondent aux exigences relatives aux e-mails et au statut ci-dessus. Si les nombres diffèrent, vérifiez que la synchronisation est terminée et que les deux vues utilisent le même fuseau horaire.
5. Pour vérifier ou mettre à jour le fuseau horaire de votre compte :
   • Cliquez sur le nom de votre compte en bas à gauche.
   • Sélectionnez Paramètres.
   • Accédez à l’onglet Compte et recherchez Fuseau horaire.
   • Si nécessaire, sélectionnez le fuseau horaire correct, puis cliquez sur Enregistrer.

Données synchronisées depuis OpenCart

• Données relatives aux ventes et aux commandes
  Quels produits ont été achetés, y compris les détails et les images des produits.
• Informations sur le client
  Adresse e-mail, prénom, nom, numéro de téléphone, groupe de clients, boutique OpenCart, et informations d’inscription à la newsletter.
• Données de paiement initié
  Utilisées pour déclencher des e-mails de panier abandonné. Cela nécessite l’extrait de code PHP que vous avez ajouté lors de l’intégration ainsi qu’un panier associé à un client connecté ou des informations de paiement en tant qu’invité contenant une adresse e-mail valide.
• Données de commande exécutée
  Utilisées pour suivre le moment où les commandes sont expédiées.
• Onsite tracking
  Activité Active on Site et Viewed Product collectée par les extraits de code JavaScript que vous installez séparément. Ces événements sont distincts de la synchronisation des commandes et du paiement OpenCart.

Pour consulter vos indicateurs OpenCart, accédez à Analyse > Indicateurs dans Klaviyo, où vous pouvez filtrer par OpenCart.

Par défaut, Klaviyo synchronise les statuts suivants pour les indicateurs Placed Order et Fulfilled Order :

• Commande passée : En attente, Traitée, En cours de traitement, Expédiée, Terminée
• Commande exécutée : Expédiée, terminée

Ressources supplémentaires