7 min de lecture

Intégration Ghost

Ajoutez Zenovay à n'importe quelle publication Ghost (Ghost(Pro), Ghost CMS auto-hébergé ou Ghost Cloud) en deux minutes. Code Injection de Ghost est entièrement exposé sur tous les plans, donc cette intégration fonctionne pour les créateurs en offre gratuite et les éditeurs auto-hébergés.

Code Injection est disponible sur tous les plans Ghost, y compris Ghost CMS auto-hébergé. Aucune mise à niveau requise.

Démarrage rapide

Étape	Où	Ce que vous faites
1	Tableau de bord Zenovay	Copiez votre snippet de suivi
2	Admin Ghost → Settings → Code injection → Site Header	Collez-le
3	Sauvegardez	Cliquez sur Save
4	Tableau de bord Zenovay	Les visiteurs en temps réel apparaissent en ~30 secondes

Méthode 1 : Injection dans le Site Header (recommandée)

Le panneau Code Injection de Ghost écrit du HTML brut dans le <head> de chaque page affichée par votre thème. Cela inclut la page d'accueil, les articles, les pages, les tags, les auteurs et le flux d'adhésion.

Étape par étape

Connectez-vous à votre panneau d'administration Ghost (généralement https://your-site.com/ghost/).
Dans la barre latérale gauche, cliquez sur Settings (icône d'engrenage).
Faites défiler jusqu'à Site → Code injection.
Dans le champ Site Header, collez :

<script defer data-tracking-code="YOUR_TRACKING_CODE" src="https://api.zenovay.com/z.js"></script>

Cliquez sur Save.

Vérifier

Ouvrez votre site Ghost en navigation privée et consultez le code source — vous devriez voir <script defer data-tracking-code=...> entre <head> et </head>. Votre visite devrait apparaître dans la vue en temps réel Zenovay en ~30 secondes.

Méthode 2 : Injection par article / par page

Pour ne suivre qu'un article ou une page spécifique (par exemple, une annonce de newsletter payante), ouvrez l'article dans l'éditeur et utilisez Code Injection au niveau de l'article :

Ouvrez un article ou une page dans l'éditeur.
Cliquez sur l'icône d'engrenage (paramètres) en haut à droite.
Faites défiler vers le bas et développez Code injection.
Collez le snippet dans Post Header.
Mettez à jour l'article.

Code Injection par article est ajouté après Code Injection à l'échelle du site. Ne collez pas le tracker dans les deux — vous double-compterez.

Suivi des événements personnalisés

Une fois le tracker chargé, vous pouvez appeler window.zenovay() depuis n'importe quel template de thème Ghost, bloc Code Injection, ou embed HTML Markdown d'article.

Les formulaires d'inscription de Ghost émettent un événement personnalisé members:signup en cas de succès. Ajoutez ceci dans Site Header → Code injection (après la ligne du tracker) :

<script>
  document.addEventListener('DOMContentLoaded', () => {
    document.addEventListener('submit', (e) => {
      const form = e.target;
      if (form?.matches('[data-members-form]')) {
        if (window.zenovay) {
          window.zenovay('track', 'signup', {
            form_type: form.dataset.membersForm || 'signup',
            page: window.location.pathname,
          });
        }
      }
    }, true);
  });
</script>

Ghost affiche les boutons d'abonnement / de déclenchement du portail avec des attributs data-portal. Écoutez les clics :

<script>
  document.addEventListener('DOMContentLoaded', () => {
    document.addEventListener('click', (e) => {
      const target = e.target.closest('[data-portal]');
      if (target && window.zenovay) {
        window.zenovay('track', 'portal_opened', {
          action: target.dataset.portal,
          page: window.location.pathname,
        });
      }
    }, true);
  });
</script>

Identifier les membres

Ghost expose le membre actuel via /members/api/member/. Récupérez et identifiez sur chaque page :

<script>
  fetch('/members/api/member/', { credentials: 'include' })
    .then(r => r.ok ? r.json() : null)
    .then(member => {
      if (member && window.zenovay) {
        window.zenovay('identify', {
          userId: member.uuid,
          email: member.email,
          name: member.name,
          plan: member.subscriptions?.[0]?.plan?.nickname,
        });
      }
    })
    .catch(() => {});
</script>

Suivi des conversions payantes

Pour l'attribution des revenus sur les adhésions payantes, utilisez l'intégration du webhook Stripe de Ghost et envoyez les événements Stripe à Zenovay via notre API de suivi côté serveur. Le suivi côté client manque les événements d'abonnement qui se complètent après que l'utilisateur a fermé l'onglet (Ghost envoie le reçu par e-mail de manière asynchrone).

Exemple côté serveur rapide (Node.js sur votre propre récepteur de webhook) :

// Forward Stripe checkout.session.completed → Zenovay
app.post('/webhooks/stripe', async (req, res) => {
  const event = req.body;
  if (event.type === 'checkout.session.completed') {
    const session = event.data.object;
    await fetch('https://api.zenovay.com/v1/track', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.ZENOVAY_API_KEY}`,
      },
      body: JSON.stringify({
        event: 'purchase',
        userId: session.customer_email,
        properties: {
          transaction_id: session.id,
          revenue: session.amount_total / 100,
          currency: session.currency,
        },
      }),
    });
  }
  res.json({ received: true });
});

Utilisation avec des thèmes Ghost personnalisés

Si vous maintenez un thème Ghost personnalisé (par exemple, forké depuis Casper, Source ou Edition), Code Injection est affiché via le helper {{ghost_head}}. Tant que le fichier default.hbs de votre thème inclut :

{{!-- in default.hbs --}}
{{ghost_head}}

…alors Zenovay se charge correctement. La plupart des thèmes Ghost tiers l'incluent par défaut. Si le vôtre ne l'a pas, ajoutez-le dans <head> avant </head>.

Exigences du plan

Édition Ghost	Code Injection	Thèmes personnalisés	Suivi côté serveur
Ghost(Pro) Starter	✅	❌ (Casper uniquement)	✅ via webhooks
Ghost(Pro) Creator	✅	✅	✅
Ghost(Pro) Team / Business	✅	✅	✅
Ghost CMS auto-hébergé	✅	✅	✅

Pièges courants

{{ghost_head}} absent dans les thèmes personnalisés. C'est le problème n°1 sur les sites avec thème personnalisé. Si le tracker n'apparaît pas dans le code source de la page, vérifiez que votre default.hbs inclut le helper. Sans lui, Code Injection n'a nulle part où s'afficher.

Articles AMP. Si vous avez activé AMP via l'intégration Ghost AMP, Code Injection ne s'applique pas aux URL /your-post/amp/ (AMP supprime les scripts arbitraires). Désactivez AMP ou acceptez que le trafic AMP ne soit pas suivi. À partir de Ghost 5.x, AMP est en train d'être abandonné ; nous recommandons de le désactiver.

E-mails de newsletter. Code Injection s'applique uniquement à votre site web, pas aux e-mails de newsletter sortants. Les ouvertures d'e-mails sont suivies par Ghost lui-même ; vous pouvez synchroniser ces données via l'API Admin Ghost dans Zenovay si vous le souhaitez, mais cela n'est pas dans le périmètre de l'intégration de base.

Articles réservés aux membres. Le tracker se déclenche à chaque rendu de page, y compris les prévisualisations soumises à un paywall. Si vous souhaitez ne suivre les vues d'articles qu'après le déverrouillage du paywall, conditionnez votre événement personnalisé à la réponse /members/api/member/ ci-dessus.

Ghost auto-hébergé sur Docker / Kubernetes. Aucune configuration supplémentaire n'est nécessaire — Code Injection vit dans la base de données Ghost, pas dans le système de fichiers. Collez simplement le snippet via l'interface d'administration comme d'habitude.

Dépannage

Symptôme	Cause probable	Solution
Pas de données	Tracker absent du code source de la page	Vérifiez que `{{ghost_head}}` est présent dans `default.hbs`
Pas de données sur certains articles	Code Injection par article remplace le global	Déplacez le snippet vers le Header global
Pages vues en double	Snippet dans Site Header et Code Injection par article	Choisissez une seule portée
Pas de données sur les URL `/amp/`	AMP supprime les scripts	Désactivez AMP ou acceptez l'écart
Membres jamais identifiés	`/members/api/member/` retourne 404	Vous êtes sur une version Ghost antérieure (< 4.x) — mettez à jour

Confidentialité et conformité

Pour un suivi sans cookies, ajoutez data-cookieless="true" :

<script defer
        data-tracking-code="YOUR_TRACKING_CODE"
        data-cookieless="true"
        src="https://api.zenovay.com/z.js"></script>

Les propres analytics de membres de Ghost utilisent de toute façon des cookies first-party, donc superposer Zenovay en mode sans cookies est un schéma courant : vous conservez les données membres basées sur e-mail de Ghost, tout en obtenant des analytics de visiteurs sans cookies sur le reste du site.

Consultez la Conformité à la confidentialité pour tous les détails.

Ressources associées

Besoin d'aide ? Contactez [email protected] ou visitez notre Centre d'aide.