Afficher des blocs de contenu personnalisés dans Optimizely CMS

Ce guide vous accompagne dans la configuration de blocs de contenu personnalisés dans Optimizely CMS 12, de la configuration de base des audiences jusqu'à l'intégration avancée avec ODP. Que vous travailliez avec des critères web simples ou que vous ayez besoin de données comportementales multicanaux pour alimenter votre personnalisation, vous aurez une implémentation fonctionnelle à la fin de ce guide.

Prérequis

Avant de commencer, confirmez que vous avez :

• Optimizely CMS 12 en fonctionnement (PaaS, SaaS ou auto-hébergé)
• Accès éditeur ou administrateur à l'interface d'administration du CMS
• Familiarité de base avec l'expérience d'édition Optimizely
• Optionnel : Un compte Optimizely Data Platform (ODP) si vous souhaitez une segmentation comportementale en temps réel

Pour le développement de critères d'audience personnalisés, vous aurez également besoin de :

• Un environnement de développement .NET 6 ou 7
• Visual Studio ou VS Code avec les extensions C#
• Accès au code source de votre projet CMS

Étape 1 : Créer vos blocs de contenu

Commencez par construire les blocs de contenu que vous souhaitez personnaliser. Chaque segment d'audience verra un bloc différent, vous aurez donc généralement besoin d'au moins deux ou trois variantes.

Naviguez vers le panneau Ressources dans Optimizely CMS, puis sélectionnez Blocs. Créez un nouveau dossier pour votre contenu personnalisé afin de garder les choses organisées — quelque chose comme « Promotions page d'accueil » ou « CTA produits ».

Créez votre première variante de bloc. Pour cet exemple, nous allons créer des bannières promotionnelles :

• Cliquez sur Nouveau bloc et sélectionnez votre type de bloc bannière
• Remplissez le contenu pour les clients fidèles (peut-être en mettant en vedette les récompenses de fidélité)
• Ajoutez les images, liens et tous les autres champs requis
• Enregistrez et publiez le bloc

Répétez ce processus pour chaque variante d'audience. Vous pourriez créer :

• Une bannière « Bon retour parmi nous » pour les visiteurs de retour
• Une bannière « Nouveau ici? » avec des offres d'introduction pour les nouveaux
• Une bannière générique comme contenu par défaut pour tous les autres

Conseil : Nommez vos blocs clairement pour indiquer leur audience. « Bannière accueil - Clients fidèles » est beaucoup plus facile à gérer que « Bannière v2 final ».

Étape 2 : Définir vos audiences

Les audiences sont les règles qui déterminent quels visiteurs voient quel contenu. Pensez à elles comme des filtres : si un visiteur correspond aux critères, il fait « partie » de cette audience.

Allez dans Administration CMS → Audiences (dans les anciennes interfaces, ceci pourrait encore être libellé « Groupes de visiteurs »).

Cliquez sur Créer une nouvelle audience et donnez-lui un nom descriptif comme « Visiteurs de retour » ou « Utilisateurs mobiles du Royaume-Uni ».

Maintenant, ajoutez vos critères. Optimizely inclut plusieurs options intégrées :

Critères basés sur les visites

• Nombre de visites (première visite, 2 visites, 10 visites)
• Temps depuis la dernière visite
• Pages consultées dans la session

Critères techniques

• Type d'appareil (mobile, tablette, ordinateur)
• Navigateur ou système d'exploitation
• Résolution d'écran

Localisation et source

• Localisation géographique (pays, région, ville)
• Source de référence
• URL de la page d'entrée
• Paramètres de chaîne de requête

Pour une audience « Visiteurs de retour », vous ajouteriez le critère Nombre de visites et le définiriez à « supérieur à 1 ».

Vous pouvez combiner plusieurs critères. Une audience pour « Utilisateurs mobiles d'Allemagne » inclurait à la fois un critère de type d'appareil (mobile) ET un critère géographique (Allemagne). Tous les critères doivent correspondre pour qu'un visiteur soit inclus.

Enregistrez votre audience une fois les critères configurés.

Étape 3 : Appliquer la personnalisation à vos blocs

Avec les blocs créés et les audiences définies, vous êtes prêt à les connecter. Cela se fait sur la page où vous voulez que le contenu personnalisé apparaisse.

Modifiez la page contenant votre zone de contenu. Glissez votre premier bloc (disons la bannière client fidèle) dans la zone de contenu où vous voulez du contenu personnalisé.

Faites un clic droit sur le bloc (ou utilisez le menu contextuel du bloc) et sélectionnez Personnalisation. Cela crée un « groupe personnalisé » — un conteneur qui contient plusieurs variantes de blocs, chacune assignée à différentes audiences.

Le panneau de personnalisation s'ouvre. Vous verrez votre bloc avec une option pour assigner des audiences. Cliquez pour ajouter l'audience « Visiteurs de retour » que vous avez créée plus tôt.

Maintenant, ajoutez vos autres variantes :

• Glissez la bannière « Nouveau visiteur » dans le même groupe personnalisé
• Assignez-la à votre audience « Nouveaux visiteurs »
• Glissez votre bannière par défaut et laissez-la assignée à Tout le monde

L'assignation Tout le monde est cruciale. C'est votre contenu par défaut — ce que les visiteurs voient s'ils ne correspondent à aucune audience spécifique. Sans cela, les visiteurs non correspondants ne voient rien du tout.

L'ordre compte : Les audiences sont évaluées de haut en bas. Si un visiteur correspond à plusieurs audiences, il voit la première variante correspondante. Arrangez vos variantes avec les audiences les plus spécifiques en haut.

Étape 4 : Ajouter du contenu par défaut

Nous avons abordé ce sujet plus haut, mais le contenu par défaut mérite sa propre attention car il affecte à la fois l'expérience utilisateur et le référencement.

Chaque groupe personnalisé devrait inclure une variante Tout le monde. Cela sert plusieurs objectifs :

Expérience utilisateur : Les visiteurs qui ne correspondent à aucun critère voient quand même du contenu pertinent plutôt qu'un espace vide.

Indexation SEO : Les robots des moteurs de recherche ne correspondent généralement pas aux critères d'audience (ils ne sont pas des « visiteurs de retour » ou des « utilisateurs connectés »). Sans contenu par défaut, les robots indexent des pages avec des sections manquantes, ce qui peut nuire à votre classement.

Débogage : Lors des tests, vous pouvez vérifier que le contenu par défaut s'affiche correctement avant de vérifier les variantes spécifiques aux audiences.

Notre expérience montre que les équipes oublient souvent le contenu par défaut lors de la configuration initiale, puis se demandent pourquoi certains visiteurs voient des mises en page brisées. Faites du contenu par défaut une partie de votre liste de vérification standard.

Pour définir le contenu par défaut, assurez-vous qu'un bloc dans votre groupe personnalisé n'a aucune audience spécifique assignée, ou assignez-le explicitement à Tout le monde.

Étape 5 : Prévisualiser votre contenu personnalisé

Avant de publier, vérifiez que chaque audience voit le bon contenu. La fonctionnalité de prévisualisation d'Optimizely vous permet de simuler différentes appartenances d'audience.

Dans l'éditeur, cherchez l'option Prévisualisation, puis trouvez Prévisualiser en tant qu'audience (ou « Afficher en tant que groupe de visiteurs » dans les anciennes interfaces).

Sélectionnez une audience dans le menu déroulant — disons « Visiteurs de retour ». La prévisualisation se met à jour pour montrer exactement ce qu'un visiteur correspondant verrait.

Testez chaque audience systématiquement :

• Prévisualiser en tant que Visiteurs de retour → vérifier que la bannière client fidèle s'affiche
• Prévisualiser en tant que Nouveaux visiteurs → vérifier que la bannière de bienvenue s'affiche
• Prévisualiser sans audience sélectionnée → vérifier que la bannière par défaut s'affiche

Pour des tests plus réalistes, ouvrez la page dans une fenêtre de navigation privée et déclenchez manuellement les critères d'audience. Si vous avez un critère « Visites > 1 », visitez la page deux fois pour voir la variante visiteur de retour.

Pièges courants de la prévisualisation

• Les critères géographiques ne fonctionneront pas en prévisualisation à moins que vous soyez réellement dans cet endroit (ou utilisiez un VPN)
• Les critères basés sur le temps s'évaluent par rapport à l'heure actuelle, qui pourrait ne pas correspondre à votre scénario de test
• Les critères basés sur les cookies persistent entre les sessions de prévisualisation

Étape 6 : Configurer des audiences avancées avec l'intégration ODP

Pour la personnalisation de base, les critères intégrés fonctionnent bien. Mais que faire si vous voulez cibler des visiteurs basés sur :

• Les produits qu'ils ont consultés à travers plusieurs sessions
• Leur valeur client à vie depuis votre CRM
• Les modèles d'engagement par courriel
• Le comportement multi-appareils

C'est là que l'intégration d'Optimizely Data Platform (ODP) devient précieuse. ODP agit comme une plateforme de données client, unifiant les données comportementales de plusieurs sources et les exposant comme des audiences en temps réel que votre CMS peut utiliser.

Configuration de l'intégration ODP

D'abord, assurez-vous que votre instance ODP est configurée et reçoit des données. Cela implique généralement d'ajouter le snippet JavaScript ODP à votre site et de configurer tous les flux de données côté serveur.

Dans votre projet CMS, installez le package d'intégration ODP :

dotnet add package Optimizely.ODP.VisitorGroups

Configurez la connexion dans votre démarrage :

services.AddOdpVisitorGroups(options =>
{
    options.ApiKey = Configuration["ODP:ApiKey"];
    options.Endpoint = Configuration["ODP:Endpoint"];
});

Création d'audiences liées à ODP

Avec l'intégration active, vous verrez de nouvelles options de critères lors de la création d'audiences.

Allez dans Administration CMS → Audiences → Créer une nouvelle audience.

Dans la sélection des critères, cherchez Data Platform → Est dans le segment.

Cela ouvre un menu déroulant de toutes les audiences en temps réel définies dans ODP. Sélectionnez le segment que vous voulez — peut-être « Clients haute valeur » ou « Panier abandonné dans les 7 derniers jours ».

Enregistrez l'audience et utilisez-la exactement comme n'importe quelle autre audience lors de la personnalisation des blocs.

Ce qu'ODP permet

Les audiences ODP en temps réel se mettent à jour en environ 90 secondes après les changements comportementaux. Cela signifie que vous pouvez cibler des visiteurs basés sur des actions qu'ils ont effectuées il y a quelques instants sur d'autres canaux.

Travailler avec des équipes nous a appris que l'intégration ODP est plus précieuse quand vous avez :

• Des parcours clients multicanaux où le web n'est qu'un point de contact
• Des données comportementales riches dans votre CRM, plateforme de courriel ou système de commerce
• Des besoins de segmentation sophistiqués au-delà des simples comptages de visites ou de la géographie

Pour des cas d'utilisation plus simples, les critères CMS intégrés sont souvent suffisants et évitent la complexité de maintenir l'intégration ODP.

Étape 7 : Créer des critères d'audience personnalisés

Parfois, les critères intégrés ne couvrent pas vos besoins spécifiques. Optimizely permet aux développeurs de créer des critères personnalisés que les éditeurs peuvent utiliser comme n'importe quelle autre règle d'audience.

Voici un exemple pratique : un critère qui vérifie si le visiteur actuel est authentifié.

using EPiServer.Personalization.VisitorGroups;
using Microsoft.AspNetCore.Http;
using System.Security.Principal;

[VisitorGroupCriterion(
    Category = "User Context",
    DisplayName = "Is Authenticated",
    Description = "Matches visitors who are logged in")]
public class IsAuthenticatedCriterion : CriterionBase<IsAuthenticatedCriterionSettings>
{
    private readonly IHttpContextAccessor _httpContextAccessor;

    public IsAuthenticatedCriterion(IHttpContextAccessor httpContextAccessor)
    {
        _httpContextAccessor = httpContextAccessor;
    }

    public override bool IsMatch(IPrincipal principal, HttpContext httpContext)
    {
        var user = _httpContextAccessor.HttpContext?.User;
        
        if (Model.RequireAuthentication)
        {
            return user?.Identity?.IsAuthenticated ?? false;
        }
        
        return !(user?.Identity?.IsAuthenticated ?? false);
    }
}

public class IsAuthenticatedCriterionSettings : CriterionModelBase
{
    [CriterionPropertyEditor(
        LabelTranslationKey = "/visitorgroups/criteria/isauthenticated/requireauth",
        DefaultValue = true)]
    public bool RequireAuthentication { get; set; } = true;
}

Enregistrez le critère dans votre configuration de services :

services.AddVisitorGroupCriterion<IsAuthenticatedCriterion>();

Après le déploiement, les éditeurs verront « Is Authenticated » sous « User Context » lors de la création d'audiences.

Idées de critères personnalisés que nous avons implémentés

• Vérifier l'appartenance à des rôles utilisateur spécifiques
• Évaluer des cookies personnalisés définis par des outils tiers
• Faire correspondre avec des paramètres de requête provenant du suivi de campagnes
• Critères d'heure du jour pour afficher différents contenus pendant les heures d'affaires

Erreurs courantes à éviter

Contenu par défaut manquant : Déjà mentionné, mais ça vaut la peine de le répéter. Chaque groupe personnalisé a besoin d'une variante Tout le monde.

Audiences qui se chevauchent : Si un visiteur correspond à plusieurs audiences, il ne voit que la première variante correspondante. Concevez vos audiences pour qu'elles soient mutuellement exclusives quand c'est possible, ou ordonnez-les intentionnellement.

Sur-personnalisation : Plus de segments n'est pas toujours mieux. Chaque variante personnalisée nécessite de la création de contenu, des tests et de la maintenance. Commencez avec deux ou trois segments à fort impact avant d'élargir.

Ignorer la performance : L'évaluation des audiences se produit à chaque requête. Des critères complexes ou trop de régions personnalisées peuvent ralentir le chargement des pages. Surveillez la performance après avoir activé la personnalisation.

Oublier la mise en cache : Le contenu personnalisé et la mise en cache de page complète ne font pas bon ménage. Vous aurez besoin de variation du cache de sortie par audience, de mise en cache de fragments pour les régions personnalisées, ou de désactiver complètement la mise en cache pour les pages personnalisées.

Tester seulement en prévisualisation : Le mode prévisualisation est utile mais imparfait. Les tests en conditions réelles avec de vrais cookies, localisations et sessions détectent des problèmes que la prévisualisation manque.

Tests et vérification

Un processus de test solide détecte les bogues de personnalisation avant qu'ils n'atteignent la production.

Liste de vérification des tests manuels

• Voir la page en mode navigation privée → confirmer que le contenu par défaut apparaît
• Déclencher chaque critère d'audience manuellement (visiter plusieurs fois, changer d'appareil, etc.)
• Vérifier que la bonne variante s'affiche pour chaque audience
• Vérifier que la page s'affiche correctement avec le contenu personnalisé masqué (si vous désactivez la personnalisation)
• Tester sur de vrais appareils mobiles, pas seulement les outils de développement du navigateur

Considérations pour les tests automatisés

Pour la personnalisation critique, envisagez d'écrire des tests d'intégration qui vérifient la logique de correspondance des audiences. Vous pouvez simuler le IHttpContextAccessor pour représenter différents états de visiteurs.

[Fact]
public void AuthenticatedCriterion_MatchesLoggedInUser()
{
    var httpContext = new DefaultHttpContext();
    httpContext.User = new ClaimsPrincipal(
        new ClaimsIdentity(new[] { new Claim(ClaimTypes.Name, "testuser") }, "test"));
    
    var accessor = Mock.Of<IHttpContextAccessor>(a => a.HttpContext == httpContext);
    var criterion = new IsAuthenticatedCriterion(accessor);
    criterion.Model = new IsAuthenticatedCriterionSettings { RequireAuthentication = true };
    
    var result = criterion.IsMatch(httpContext.User, httpContext);
    
    Assert.True(result);
}

Désactiver la personnalisation pour le débogage

Si vous soupçonnez que la personnalisation cause des problèmes, vous pouvez la désactiver temporairement sur tout le site en implémentant IPersonalizationEvaluator :

public class DisablePersonalizationEvaluator : IPersonalizationEvaluator
{
    public bool IsEnabled(HttpContext context)
    {
        // Retourner false pour désactiver toute personnalisation
        // Utile pour le débogage ou pour des scénarios spécifiques comme le trafic de robots
        return false;
    }
}

Lorsque désactivée, tous les visiteurs voient seulement le contenu par défaut, et aucune évaluation d'audience ni stockage de cookies ne se produit.

En résumé

Les blocs de contenu personnalisés dans Optimizely CMS suivent un modèle clair : créez vos variantes de contenu, définissez les audiences qui devraient voir chaque variante, connectez-les via l'interface de personnalisation, et testez rigoureusement avant le lancement.

Pour la plupart des projets, les critères d'audience intégrés gèrent les scénarios courants comme les visiteurs de retour, le ciblage géographique ou les variations basées sur l'appareil. Quand vous avez besoin de données comportementales d'autres canaux — engagement par courriel, historique d'achats ou activité multi-appareils — l'intégration ODP apporte ces données dans vos audiences CMS.

Nous recommandons de commencer simple. Faites fonctionner un bloc personnalisé avec deux audiences avant d'élargir. Une fois que vous comprenez le flux de travail et les exigences de test, l'expansion vers des scénarios plus complexes devient simple.

Configurer la personnalisation dans Optimizely CMS implique des décisions concernant l'architecture des audiences, la stratégie de mise en cache et la gouvernance du contenu qui affectent la maintenabilité à long terme. Si vous planifiez une initiative de personnalisation importante et voulez discuter de l'approche technique, nous sommes disponibles pour vous aider à concevoir une configuration qui évolue avec vos besoins en contenu.