Un peu de JavaScript pour adapter votre invitation à votre newsletter à chaque article

Imaginez que vous venez de lire un article sur les prix.

Vous êtes indépendant, vous avez passé trop de temps sur votre dernier devis et vous commencez à vous demander si vous n’avez pas encore vendu votre prestation trop bas.

En bas de la page, on vous propose de « recevoir les dernières actualités ».

Bof.

Maintenant, imaginez qu’on vous propose de recevoir chaque matin une idée pour mieux présenter vos offres, défendre vos prix et vendre votre travail.

C’est toujours une newsletter. Mais cette fois, vous voyez un peu mieux pourquoi vous laisseriez votre adresse.

C’est une petite modification que j’ai envie de tester sur mon site : adapter l’invitation à la newsletter au sujet que la personne est en train de lire.

Et comme je n’ai pas spécialement envie de modifier cinquante articles à la main, autant faire travailler quelques lignes de code.

Le sujet de l’article donne déjà une indication

On peut aller assez loin dans la personnalisation. Construire des segments, suivre des comportements, attribuer des scores…

Pour commencer, on dispose d’une information beaucoup plus simple : la page que le visiteur a ouverte.

Quelqu’un qui lit un article sur les domaines expirés ne cherche pas exactement la même chose qu’une personne qui consulte une méthode pour écrire un email de vente.

Ça ne nous raconte pas toute sa vie. Il est peut-être arrivé là par curiosité et repartira dans trente secondes.

Mais le sujet lu donne une première piste pour formuler une invitation pertinente.

Si vous partez de zéro, commencez par relier une question que votre lecteur cherche sur Google à un parcours vers vos premiers abonnés newsletter.

Sur mon site, je peux déjà partir de mes trois catégories :

L’idée est de choisir, parmi les bénéfices réels de la newsletter, celui qui prolonge le mieux la lecture.

Si vous promettez des astuces SEO sous un article SEO, puis n’en parlez jamais dans vos emails, le changement de texte aura surtout servi à créer une déception.

Trois invitations suffisent pour commencer

Je ne préparerais pas une phrase différente pour chaque article dès le départ.

Avec peu de trafic, vous allez multiplier les variantes sans avoir beaucoup d’informations pour les comparer. Et vous devrez entretenir tous ces textes.

Trois versions, plus une invitation générale pour les pages non classées, donnent déjà de quoi travailler.

Pour la catégorie Produit, j’utiliserais par exemple :

Vous avez une idée… mais est-ce que quelqu’un l’achètera ?
Je partage chaque matin une idée concrète autour des produits, du trafic ou de la vente, pour vous aider à construire une activité qui rapporte.

Pour la catégorie Trafic :

Votre site mérite d’être vu par d’autres personnes que vous.
Recevez mes prochains emails sur les façons d’attirer des prospects, de construire vos offres et de transformer les visites en ventes.

Et pour la catégorie Conversion :

Vos visiteurs regardent. Vous aimeriez qu’ils passent à l’action.
Chaque matin, une idée concrète pour travailler vos offres, vos textes et votre marketing.

On peut discuter les formulations. Leur intérêt est surtout de permettre au lecteur de comprendre le rapport entre l’article et l’inscription.

Ensuite, il faut mesurer ce qui se passe.

Le petit montage : un bloc, trois textes et un lien identifiable

Le principe est assez simple.

On place le même bloc d’inscription dans le modèle des articles. On lui indique la catégorie à utiliser. Un script sélectionne ensuite le titre, la description et le lien correspondants.

Voici une première version du bloc :

<aside class="newsletter-box" data-newsletter-theme="trafic">
  <strong class="newsletter-box__title">
    Une idée concrète pour votre business, chaque matin.
  </strong>

  <p class="newsletter-box__description">
    Produits, trafic, conversion : recevez mes prochains emails
    pour faire avancer votre activité.
  </p>

  <a
    class="newsletter-box__link"
    href="https://jeremy-allard.com/newsletter/?ref=article_general"
  >
    Découvrir la newsletter
  </a>

  <small>Un email par jour. Désinscription en un clic.</small>
</aside>

Le texte général reste utilisable même si le script ne se charge pas.

L’attribut data-newsletter-theme indique ici trafic. Pour un autre article, il pourra contenir produit ou conversion.

Voici le script qui choisit le message :

<script>
(() => {
  const messages = {
    produit: {
      title: "Vous avez une idée… mais est-ce que quelqu’un l’achètera ?",
      description:
        "Je partage chaque matin une idée concrète autour des produits, " +
        "du trafic ou de la vente, pour vous aider à construire " +
        "une activité qui rapporte."
    },
    trafic: {
      title: "Votre site mérite d’être vu par d’autres personnes que vous.",
      description:
        "Recevez mes prochains emails sur les façons d’attirer des prospects, " +
        "de construire vos offres et de transformer les visites en ventes."
    },
    conversion: {
      title: "Vos visiteurs regardent. Vous aimeriez qu’ils passent à l’action.",
      description:
        "Chaque matin, une idée concrète pour travailler vos offres, " +
        "vos textes et votre marketing."
    }
  };

  function personalizeNewsletterBoxes() {
    document.querySelectorAll("[data-newsletter-theme]").forEach((box) => {
      const theme = box.dataset.newsletterTheme;

      if (!Object.prototype.hasOwnProperty.call(messages, theme)) return;

      const title = box.querySelector(".newsletter-box__title");
      const description = box.querySelector(".newsletter-box__description");
      const link = box.querySelector(".newsletter-box__link");

      if (!title || !description || !link) return;

      const message = messages[theme];
      const url = new URL(link.href);

      url.searchParams.set("ref", `article_${theme}`);
      url.searchParams.set("source_article", window.location.pathname);

      title.textContent = message.title;
      description.textContent = message.description;
      link.href = url.toString();
    });
  }

  if (document.readyState === "loading") {
    document.addEventListener(
      "DOMContentLoaded",
      personalizeNewsletterBoxes,
      { once: true }
    );
  } else {
    personalizeNewsletterBoxes();
  }
})();
</script>

Placez le script une seule fois dans votre modèle ou votre fichier JavaScript.

Pour éviter de renseigner la catégorie dans chaque article, faites générer la valeur de data-newsletter-theme par votre CMS. Si un article appartient à plusieurs catégories, choisissez une règle claire : sa catégorie principale, par exemple.

Exemple de code:

add_filter( 'the_content', 'monsite_newsletter_contextuelle', 20 );

function monsite_newsletter_contextuelle( $content ) {

    // Uniquement le contenu principal des articles publics.
    if (
        is_admin() ||
        is_feed() ||
        ! is_singular( 'post' ) ||
        ! in_the_loop() ||
        ! is_main_query() ||
        post_password_required()
    ) {
        return $content;
    }

    // À PERSONNALISER : adresse de votre page d'inscription.
    $newsletter_url = home_url( '/newsletter/' );

    // À PERSONNALISER : slug de catégorie => titre et texte.
    // Si plusieurs catégories correspondent, la première ci-dessous gagne.
    $messages = array(
        'produit' => array(
            'titre' => 'Une idée de produit à concrétiser ?',
            'texte' => 'Recevez mes conseils pour construire une offre qui donne envie d’acheter.',
        ),
        'trafic' => array(
            'titre' => 'Vous aimeriez attirer davantage de prospects ?',
            'texte' => 'Recevez mes prochaines idées pour faire connaître votre activité.',
        ),
        'conversion' => array(
            'titre' => 'Des visiteurs, mais trop peu de ventes ?',
            'texte' => 'Recevez mes conseils pour améliorer vos offres et vos textes de vente.',
        ),
    );

    // Message utilisé si aucune catégorie ne correspond.
    $theme   = 'general';
    $message = array(
        'titre' => 'On continue par email ?',
        'texte' => 'Recevez mes prochains conseils pour développer votre activité.',
    );

    $categories = wp_get_post_terms(
        get_the_ID(),
        'category',
        array( 'fields' => 'slugs' )
    );

    if ( ! is_wp_error( $categories ) ) {
        foreach ( $messages as $slug => $version ) {
            if ( in_array( $slug, $categories, true ) ) {
                $theme   = $slug;
                $message = $version;
                break;
            }
        }
    }

    // Transmet la catégorie et l'article à la page d'inscription.
    $url = add_query_arg(
        array(
            'ref'            => 'article_' . $theme,
            'source_article' => get_post_field( 'post_name', get_the_ID() ),
        ),
        $newsletter_url
    );

    $bloc = sprintf(
        '<aside class="newsletter-box" data-newsletter-theme="%1$s"
            style="margin:32px 0;padding:24px;border:1px solid #ddd;border-radius:12px;">
            <strong class="newsletter-box__title"
                style="display:block;font-size:1.2em;">%2$s</strong>
            <p class="newsletter-box__description">%3$s</p>
            <a class="newsletter-box__link" href="%4$s"
                style="display:inline-block;padding:12px 18px;background:#111;color:#fff;text-decoration:none;border-radius:6px;">
                Découvrir la newsletter
            </a>
            <small style="display:block;margin-top:10px;">
                Désinscription possible à tout moment.
            </small>
        </aside>',
        esc_attr( $theme ),
        esc_html( $message['titre'] ),
        esc_html( $message['texte'] ),
        esc_url( $url )
    );

    return $content . $bloc;
}

C’est la partie à adapter à votre site. Le script, lui, se contente de lire cette valeur.

Pas besoin de réécrire tous les articles

L’intérêt du montage apparaît quand le bloc est intégré au modèle partagé par vos articles.

Vous changez une formulation dans le script, et les blocs concernés utilisent le nouveau texte.

Vous pouvez ensuite prévoir une exception pour un article important. Par exemple, un contenu consacré à l’écriture quotidienne pourrait recevoir une invitation plus précise sur les emails.

Mais j’attendrais d’avoir une raison de le faire.

Quand on aime développer, on peut vite passer de « trois messages selon la catégorie » à « un moteur de personnalisation capable de gérer toutes les situations imaginables ».

Pendant ce temps, le premier test attend toujours.

D’ailleurs, si vous avez la main sur le modèle côté serveur, vous pouvez aussi y sélectionner directement le bon message. Le visiteur recevra le texte adapté dès le chargement. JavaScript est une façon pratique de tester l’idée ; ce n’est pas une obligation.

Le lien ne mesure pas tout seul les inscriptions

Dans le script, j’ajoute deux paramètres à l’adresse de destination :

• ref identifie la version de l’invitation ;
• source_article indique l’article depuis lequel la personne arrive.

Ça permet de transmettre le contexte à la page newsletter.

Mais ces paramètres ne vont pas, par magie, apparaître dans votre liste d’abonnés.

Pour savoir quel article a réellement amené une inscription, il faut que votre formulaire récupère ces valeurs et les conserve avec l’inscription, ou que votre système de suivi les relie à l’événement correspondant.

Si vous utilisez une confirmation par email, distinguez aussi le formulaire envoyé de l’abonnement confirmé.

C’est un détail qui compte : un clic sur “Découvrir la newsletter” montre de l’intérêt. Il ne vous donne pas encore un nouvel abonné.

Ce que je regarderais pour décider si ça vaut le coup

Je suivrais d’abord le parcours complet :

1. La personne consulte l’article et, si possible, voit le bloc.
2. Elle clique sur l’invitation.
3. Elle remplit le formulaire.
4. Elle confirme son inscription lorsque c’est nécessaire.

Le chiffre qui m’intéresse au bout, c’est le nombre d’abonnés confirmés obtenu par rapport aux visiteurs exposés à l’invitation.

Les étapes intermédiaires servent à comprendre ce qui bloque.

Si davantage de personnes cliquent, mais que les inscriptions ne suivent pas, la promesse du bloc et celle de la page d’arrivée méritent d’être comparées. Peut-être que l’invitation donne une attente que la page newsletter ne satisfait pas.

Si les clics restent rares, il faudra regarder le message, mais aussi l’emplacement du bloc et sa visibilité sur téléphone.

Et si seulement douze personnes ont vu la nouvelle version, inutile d’organiser une conférence sur les résultats.

Avec peu de trafic, on peut vérifier que tout fonctionne et observer les premiers signaux. Il faudra davantage de données pour conclure que la personnalisation améliore réellement les inscriptions. Une comparaison avant/après restera notamment influencée par les articles visités et les sources de trafic.

Commencez par une catégorie

Choisissez quelques articles qui reçoivent déjà des visiteurs et qui traitent d’un problème proche de votre newsletter.

Préparez une invitation cohérente. Vérifiez le rendu sur mobile, le lien et la remontée des inscriptions. Puis laissez les visiteurs l’utiliser.

Vous aurez au moins remplacé un vague « inscrivez-vous » par une proposition dont le lecteur peut comprendre l’intérêt.

Et vous aurez un petit système que vous pourrez améliorer sans rouvrir chaque article.

Si vous aimez ce genre de bricolage, où quelques lignes de code permettent de tester une idée marketing, vous pouvez recevoir ma newsletter quotidienne ici. J’y partage des idées autour des produits, du trafic et de la vente, avec le même objectif : trouver quelque chose d’utile à essayer.