tools-icon Outils CRO gratuits

Des outils et procédures que j'utilise pour optimiser le revenu de mes clients.

ou
Je respecte votre confidentialité Vous devrez confirmer votre adresse email pour valider que la requête provient bien de vous. Je ne vous spammerais pas et je ne partagerai pas vos données avec qui que ce soit. Merci de votre confiance

Je suis spécialisé dans la conception et l'exécution de stratégies marketing de croissance.

Je travaille avec 2/3 clients à la fois, sur des durées de 3 à 6 mois. Mes tarifs - et les résultats - sont élevés (2500-5000€/mois).

Qui peut candidater ?

Les entreprises réalisant un CA en ligne supérieur à 1M/mois .

Comment candidater ?

Vous commencez en achetant un diagnostic de croissance :


1500 €

- 33%
Diagnostic CRO à

seulement 990 €

Créer des landing pages dynamiques avec Google Optimize

Temps de lecture: 9 minutes, 2 secondes
Créer des landing pages dynamiques avec Google Optimize

La clé de la conversion est d’avoir des landing pages personnalisées. Pour inciter les visiteurs à rester sur votre site et naviguer à travers d’autres pages, il est essentiel d’instaurer une certaine continuité entre la source du trafic et la première page qu’ils visitent.

Si votre landing page a un taux de rebond élevé, il y a de fortes chances pour que le contenu ne soit pas assez ciblé. Cela généralement signifie qu’il vous faut segmenter le trafic et créer des landing pages dédiés à chaque segment.

Cependant, cela devient rapidement irréaliste lorsqu’il vous faut créer et mettre à jour une landing page pour chaque annonce, campagne d’Influencer, ou mots-clés. Que pouvez-vous donc faire ?

Vous créez une landing page dynamique !

Qu’est-ce qu’une landing page dynamique ?

Il s’agit d’une landing page dont le contenu change selon plusieurs paramètres. Une seule landing page peut alors fournir du contenu pertinent pour plusieurs scénarios spécifiques.

Il est beaucoup plus facile et rapide d’insérer des éléments dynamiques dans une landing page que de construire une nouvelle page pour chaque contexte. Regardons quelques exemples.

Voici plusieurs manières de dynamiser une landing page afin d’augmenter vos conversions :

  • Trafic d'Influencer: affichez le nom et l’avatar de l’influencer en haut de la page, par exemple dans une barre d’en-tête. "L’influencer XYZ vous recommande ce PRODUIT" est un format qui fonctionne particulièrement bien d’après mon expérience.
  • Trafic Organique: affichez les frais de livraisons ou seuils de livraison gratuits en fonction de la géolocalisation. “Livraison gratuite en PAYS” fait des merveilles pour la conversion de trafic internationale.
  • Trafic d'Annonces: affichez le titre principal de l’annonce ou la requête de la recherche en haut de la landing page. Quand un visiteur a cliqué sur l’annonce et voit le même message s’afficher sur la landing page, il restera car il y a une continuité entre l’annonce et la page.
  • Trafic Email ou CRM/GRC: affichez l’historique des achats ou l’activité récente de navigation. Les visiteurs connaissant déjà votre marque n’ont pas besoin du même contenu que vos nouveaux visiteurs.

Allons-y! (-:

Ce guide suppose des connaissances de bases de javascript.

Etape 1. Ajouter les paramètres de requêtes à l’URL de votre landing page

Cette première étape sert à ajouter les paramètres de requêtes à l’URL de votre landing page; N’hésitez pas à utiliser les paramètres UTM (très utiles pour la segmentation des données Google Analytics que nous verrons plus tard) ou à créer les vôtres:

https://yourpage.com/?utm_term=term
https://yourpage.com/?parameter=value
https://yourpage.com/?param1=value1&param2=value2

Les paramètres de requêtes peuvent représenter tout ce qui pourrait être utile pour transmettre le bon message à la bonne personne; par exemple: campagne d’annonce, groupe d’annonce, mot clé, requête de recherche, sexe, âge, produit, service, pays, etc.

Vous n’avez pas toujours besoin d’utiliser des paramètres de requête pour cibler les segments de visiteurs. Par exemple, vous pouvez identifier le pays d’origine directement ou utiliser les cookies ou une intégration CRM pour configurer le flux de données dont vous avez besoin pour segmenter votre landing page. Mais toutes les données ou comportement des utilisateurs ne peuvent être transmises via ces paramètres. Dans nos cas, nous allons simplifier les choses et seulement compter sur les paramètres de requête.

J’utilise ces paramètres: ?segment=one&offer=Buy%202%20Get%201%20Free&page=intro. J’utilise %20 pour encoder les espaces dans l’URL.

Vous allez devoir mettre à jours les liens vers votre landing page.

Etape 2. Lire les paramètres dynamiques

Voici une fonction JS qui lit les paramètres de requête :

function getParameters(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};

Afin d’obtenir la valeur du paramètre, vous pouvez utiliser la fonction de cette manière:

var segment = getParameters('segment');
console.log(segment); // Returns "one"
var offer = getParameters('offer');
console.log(offer); // Returns "Buy 2 Get 1 Free"
var page = getParameters('page');
console.log(page); // Returns "intro"

Etape 3. Définir quel contenu apparaît selon les paramètres

Vous pouvez créer des règles dans le code de votre landing page (configuration manuelle), ou récupérer des données automatiquement, ou combiner ces deux approches. Cela dépend des données dont vous disposez et du contenu que vous désirez afficher.

Configuration manuelle : vous configurez chaque scénario

Il existe plusieurs manières de configurer manuellement.

Un simple if/else fait parfaitement l’affaire, mais je préfère utiliser des instructions switch pour être plus précis. C’est à vous de voir !

L’extrait de code suivant attribue une chaine de texte et une image selon le segment identifié via le segment de paramètres de requête :

if(segment != '') {
    switch(segment) {
        case 'one':
           text = "This is segment ONE";
           image = "segment-one.jpg";
           break;
        case 'two':
           text = "This is segment TWO";
           image = "segment-two.jpg";
           break;
        case 'three':
           text = "This is segment THREE";
           image = "segment-three.jpg";
           break;
        default:
           text = "No segment identified";
           image = "segment-none.jpg";
    }
}

Configuration automatisée : extraire les données sur votre site

Cette approche a de nombreuses limites, mais également un immense avantage : vous pouvez avoir de nombreuses variantes de contenu sans avoir à les configurer !

Ceci est très utile lorsque vous souhaitez afficher des données sur une produit ou service : avec une landing page standard, vous pouvez utiliser cette configuration pour récupérer le titre, prix, etc depuis d’autres pages. Cela veut également dire que vous n’aurez pas à mettre votre landing page à jour si vous portez des changements à vos produits ou services, puisque les informations sont récupérées directement.

L’extrait de code suivant permet de récupérer le titre d’une page sur votre site par les paramètres de requête :

if(page != '') {
    var request = new XMLHttpRequest();
    request.open('GET', '/course/'+page, true);
    request.onload = function() {
        if(request.status >= 200 && request.status < 400) {
            var resp = request.responseText;
            var parser = new DOMParser();
            var data = parser.parseFromString(resp,"text/html");
            var title = data.querySelector('h1');
        }
    };
    request.onerror = function() {};
    request.send();
}

La ligne request.open('GET', '/course/'+page, true); définit la page d’où viennent les données. Dans ce cas, nous avons récupérer les données de la page /course/intro car le paramètre est défini sur intro.

Etape 4. Afficher le contenu dynamique

Maintenant, affichons les 3 paramètres de ce guide..

Output des valeurs des paramètres de requête

<span id="offer-output"></span>
<script>
    var offerOutput = document.getElementById('offer-output');
    offerOutput.innerHTML = offer; // The variable "offer" was defined in step 2
</script>

Vous pouvez le tester en ajoutant ?offer=Buy%202%20Get%201%20Free à l’URL de cette page :

Offer: No offer

Output des données erronées

<span id="page-output"></span>
<script>
    var pageOutput = document.getElementById('page-output');
    // To put inside the http request:
    pageOutput.innerHTML = title.innerHTML;
</script>

Vous pouvez le tester en ajoutant ?page=intro à l’URL de cette page :

Page: No page

Output des données personnalisées

<p id="segment-text-output"><img id="segment-image-output" src="" /></p>
<script>
    var segmentImageOutput = document.getElementById('segment-image-output');
    var segmentTextOutput = document.getElementById('segment-text-output');
</script>

Vous pouvez le tester en ajoutant ?segment=one à l’URL de cette page :

Segment: No segment

Etape 5. Combiner le tout dans Google Optimize

Créer une nouvelle campagne

  1. Créez une nouvelle campagne dans votre contenant Google Optimize.
  2. Donnez un nom à votre campagne.
  3. Entrez l’URL de la landing page.
  4. Sélectionnez "personalisation" ou "A/B test" comme type de campagne. Choisissez "A/B test" si vous voulez mesurer la performance de votre page dynamique par rapport au contenu standard (ce qui est recommandé).

Ajoutez les changements de votre site

Ajoutez le code JS comme global javasript dans l’éditeur Google Optimizer. Voici le code complet :

function getParameters(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};
var segment = getParameters('segment');
var offer = getParameters('offer');
var page = getParameters('page');
if(segment != '') {
    var segmentImageOutput = document.getElementById('segment-image-output');
    var segmentTextOutput = document.getElementById('segment-text-output');
    switch(segment) {
        case 'one':
           text = "This is segment ONE";
           image = "segment-one.jpg";
           break;
        case 'two':
           text = "This is segment TWO";
           image = "segment-two.jpg";
           break;
        case 'three':
           text = "This is segment THREE";
           image = "segment-three.jpg";
           break;
        default:
           text = "No segment identified";
           image = "segment-none.jpg";
    }
    segmentTextOutput.innerHTML = text;
    segmentImageOutput.src = window.location.pathname + '/' + image;
}
if(offer != '') {
    var offerOutput = document.getElementById('offer-output');
    offerOutput.innerHTML = offer;
}
if(page != '') {
    var pageOutput = document.getElementById('page-output');
    var request = new XMLHttpRequest();
    request.open('GET', '/course/'+page, true);
    request.onload = function() {
        if(request.status >= 200 && request.status < 400) {
            var resp = request.responseText;
            var parser = new DOMParser();
            var data = parser.parseFromString(resp,"text/html");
            var title = data.querySelector('h1');
            pageOutput.innerHTML = title.innerHTML;
        }
    };
    request.onerror = function() {};
    request.send();
}

Au besoin, ajoutez des changements HTML et CSS. Bien que ce ne soit pas nécessaire, vous pouvez également ajouter les identifiants dans le code de la page pour identifier les éléments dynamiques.

Pour commencer, vous pouvez ajouter ce code HTML :

<ul class="dynamic-parameters">
    <li>
        <strong>Offer:</strong>
        <span id="offer-output">No offer</span>
    </li>
    <li>
        <strong>Page:</strong>
        <span id="page-output">No page</span>
    </li>
    <li>
        <strong>Segment:</strong>
        <img id="segment-image-output" src="" />
        <span id="segment-text-output">No segment</span>
    </li>
</ul>

Et le CSS suivant comme global CSS:

.dynamic-parameters {
    list-style: disc;
}
#segment-image-output {
    display: inline;
    width: 16px;
    position: relative;
    top: 2px;
    margin: 0 5px;
    box-shadow: none;
}

Configurer les options de ciblage

Assurez-vous que le ciblage de l’URL soit défini pour correspondre à l’URL et qu’il vous dirige vers la landing page sans paramètres de requête.

Vous pouvez également décider de seulement déclencher cette campagne dans le cas où les paramètres utilisent pour afficher des éléments dynamiques présent dans l’URL. Vous pouvez le faire avec Audience targeting > Advanced > Query parameter.

Vous voilà prêt ! (-:


La personnalisation généralement amène des taux de conversions plus élevés. Mais pour obtenir une forte augmentation de conversions, vous devez choisir les paramètres pertinents aux visiteurs.

Une fois que vous avez créé une campagne Google Optimize assurez-vous que les éléments dynamiques de votre site et commencez à créer votre propre landing page.

Happy Optimizing (-:

Photo by Halacious on Unsplash