Catégorie : Test AB

Cette intégration n'est disponible que pour les projets web.

À quoi s'attendre

Les utilisateurs de cette intégration peuvent importer leurs variations de test Adobe Target et obtenir des insights visuels sur la raison pour laquelle un certain test a réussi et sur la manière de créer d'encore meilleurs tests.

Ce que nous collectons

Variables dynamiques

Implémentation

Étapes d'implémentation

1. Si vous créez déjà des segments dans Adobe Analytics pour vos diverses expériences de test, alors vous pouvez utiliser l'intégration Adobe Analytics pour importer ces segments. Plus d'informations sur l'intégration d'Adobe Analytics ici.
2. Vous pouvez intégrer directement avec Adobe Target. Cette intégration ajoute du code, soit au tag principal at.js Adobe Target, soit à la solution d'extension Adobe Target ou via la plateforme web SDK Adobe Experience. Si vous souhaitez emprunter cette route, poursuivez votre lecture ci-dessous.

Consultez l'article "Demander une intégration" et suivez ses instructions pour activer cette intégration. Une fois cela fait, vous pourrez poursuivre votre lecture de cet article.

Si vous avez déjà complété les étapes décrites ci-dessus, continuez.

Étape 2

Vous devrez utiliser des jetons de réponse pour que cela fonctionne.

La logique ci-dessous vous montrera comment utiliser ou recréer l'objet ttMETA, un ancien plugin de Adobe maintenant caduque. Malgré cela, Adobe propose un moyen de recréer cet objet à l'aide du code ci-dessous. Veuillez ne pas utiliser le code d'Adobe inscrit dans le document lié précédemment, utilisez plutôt le nôtre. Notez que même si le nom est similaire (ttMETA), le déploiement n'est pas le même que celui du plugin d'origine.

Si vous utilisez déjà les jetons de réponses, tout ce que vous avez à ajouter est le code qui re-créera l'objet ttMETA. Si vous avez déjà le code qui fait ça, alors vous n'aurez rien à faire en dessous.

Notez que trois solutions sont proposées ci-dessous : la 1ʳᵉ est la solution at.js, la 2ᵉ est la solution d'extension Adobe Target et la 3ᵉ est la solution SDK web Adobe Experience Platform.

Si vous n'avez pas encore configuré les jetons de réponse, effectuez les actions suivantes : 

Code requis pour la solution at.js

/*
 *Name: Adobe Target CS Integration (at.js version)
 *Version: 1.0.0
 */
function isEmpty(val) {
    return val === undefined || val == null || val.length <= 0 ? true : false;
}

function key(obj) {
    return Object.keys(obj)
        .map(function (k) {
            return k + "" + obj[k];
        })
        .join("");
}

function distinct(arr) {
    var result = arr.reduce(function (acc, e) {
        acc[key(e)] = e;
        return acc;
    }, {});
    return Object.keys(result).map(function (k) {
        return result[k];
    });
}

document.addEventListener(adobe.target.event.REQUEST_SUCCEEDED, function (e) {
    window.ttMETA = typeof window.ttMETA != "undefined" ? window.ttMETA : [];
    var tokens = e.detail.responseTokens;
    if (isEmpty(tokens)) {
        return;
    }
    var uniqueTokens = distinct(tokens);
    uniqueTokens.forEach(function (token) {
        window.ttMETA.push({
            CampaignName: token["activity.name"],
            CampaignId: token["activity.id"],
            RecipeName: token["experience.name"],
            RecipeId: token["experience.id"],
            'OfferId': token["offer.id"],
            'OfferName': token["offer.name"],
        });
    });
});
//Adobe Target CS Integration End

Si vous construisez le cœur de votre code Adobe Target directement depuis Adobe Target, poursuivez. En revanche, si vous utilisez Adobe Launch, pour injecter l'extension Adobe Target, vous pouvez vous rendre directement à l'étape suivante, dédiée à Adobe Launch.

Configurer du code dans Adobe Target

Connectez-vous à Adobe Target et cliquez sur "Configuration" depuis la navigation, puis sur "Implémentation".

Choisissez la version que vous utilisez sur votre site et cliquez sur "Modifier les paramètres".

Scrollez jusqu'en bas de la page, copiez tout le code fournit ci-dessus et collez-le dans la case "Library Footer", puis cliquez sur "Enregistrer".

En fonction de la version de at.js que vous utilisez, cliquez sur "Télécharger at.js x.x.x".

Le nouveau at.js sera téléchargé sur votre navigateur. Remplacez la bibliothèque at.js existante sur votre site par la nouvelle.

 

Configuration de la solution d'extension Adobe Target dans Adobe Launch

Dans Adobe Launch, vous ne pouvez pas modifier le code source d'Adobe Target. Vous devrez donc simplement ajouter une nouvelle règle appelée Adobe Target ttMETA Plugin (ou tout autre nom que vous souhaiterez lui donner) et l'injecter comme du code personnalisé immédiatement après la règle d'injection d'Adobe Target.

Lorsque vous créez la nouvelle règle, définissez son ordre de chargement sur un chiffre après celui sur lequel votre règle Adobe Target est configurée. Par exemple : si votre règle Adobe Target est configurée sur 49 :

Alors, vous devrez définir l'ordre de votre Plugin ttMETA Adobe Target comme +1, c'est-à-dire 50 dans cet exemple :

Insérez le code du dessus dans la section Open Editor et définissez-le comme du JavaScript global.

Le résultat final apparaîtra comme ceci :

Configuration de l'extension SDK web Adobe Experience Platform dans Adobe Launch

Dans Adobe Launch, créez une règle avec les paramètres suivants ou modifiez une règle existante qui contient déjà l'évènement nécessaire, connu comme "Adobe Experience Platform Web SDK - Send event complete" :

Si vous n'avez pas cet évènement dans vos règles, créez-le comme ceci :

Choisissez "Adobe Experience Platform Web SDK", puis "Send event complete"

Dans la section des Actions de la règle, ajoutez un nouveau contenant de code personnalisé ("Custom Code") ou modifiez-en un existant.

Ouvrez l'éditeur en cliquant sur le bouton.

Collez le code suivant dans le champ ouvert :

Notez que si vous utilisez déjà l'objet "event.propositions" dans votre code, vous n'aurez qu'à ajouter la partie après la définition de var propositions = event.propositions; et à la modifier légèrement afin que les éléments aient le même nom d'objet que dans votre code. Si vous ne l'utilisez pas, en revanche, prenez simplement tout le code tel qu'il est.

/*
 *Name: Adobe Target CS Integration (AEP version)
 *Version: 1.0.1
 */
var propositions = event.propositions;

if (typeof propositions != "undefined") {
    window.ttMETA = window.ttMETA || [];

    for (var i = 0; i < propositions.length; i++) {
        if (propositions[i].items && propositions[i].items[0] && propositions[i].items[0].meta && propositions[i].items[0].meta["activity.name"] && propositions[i].items[0].meta["experience.name"]) {
            var campaignName = propositions[i].items[0].meta["activity.name"];
            var experienceName = propositions[i].items[0].meta["experience.name"];

            window.ttMETA.push({
                CampaignName: campaignName,
                RecipeName: experienceName,
            });
        }
    }
}
//Adobe Target CS Integration End

Vous devriez maintenant voir quelque chose qui ressemble à ceci :

Enregistrez les changements. Vous devriez obtenir une règle ressemblant à ceci :

Publiez ces changements de code et cela recréera l'objet ttMETA à partir duquel notre code peut collecter les éléments de test Adobe Target.

Vérifier que ça fonctionne

Vous pouvez utiliser l'extension Chrome pour vous assurer que les résultats sont bien envoyés à Contentsquare.

Forcer le bon arrière-plan dans Données de zones

Pour obtenir le bon arrière-plan dans Données de zones, vous pouvez utiliser le lien QA depuis Adobe.

Sélectionnez le test dont vous voulez forcer l'arrière-plan :

Cliquez sur "Activité QA"

Copiez le lien du test que vous voulez forcer :

Lorsque vous créez un zoning, cliquez sur le champ de saisis d'URL d'aperçu. Cela ouvrira un flyout où vous pourrez coller l'URL depuis Adobe. Cliquez sur "Enregistrer" pour rendre cette version de la page :