targetGlobalSettings()

Vous pouvez remplacer les paramètres de la bibliothèque at.js à l’aide de targetGlobalSettings(), au lieu de configurer les paramètres dans l’interface utilisateur de Target Standard/Premium, ou utiliser des API REST.

Paramètres

Vous pouvez remplacer les paramètres suivants :

bodyHiddenStyle

• Type : String

• Valeur par défaut : body

• Description : Utilisé uniquement globalMboxAutocreate === true pour minimiser les risques de scintillement.

  Pour plus d’informations, voir Gestion du scintillement par at.js.

bodyHidingEnabled

• Type : Boolean
• Valeur par défaut : true
• Description : Permet de contrôler le scintillement lorsqu’ target-global-mbox il est utilisé pour diffuser des offres créées dans le compositeur d’expérience visuelle, également appelées offres visuelles.

clientCode

• Type : String
• Valeur par défaut : Valeur définie via l’interface utilisateur.
• Description : Représente le code client.

cookieDomain

• Type : String
• Valeur par défaut : Si possible, définissez le domaine de niveau supérieur.
• Description : Représente le domaine utilisé lors de l’enregistrement des cookies.

crossDomain

• Type : String
• Valeur par défaut : Valeur définie via l’interface utilisateur.
• Description : Indique si le suivi interdomaines est activé ou non. Les valeurs autorisées sont les suivantes : désactivé, activé ou x-uniquement.

cspScriptNonce

• Type : Voir Politique de sécurité de contenu ci-dessous.
• Valeur par défaut : Voir Politique de sécurité de contenu ci-dessous.
• Description : Voir Politique de sécurité de contenu ci-dessous.

cspStyleNonce

• Type : Voir Politique de sécurité de contenu ci-dessous.
• Valeur par défaut : Voir Politique de sécurité de contenu ci-dessous.
• Description : Voir Politique de sécurité de contenu ci-dessous.

dataProviders

• Type : Voir Data Providers ci-dessous.
• Valeur par défaut : Voir Data Providers ci-dessous.
• Description : Voir Data Providers ci-dessous.

decisioningMethod

• Type : String
• Valeur par défaut : côté serveur
• Autres valeurs : sur périphérique, hybride
• Description : Voir Méthodes de prise de décision ci-dessous.

Méthodes de prise de décision

Avec la prise de décision sur périphérique, la Cible introduit un nouveau paramètre appelé Méthode de prise de décision qui détermine comment at.js fournit vos expériences. Le decisioningMethod contient trois valeurs : côté serveur uniquement, sur périphérique uniquement et hybride. Lorsque decisioningMethod est défini dans targetGlobalSettings(), il agit comme méthode de prise de décision par défaut pour toutes les décisions Target.

Côté serveur uniquement :

La méthode de prise de décision par défaut, côté serveur uniquement, est configurée en standard lorsque at.js 2.5+ est implémenté et déployé sur vos propriétés Web.

L'utilisation de serveur uniquement comme configuration par défaut signifie que toutes les décisions sont prises sur le réseau de périphérie Target, ce qui implique un appel serveur de blocage. Cette approche peut introduire une latence incrémentielle, mais elle offre également des avantages significatifs, comme la possibilité d’appliquer les capacités d’apprentissage automatique de la Cible qui incluent des activités Recommendations, Automated Personalization (AP) et Cible automatique.

En outre, l’amélioration de vos expériences personnalisées à l’aide du profil d’utilisateur de Cible, qui est persisté d’une session à l’autre et dans les canaux, peut fournir des résultats importants à votre entreprise.

Enfin, côté serveur uniquement vous permet d’utiliser le Adobe Experience Cloud et d’affiner les audiences qui peuvent être ciblées par le biais de segments d’Audience Manager et de Adobe Analytics.

Sur périphérique uniquement :

La méthode de prise de décision uniquement sur le périphérique doit être définie dans at.js 2.5+ lorsque la prise de décision sur le périphérique ne doit être utilisée que sur l’ensemble de vos pages Web.

La prise de décision sur le périphérique peut fournir vos expériences et vos activités de personnalisation à une vitesse fulgurante, car les décisions sont prises à partir d’un artefact de règles mis en cache qui contient toutes vos activités admissibles à la prise de décision sur le périphérique.

Pour en savoir plus sur les activités admissibles à la prise de décision sur le périphérique, consultez la section Fonctions prises en charge.

Cette méthode de prise de décision ne doit être utilisée que si les performances sont extrêmement critiques sur toutes les pages qui nécessitent des décisions de Target. En outre, gardez à l’esprit que lorsque cette méthode de prise de décision est sélectionnée, vos Target activités qui ne remplissent pas les critères pour la prise de décision sur le périphérique ne seront pas livrées ou exécutées. La bibliothèque at.js 2.5+ est configurée pour rechercher uniquement l’artefact des règles mises en cache pour prendre des décisions.

Hybride :

Hybridis est la méthode de prise de décision qui doit être définie dans at.js 2.5+ lorsque la prise de décision sur le périphérique et les activités qui nécessitent un appel réseau au réseau Adobe Target Edge doivent être exécutées.

Lorsque vous gérez à la fois des activités de prise de décision sur périphérique et des activités côté serveur, il peut s'avérer un peu compliqué et fastidieux de réfléchir à la manière de déployer et de configurer Target vos pages. Avec la méthode de prise de décision hybride, Target sait quand il doit effectuer un appel serveur au réseau Adobe Target Edge pour les activités qui nécessitent une exécution côté serveur et quand exécuter uniquement les décisions sur le périphérique.

L’artefact de règles JSON comprend des métadonnées pour indiquer à at.js si une mbox comporte une activité côté serveur en cours d’exécution ou une activité de prise de décision sur le périphérique. Cette méthode de prise de décision garantit que les activités que vous prévoyez de livrer rapidement sont effectuées par le biais de la prise de décision sur le périphérique et, pour les activités qui nécessitent une personnalisation plus puissante pilotée par ML, ces activités sont effectuées via le réseau Adobe Target Edge.

defaultContentHiddenStyle

• Type : String
• Valeur par défaut : visibility: masqué
• Description : Utilisé uniquement pour envelopper les mbox qui utilisent DIV avec le nom de classe "mboxDefault" et qui sont exécutées via mboxCreate(), mboxUpdate()ou mboxDefine() pour masquer le contenu par défaut.

defaultContentVisibleStyle

• Type : String
• Valeur par défaut : visibility: visible
• Description : Utilisé uniquement pour les mbox d’encapsulation qui utilisent une balise DIV avec le nom de classe "mboxDefault" et sont exécutées via mboxCreate(), mboxUpdate()ou mboxDefine() pour révéler l’offre appliquée, le cas échéant ou le contenu par défaut.

deviceIdLifetime

• Type : Nombre
• Valeur par défaut : 63244800000 ms = 2 ans
• Description : Durée de conservation deviceId des cookies.

enabled

• Type : Boolean

• Valeur par défaut : true

• Description : Lorsqu’elle est activée, une Target demande de récupération d’expériences et de manipulation DOM pour générer les expériences est exécutée automatiquement. En outre, les appels Target peuvent être exécutés manuellement via getOffer(s) / applyOffer(s).

  Lorsque cette option est désactivée, les requêtes Target ne sont pas exécutées automatiquement ou manuellement.

globalMboxAutoCreate

• Type : Nombre
• Valeur par défaut : Valeur définie via l’interface utilisateur.
• Description : Indique si la requête de mbox globale doit être déclenchée ou non.

imsOrgId

• Type : Sting
• Valeur par défaut : true
• Description : Représente l’ID d’organisation IMS.

optoutEnabled

• Type : Boolean
• Valeur par défaut : false
• Description : Indique si la Cible doit appeler la isOptedOut() fonction de l’API du Visiteur. Fait partie de l’activation de Device Graph.

overrideMboxEdgeServer

• Type : Boolean

• Valeur par défaut : true (true en commençant par at.js version 1.6.2)

• Description : Indique si nous devons utiliser <clientCode>.tt.omtrdc.net le domaine ou le mboxedge<clusterNumber>.tt.omtrdc.net domaine.

  Si cette valeur est true, le domaine mboxedge<clusterNumber>.tt.omtrdc.net est enregistré dans un cookie. Actuellement, il ne fonctionne pas avec CNAME lors de l’utilisation des versions at.js antérieures à at.js 1.8.2 et at.js 2.3.1. Si vous rencontrez un problème, pensez à mettre à jour at.js vers une version plus récente et prise en charge.

overrideMboxEdgeServerTimeout

• Type : Nombre
• Valeur par défaut : 1860000 => 31 minutes
• Description : Indique la durée de vie du cookie qui contient la mboxedge<clusterNumber>.tt.omtrdc.net valeur.

pageLoadEnabled

• Type : Boolean
• Valeur par défaut : true
• Description : Lorsque cette option est activée, récupérez automatiquement les expériences qui doivent être renvoyées au chargement de la page.

secureOnly

• Type : Boolean
• Valeur par défaut : false
• Description : Indique si at.js doit utiliser HTTPS uniquement ou s’il peut permuter entre HTTP et HTTPS en fonction du protocole de la page.

selectorsPollingTimeout

• Type : Nombre

• Valeur par défaut : 5 000 ms = 5 s

• Description : Dans at.js 0.9.6, Target a introduit ce nouveau paramètre qui peut être remplacé par targetGlobalSettings.

  Le paramètre selectorsPollingTimeout représente la durée pendant laquelle le client est prêt à attendre que tous les éléments identifiés par les sélecteurs apparaissent sur la page.

  Les activités créées via le compositeur d’expérience visuelle (VEC) comportent des offres qui contiennent des sélecteurs.

serverDomain

• Type : String
• Valeur par défaut : Valeur définie via l’interface utilisateur.
• Description : Représente le serveur Cible Edge.

serverState

• Type : Voir Personnalisation hybride ci-dessous.
• Valeur par défaut : Voir Personnalisation hybride ci-dessous.
• Description : Voir Personnalisation hybride ci-dessous.

timeout

• Type : Nombre
• Valeur par défaut : Valeur définie via l’interface utilisateur.
• Description : Représente le délai d’expiration de la requête Target Edge.

viewsEnabled

• Type : Boolean
• Valeur par défaut : true
• Description : Lorsque cette option est activée, récupère automatiquement les vues qui doivent être renvoyées au chargement de la page. Les vues sont prises en charge dans at.js 2.x uniquement.

visitorApiTimeout

• Type : Nombre
• Valeur par défaut : 2 000 ms = 2 s
• Description : Représente le délai d’expiration de la requête d’API du Visiteur.

Utilisation

Cette fonction peut être définie avant le chargement du fichier at.js ou dans Administration > Implémentation > Modifier les paramètres at.js > Paramètres du code > En-tête de bibliothèque.

Le champ En-tête de bibliothèque vous permet de saisir du code JavaScript de forme libre. Le code de personnalisation doit être similaire au suivant :

window.targetGlobalSettings = {  
   timeout: 200, // using custom timeout  
   visitorApiTimeout: 500, // using custom API timeout  
   enabled: document.location.href.indexOf('https://www.adobe.com') >= 0 // enabled ONLY on adobe.com  
};

Fournisseurs de données

Ce paramètre permet aux clients de collecter des données auprès de fournisseurs de données tiers tels que Demandbase, BlueKai ou des services personnalisés, et de les transmettre à Target sous forme de paramètres mbox dans la requête globale mbox. Cette fonction prend en charge la collecte des données en provenance de fournisseurs multiples via des requêtes synchrones et asynchrones. Cette approche permet de gérer aisément le scintillement du contenu de la page par défaut, tout en incluant des délais d’attente indépendants pour chaque fournisseur afin de limiter l’impact sur les performances de la page

Les vidéos suivantes comprennent davantage d’informations :

Le paramètre window.targetGlobalSettings.dataProviders est un tableau de fournisseurs de données.

Chaque fournisseur de données présente la structure suivante :

L’exemple suivant illustre l’exécution synchronisée par le fournisseur de données :

var syncDataProvider = { 
  name: "simpleDataProvider", 
  version: "1.0.0", 
  provider: function(callback) { 
    callback(null, {t1: 1}); 
  } 
}; 
  
window.targetGlobalSettings = { 
  dataProviders: [ 
    syncDataProvider 
  ] 
};

Une fois que at.js a traité window.targetGlobalSettings.dataProviders, la requête Target contient un nouveau paramètre : t1=1.

L’exemple suivant illustre la recherche des paramètres que vous souhaitez ajouter à la requête Target dans un service tiers tel que BlueKai, Demandbase, etc. :

var blueKaiDataProvider = { 
   name: "blueKai", 
   version: "1.0.0", 
   provider: function(callback) { 
      // simulating network request 
     setTimeout(function() { 
       callback(null, {t1: 1, t2: 2, t3: 3}); 
     }, 1000); 
   } 
} 
  
window.targetGlobalSettings = { 
   dataProviders: [ 
      blueKaiDataProvider 
   ] 
};

Une fois que at.js a traité window.targetGlobalSettings.dataProviders, la requête Target contient des paramètres supplémentaires : t1=1, t2=2 et t3=3.

L’exemple suivant fait appel à des fournisseurs de données pour collecter des données météorologiques depuis l’API et les envoyer sous forme de paramètres dans une requête Target. La requête Target contiendra des paramètres supplémentaires tels que country et weatherCondition.

var weatherProvider = { 
      name: "weather-api", 
      version: "1.0.0", 
      timeout: 2000, 
      provider: function(callback) { 
        var API_KEY = "caa84fc6f5dc77b6372d2570458b8699"; 
        var lat = 44.426767399999996; 
        var lon = 26.1025384; 
        var url = "//api.openweathermap.org/data/2.5/weather?lang=en"; 
        var data = { 
          lat: lat, 
          lon: lon, 
          appId: API_KEY 
        } 
 
        $.ajax({ 
          type: "GET", 
                url: url, 
          dataType: "json", 
          data: data, 
          success: function(data) { 
            console.log("Weather data", data); 
            callback(null, { 
              country: data.sys.country, 
              weatherCondition: data.weather[0].main 
            }); 
          }, 
          error: function(err) { 
            console.log("Error", err); 
            callback(err); 
          } 
        });         
      } 
    }; 
 
    window.targetGlobalSettings = { 
      dataProviders: [weatherProvider] 
    };

Tenez compte de ce qui suit lors de l’exploitation du paramètre dataProviders :

• Si les fournisseurs de données ajoutés à window.targetGlobalSettings.dataProviders sont asynchrones, ils sont exécutés en parallèle. La requête d’API Visitor sera exécutée en parallèle avec des fonctions ajoutées à window.targetGlobalSettings.dataProviders afin de permettre un temps d’attente minimal.
• at.js ne tentera pas de mettre les données en cache. Si le fournisseur de données extrait les données en une seule fois, il doit s’assurer que les données sont mises en cache et que, lorsque la fonction du fournisseur est appelée, les données du cache sont envoyées pour le second appel.

Stratégie de sécurité du contenu

at.js 2.3.0+ prend en charge la définition des nonies de la stratégie de sécurité de contenu sur les balises SCRIPT et STYLE ajoutées au DOM de la page lors de l’application d’offres de Cible distribuées.

Les nonces SCRIPT et STYLE doivent être définies dans targetGlobalSettings.cspScriptNonce et targetGlobalSettings.cspStyleNonce en conséquence, avant le chargement du fichier at.js 2.3.0+. Consultez un exemple ci-dessous :

...
<head>
 <script nonce="<script_nonce_value>">
window.targetGlobalSettings = {
  cspScriptNonce: "<csp_script_nonce_value>",
  cspStyleNonce: "<csp_style_nonce_value>"
};
 </script>
 <script nonce="<script_nonce_value>" src="at.js"></script>
...
</head>
...

Une fois les paramètres cspScriptNonce et cspStyleNonce spécifiés, at.js 2.3.0+ les définit comme des attributs nonce sur toutes les balises SCRIPT et STYLE qu’il ajoute au DOM lors de l’application d’offres de Cible.

Personnalisation hybride

serverState est un paramètre disponible dans at.js v2.2+ qui peut être utilisé pour optimiser les performances des pages lorsqu’une intégration hybride de Cible est implémentée. L’intégration hybride signifie que vous utilisez at.js v2.2+ côté client et l’API de diffusion ou un SDK Target côté serveur pour diffuser des expériences. serverState permet à at.js v2.2+ d’appliquer des expériences directement à partir du contenu récupéré côté serveur et renvoyé au client dans le cadre de la page diffusée.

Conditions préalables

Vous devez avoir une intégration hybride de Target.

• Côté serveur : Vous devez utiliser la nouvelle API de diffusion ou les SDK de Cible.
• Côté client : Vous devez utiliser at.js version 2.2 ou ultérieure.

Exemples de code

Pour mieux comprendre comment cela fonctionne, reportez-vous aux exemples de code ci-dessous que vous trouverez sur votre serveur. Le code suppose que vous utilisez le Cible Node.js SDK.

// First, we fetch the offers via Target Node.js SDK API, as usual
const targetResponse = await targetClient.getOffers(options);
// A successfull response will contain Target Delivery API request and response objects, which we need to set as serverState
const serverState = {
  request: targetResponse.request,
  response: targetResponse.response
};
// Finally, we should set window.targetGlobalSettings.serverState in the returned page, by replacing it in a page template, for example
const PAGE_TEMPLATE = `
<!doctype html>
<html>
<head>
  ...
  <script>
    window.targetGlobalSettings = {
      overrideMboxEdgeServer: true,
      serverState: ${JSON.stringify(serverState, null, " ")}
    };
  </script>
  <script src="at.js"></script>
</head>
...
</html>
`;
// Return PAGE_TEMPLATE to the client ...

Un exemple d’objet serverState JSON pour la prélecture de vue se présente comme suit :

{
 "request": {
  "requestId": "076ace1cd3624048bae1ced1f9e0c536",
  "id": {
   "tntId": "08210e2d751a44779b8313e2d2692b96.21_27"
  },
  "context": {
   "channel": "web",
   "timeOffsetInMinutes": 0
  },
  "experienceCloud": {
   "analytics": {
    "logging": "server_side",
    "supplementalDataId": "7D3AA246CC99FD7F-1B3DD2E75595498E"
   }
  },
  "prefetch": {
   "views": [
    {
     "address": {
      "url": "my.testsite.com/"
     }
    }
   ]
  }
 },
 "response": {
  "status": 200,
  "requestId": "076ace1cd3624048bae1ced1f9e0c536",
  "id": {
   "tntId": "08210e2d751a44779b8313e2d2692b96.21_27"
  },
  "client": "testclient",
  "edgeHost": "mboxedge21.tt.omtrdc.net",
  "prefetch": {
   "views": [
    {
     "name": "home",
     "key": "home",
     "options": [
      {
       "type": "actions",
       "content": [
        {
         "type": "setHtml",
         "selector": "#app > DIV.app-container:eq(0) > DIV.page-container:eq(0) > DIV:nth-of-type(2) > SECTION.section:eq(0) > DIV.container:eq(1) > DIV.heading:eq(0) > H1.title:eq(0)",
         "cssSelector": "#app > DIV:nth-of-type(1) > DIV:nth-of-type(1) > DIV:nth-of-type(2) > SECTION:nth-of-type(1) > DIV:nth-of-type(2) > DIV:nth-of-type(1) > H1:nth-of-type(1)",
         "content": "<span style=\"color:#FF0000;\">Latest</span> Products for 2020"
        }
       ],
       "eventToken": "t0FRvoWosOqHmYL5G18QCZNWHtnQtQrJfmRrQugEa2qCnQ9Y9OaLL2gsdrWQTvE54PwSz67rmXWmSnkXpSSS2Q==",
       "responseTokens": {
        "profile.memberlevel": "0",
        "geo.city": "dublin",
        "activity.id": "302740",
        "experience.name": "Experience B",
        "geo.country": "ireland"
       }
      }
     ],
     "state": "J+W1Fq18hxliDDJonTPfV0S+mzxapAO3d14M43EsM9f12A6QaqL+E3XKkRFlmq9U"
    }
   ]
  }
 }
}

Une fois la page chargée dans le navigateur, at.js applique immédiatement toutes les offres Target de serverState, sans déclencher d’appel réseau sur le bord Target. En outre, at.js prémasque uniquement les éléments DOM pour lesquels des offres Target sont disponibles dans le contenu récupéré côté serveur, ce qui a une incidence positive sur les performances de chargement de page et sur l’expérience de l’utilisateur final.

Remarques importantes

Tenez compte des points suivants lorsque vous utilisez serverState :

• Actuellement, at.js v2.2 ne prend en charge que la diffusion d’expériences via serverState pour :

  • Activités créées par le compositeur d’expérience visuelle qui sont exécutées au chargement de la page.

  • Vues prérécupérées.

    En cas d’SPA utilisant les Vues Target et triggerView() dans l’API at.js, at.js v2.2 met en cache le contenu de toutes les Vues prérécupérées côté serveur et les applique dès que chaque Vue est déclenchée par triggerView(), sans déclencher d’autres appels de récupération de contenu à la Cible.

  • Remarque : Actuellement, les mbox récupérées côté serveur ne sont pas prises en charge dans serverState.

• Lors de l’application d’offres serverState à at.js, les paramètres pageLoadEnabled et viewsEnabled sont pris en compte. Par exemple, les offres de chargement de page ne seront pas appliquées si le paramètre pageLoadEnabled est false.

  Pour activer ces paramètres, activez la bascule dans Administration > Implémentation > Modifier > Chargement de page activé.

  

• Si vous utilisez serverState et des balises <script> dans le contenu renvoyé, veillez à ce que votre contenu HTML utilise <\/script> au lieu de </script>. Si vous utilisez </script>, le navigateur interprète </script> comme la fin d’un SCRIPT intégré et il peut rompre la page HTML.

Ressources supplémentaires

Pour en savoir plus sur le fonctionnement de serverState, consultez les ressources suivantes :

• Exemple de code.
• Exemple d’application d’une seule page (SPA) avec serverState.