Critères d’audience personnalisés pour les visiteurs / blogs mobiles / perficient

Dans le monde mobile-premier actuel, offrir des expériences personnalisées aux visiteurs utilisant des appareils mobiles est crucial pour maximiser l’engagement et les conversions. La puissante plate-forme d’expérimentation et de personnalisation d’Optimizely vous permet de définir Critères d’audience personnalisés pour cibler efficacement les utilisateurs mobiles.

En tirant parti de la segmentation de l’audience d’Optimizely, vous pouvez créer des expériences sur mesure en fonction de facteurs tels que Type de périphérique, système d’exploitation, taille de l’écran et comportement utilisateur. Que vous souhaitiez optimiser UX mobile, tester différentes mises en page ou personnaliser du contenu pour les utilisateurs d’Android par rapport aux utilisateurs iOS, la compréhension de la définition des critères d’audience spécifiques au mobile peut vous aider à générer de meilleurs résultats.

Dans ce blog, nous explorerons comment mettre en place Critères d’audience personnalisés simples pour les visiteurs mobiles dans Optimizelyles principaux avantages du ciblage mobile et les meilleures pratiques pour améliorer les expériences des utilisateurs entre les appareils. Plongeons-nous!

Cette solution est basée sur Exemple – Créer des critères d’audienceque vous pouvez trouver dans le Documentation optimiste.

Créer les paramètres et les classes de critères

Tout d’abord, nous devons créer deux classes dans notre solution:

Classe VisitorDeviceTypeCriterionSettings a besoin d’hériter CriterionModelBase classe, et nous n’avons besoin que d’une seule propriété (paramètres) pour déterminer si le visiteur utilise un bureau ou un appareil mobile.

public bool IsMobile { get; set; }

Le résumé CriterionModelBase La classe vous oblige à implémenter le Copy() méthode. Parce que vous n’utilisez pas de types de référence complexes, vous pouvez le mettre en œuvre en renvoyant une copie peu profonde comme indiqué (voir Créer des critères d’audience personnalisés):

public override ICriterionModel Copy()
{
    return base.ShallowCopy();
}

La classe entière ressemblera à ceci:

using EPiServer.Data.Dynamic;
using EPiServer.Personalization.VisitorGroups;

namespace AlloyTest.Personalization.Criteria
{
    [EPiServerDataStore(AutomaticallyRemapStore = true)]
    public class VisitorDeviceTypeCriterionSettings : CriterionModelBase
    {
        public bool IsMobile { get; set; }

        public override ICriterionModel Copy()
        {
            // if this class has reference types that require deep copying, then
            // that implementation belongs here. Otherwise, you can just rely on
            // shallow copy from the base class
            return base.ShallowCopy();
        }
    }
}

Maintenant, nous devons mettre en œuvre la classe des critères VisitorDeviceTypeCriterion et hériter du résumé CriterionBase classe avec la classe de paramètres comme paramètre de type:

public class VisitorDeviceTypeCriterion : CriterionBase<VisitorDeviceTypeCriterionSettings>

Ajouter un VisitorGroupCriterion Attribut pour définir la catégorie, le nom et la description du critère (pour plus disponible VisitorGroupCriterion propriétés, voir Créer des critères d’audience personnalisés:

[VisitorGroupCriterion(
    Category = "MyCustom",
    DisplayName = "Device Type",
    Description = "Criterion that matches type of the user's device"
)]

Le résumé CriterionBase La classe vous oblige à implémenter un IsMatch() Méthode qui détermine si l’utilisateur actuel correspond à ce critère d’audience. Dans ce cas, nous devons déterminer à partir de l’appareil que le visiteur accède à notre site. Parce que Optimizely ne fournit pas cela hors de la boîte, nous devons déterminer cette partie.

L’une des solutions consiste à utiliser les informations de l’en-tête de demande, de la User-Agent champ et analyser pour déterminer le type de système d’exploitation et de périphérique. Nous pouvons le faire en écrivant notre méthode de match:

public virtual bool MatchBrowserType(string userAgent)
{
    var os =
        new Regex(
            @"(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino",
            RegexOptions.IgnoreCase | RegexOptions.Multiline);
    var device =
        new Regex(
            @"1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-",
            RegexOptions.IgnoreCase | RegexOptions.Multiline);
    var deviceInfo = string.Empty;

    if (os.IsMatch(userAgent))
    {
        deviceInfo = os.Match(userAgent).Groups[0].Value;
    }

    if (device.IsMatch(userAgent.Substring(0, 4)))
    {
        deviceInfo += device.Match(userAgent).Groups[0].Value;
    }

    if (!string.IsNullOrEmpty(deviceInfo))
    {
        return true;
    }

    return false;
}

Maintenant, nous pouvons revenir en arrière et implémenter le IsMatch() Méthode qui est requise par CriterionBase classe abstraite.

public override bool IsMatch(IPrincipal principal, HttpContext httpContext)
{
    return MatchBrowserType(httpContext.Request.Headers["User-Agent"].ToString());
}

Tester le critère

Dans le CMS, nous devons créer un nouveau critère d’audience. Lorsque vous cliquez sur le bouton «Ajouter des critères», il y aura un groupe de critères «MyCustom» avec nos critères:

Lorsque vous sélectionnez les critères «Type de périphérique», vous verrez quelque chose comme ceci:

Nous pouvons facilement ajouter une étiquette pour la case à cocher en utilisant la fonctionnalité de traduction d’Optimizely. Créer un nouveau fichier XML VisitorGroupCriterion.xml Et placez-le dans votre dossier de traduction où se trouvent vos fichiers de traduction, comme ceci:

Mettez ceci dans le fichier que vous avez créé:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<languages>
  <language name="English" id="en-us">
    <visitorgroups>
      <criteria>
        <ismobile>
          <key>Is Mobile Device (Use this setting to show content only on Mobile)</key>
        </ismobile>
      </criteria>
    </visitorgroups>
  </language>
</languages>

Il y a encore une chose à faire. Dans VisitorDeviceTypeCriterionSettings.cs, décorer le IsMobile propriété avec la définition de traduction. Ajoutez cet attribut:

[CriterionPropertyEditor(LabelTranslationKey = "/visitorgroups/criteria/ismobile/key")]

Cela devrait ressembler à ceci:

Maintenant, dans la vue de l’éditeur, nous avons une étiquette pour la case à cocher.

Personnalisez le contenu en définissant le contenu de ce groupe de visiteurs.

Vue de bureau:

Vue mobile:

Vous pouvez voir qu’il existe un contenu qui n’est visible que si vous accédez au site avec un appareil mobile.

Et c’est tout!