Apps
Klaviyo

Klaviyo

Guide d'intégration de Klaviyo dans votre thème Shopify pour le marketing par email et l'automatisation.

Vue d'ensemble

Klaviyo est une plateforme de marketing par email qui permet de :

  • Collecter les emails des visiteurs
  • Créer des campagnes email automatisées
  • Suivre les comportements d'achat
  • Personnaliser les messages selon les données clients

Installation

Étape 1 : Installer l'app Klaviyo

  1. Aller dans Shopify Admin → Apps
  2. Rechercher "Klaviyo"
  3. Installer l'app et suivre le processus de configuration
  4. Connecter votre compte Klaviyo avec votre boutique Shopify

Étape 2 : Récupérer votre Public API Key

  1. Se connecter à votre compte Klaviyo (opens in a new tab)
  2. Aller dans Account → Settings → API Keys
  3. Copier votre Public API Key (commence par pk_)

Étape 3 : Ajouter le script Klaviyo dans theme.liquid

Ouvrez layout/theme.liquid et ajoutez le script Klaviyo dans la section <head> :

{% comment %} Klaviyo Integration {% endcomment %}
<script async type="text/javascript" src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=YOUR_PUBLIC_API_KEY"></script>

Remplacez YOUR_PUBLIC_API_KEY par votre clé API publique Klaviyo.

Intégrations de base

1. Formulaire d'inscription newsletter

Créer un snippet newsletter-klaviyo.liquid :

<div class="mm-newsletter-form" data-klaviyo-form>
  <form id="klaviyo-form-newsletter" class="klaviyo-form" action="//manage.kmail-lists.com/subscriptions/subscribe" method="GET" target="_blank">
    <input type="hidden" name="g" value="YOUR_LIST_ID">
    <input type="hidden" name="$fields" value="$first_name,$last_name">
    
    <div class="mm-form-group">
      <label for="newsletter-email" class="visually-hidden">Email</label>
      <input 
        type="email" 
        id="newsletter-email" 
        name="email" 
        placeholder="Votre email"
        required
        aria-required="true"
      >
    </div>
    
    <div class="mm-form-group">
      <button type="submit" class="mm-btn mm-btn-primary">
        S'inscrire
      </button>
    </div>
  </form>
</div>

Remplacez YOUR_LIST_ID par l'ID de votre liste Klaviyo. Vous pouvez le trouver dans Klaviyo → Lists & Segments → Sélectionner votre liste → Settings → List ID.

2. Tracking des événements d'achat

Klaviyo suit automatiquement les événements via l'app Shopify, mais vous pouvez également ajouter du tracking personnalisé :

// Tracking d'un événement personnalisé après un ajout au panier
function trackAddedToCart(variantId, quantity, price) {
  if (typeof _learnq !== "undefined") {
    _learnq.push(['track', 'Added to Cart', {
      '$value': price,
      'ItemName': variantId,
      'Quantity': quantity
    }]);
  }
}
 
// Utilisation dans votre code
document.addEventListener('DOMContentLoaded', function() {
  const addToCartButtons = document.querySelectorAll('[data-add-to-cart]');
  
  addToCartButtons.forEach(button => {
    button.addEventListener('click', function(e) {
      const variantId = this.dataset.variantId;
      const quantity = parseInt(this.dataset.quantity) || 1;
      const price = parseFloat(this.dataset.price) || 0;
      
      // Track l'événement
      trackAddedToCart(variantId, quantity, price);
    });
  });
});

3. Popup d'inscription (Embedded Form)

Klaviyo offre des formulaires intégrés. Pour ajouter un formulaire embed :

{% comment %} Dans votre section ou snippet {% endcomment %}
<div class="klaviyo-form" data-klaviyo-form-id="YOUR_FORM_ID"></div>

Pour obtenir votre Form ID :

  1. Aller dans Klaviyo → Signup Forms
  2. Créer ou sélectionner un formulaire
  3. Cliquer sur Embed Code
  4. Copier le Form ID

4. Tracking de la page vue produit

Ajouter dans votre template product.liquid :

<script>
  (function() {
    if (typeof _learnq !== "undefined") {
      _learnq.push(['track', 'Viewed Product', {
        '$value': {{ product.selected_or_first_available_variant.price | divided_by: 100.0 }},
        'ProductName': {{ product.title | json }},
        'ProductID': {{ product.id | json }},
        'SKU': {{ product.selected_or_first_available_variant.sku | json }},
        'Categories': {{ product.collections | map: 'title' | json }},
        'ImageURL': {{ product.featured_image | image_url: width: 1024 | json }},
        'URL': {{ request.origin | append: product.url | json }},
        'Brand': {{ product.vendor | json }},
        'Price': {{ product.selected_or_first_available_variant.price | divided_by: 100.0 }},
        'CompareAtPrice': {{ product.selected_or_first_available_variant.compare_at_price | divided_by: 100.0 | default: null }}
      }]);
    }
  })();
</script>

Automatisations avancées

Abandon de panier

Klaviyo suit automatiquement les abandons de panier via l'intégration Shopify. Vous pouvez personnaliser les emails d'abandon dans Klaviyo → Flows → Abandoned Cart.

Back in Stock

Pour activer les notifications "Back in Stock" :

  1. Dans Klaviyo → Flows → Créer un nouveau flow
  2. Sélectionner le déclencheur Back in Stock
  3. Configurer le message et les conditions

Recommandations produits

Utiliser l'API Klaviyo pour afficher des recommandations basées sur l'historique :

async function getKlaviyoRecommendations(customerEmail) {
  try {
    const response = await fetch(`https://a.klaviyo.com/api/v1/person/${customerEmail}/recommendations`, {
      headers: {
        'Authorization': 'Klaviyo-API-Key YOUR_API_KEY'
      }
    });
    const data = await response.json();
    return data.recommendations;
  } catch (error) {
    console.error('Erreur récupération recommandations:', error);
    return [];
  }
}

Personnalisation des segments

Créer des segments dans Klaviyo

  1. Aller dans Lists & Segments
  2. Cliquer sur Create Segment
  3. Définir les critères (ex: clients ayant acheté dans les 30 derniers jours)
  4. Utiliser le segment dans vos campagnes

Utiliser les tags dans Liquid

Klaviyo synchronise automatiquement les tags Shopify. Vous pouvez les utiliser dans vos emails :

{% if customer.tags contains 'VIP' %}
  <!-- Contenu spécial pour clients VIP -->
{% endif %}

Tests et débogage

Vérifier que Klaviyo est chargé

Ouvrir la console du navigateur et vérifier :

// Vérifier si Klaviyo est chargé
console.log(typeof _learnq); // Devrait retourner "object"
 
// Vérifier les événements trackés
_learnq.push(['track', 'Test Event', {
  'TestProperty': 'TestValue'
}]);

Debug dans Klaviyo

  1. Aller dans Account → Settings → Debug Mode
  2. Activer le mode debug pour voir tous les événements trackés
  3. Vérifier les profils dans Profiles → Rechercher un email

Bonnes pratiques

Performance

  • ✅ Charger le script Klaviyo en asynchrone
  • ✅ Éviter de bloquer le rendu de la page
  • ✅ Utiliser defer ou async pour les scripts personnalisés

Respect de la vie privée

  • ✅ Informer les utilisateurs de l'utilisation de leurs données
  • ✅ Respecter le RGPD (consentement explicite)
  • ✅ Permettre la désinscription facile

Données à tracker

  • ✅ Page vue produit
  • ✅ Ajout au panier
  • ✅ Commencement de checkout
  • ✅ Achat complété
  • ✅ Recherche de produits
  • ✅ Consultation de collection

Ressources

Wishlist PowerJudge.me