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.
Dans certains cas d’utilisation, en particulier lorsque at.js est distribué via la Dynamic Tag Management (DTM), il se peut que vous souhaitiez remplacer certains des paramètres.
Vous pouvez remplacer les paramètres suivants :
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.
target-global-mbox
il est utilisé pour diffuser des offres créées dans le compositeur d’expérience visuelle, également appelées offres visuelles.mboxCreate()
, mboxUpdate()
ou mboxDefine()
pour masquer le contenu par défaut.mboxCreate()
, mboxUpdate()
ou mboxDefine()
pour révéler l’offre appliquée, le cas échéant ou le contenu par défaut.deviceId
des cookies.Le paramètre deviceIdLifetime peut être remplacé dans at.js version 2.3.1 ou ultérieure.
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.
isOptedOut()
fonction de l’API du Visiteur. Fait partie de l’activation de Device Graph.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.
mboxedge<clusterNumber>.tt.omtrdc.net
valeur.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.
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
};
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
La section Fournisseurs de données doit disposer du fichier at.js 1.3 ou d’une version ultérieure.
Les vidéos suivantes comprennent davantage d’informations :
Vidéo | Description |
---|---|
Utilisation des fournisseurs de données dans Adobe Target | L’option Fournisseurs de données est une fonctionnalité qui vous permet de transmettre facilement des données provenant de tiers à Target. Un tiers peut être un service météorologique, une plateforme de gestion des données, ou même votre propre service web. Vous pouvez ensuite utiliser ces données pour créer des audiences, cibler du contenu et enrichir le profil du visiteur. |
Implémenter les fournisseurs de données dans Adobe Target | Détails de mise en œuvre et exemples d’utilisation de la fonctionnalité Fournisseurs de données d’Adobe Target pour récupérer les données de fournisseurs de données tiers et les transmettre dans la requête Target. |
Le paramètre window.targetGlobalSettings.dataProviders
est un tableau de fournisseurs de données.
Chaque fournisseur de données présente la structure suivante :
Clé | Type | Description |
---|---|---|
name | Chaîne | Nom du fournisseur |
version | Chaîne | Version du fournisseur. Cette clé sera utilisée pour l’évolution du fournisseur. |
timeout | Nombre | Représente le délai d’attente du fournisseur dans le cas d’une requête réseau. Cette clé est facultative. |
provider | Fonction | Fonction qui contient la logique de recherche des données de fournisseur. La fonction comporte un seul paramètre requis : callback . Le paramètre callback est une fonction qui doit être appelée uniquement lorsque les données ont été recherchées avec succès ou qu’une erreur s’est produite.Le paramètre callback appelle lui-même deux paramètres :
|
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
:
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 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.
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 de Cible côté serveur pour diffuser des expériences. serverState
donne à at.js v2.2+ la possibilité 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.
Vous devez avoir une intégration hybride de Target.
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.
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.
Pour en savoir plus sur le fonctionnement de serverState
, consultez les ressources suivantes :