Sie können Einstellungen in der at.js-Bibliothek mithilfe von „targetGlobalSettings()
“ überschreiben, anstatt die Einstellungen in der Benutzeroberfläche von Target Standard/Premium oder durch Verwendung von REST-APIs zu konfigurieren.
In einigen Fällen, besonders bei der Bereitstellung von at.js über Dynamic Tag Management (DTM), ist es von Vorteil, einige Einstellungen zu überschreiben.
Folgende Einstellungen können überschrieben werden:
Typ: String
Standardwert: body
Beschreibung: Wird nur verwendet, wenn globalMboxAutocreate === true
die Wahrscheinlichkeit des Flackerns minimiert wird.
Weitere Informationen finden Sie unter Verwaltung von Flackern mit „at.js“.
target-global-mbox
werden, die im Visual Experience Composer (auch als visuelle Angebot bezeichnet) erstellt wurden.mboxCreate()
, mboxUpdate()
oder mboxDefine()
zum Ausblenden von Standardinhalten ausgeführt werden.mboxCreate()
oder mboxUpdate()
zur Anzeige angewendeter Angebot, sofern vorhanden, oder mboxDefine()
zur Anzeige von Standardinhalten ausgeführt werden.deviceId
wird in Cookies beibehalten.Die Einstellung deviceIdLifetime kann in at.js Version 2.3.1 oder höher überschrieben werden.
Typ: Boolesch
Standardwert: true
Beschreibung: Wenn diese Option aktiviert ist, wird automatisch eine Target Anforderung zum Abrufen von Erlebnissen und zur DOM-Manipulation zum Rendern der Erlebnisse ausgeführt. Außerdem können Target-Aufrufe manuell über getOffer(s)
/ applyOffer(s)
ausgeführt werden.
Bei Deaktivierung werden Target-Anforderungen nicht automatisch oder manuell ausgeführt.
isOptedOut()
Funktion aufrufen soll. Diese Funktion ist Teil der Aktivierung für Gerätediagramme.Typ: Boolesch
Standardwert: true (true), beginnend mit at.js Version 1.6.2)
Beschreibung: Gibt an, ob <clientCode>.tt.omtrdc.net
Domäne oder mboxedge<clusterNumber>.tt.omtrdc.net
Domäne verwendet werden soll.
Wenn dieser Wert true ist, wird mboxedge<clusterNumber>.tt.omtrdc.net
-Domäne in einem Cookie gespeichert. Derzeit nicht mit CNAME funktioniert, wenn at.js-Versionen vor at.js 1.8.2 und at.js 2.3.1 verwendet werden. Wenn dies ein Problem für Sie ist, sollten Sie in Erwägung ziehen, at.js auf eine neuere, unterstützte Version zu aktualisieren.
mboxedge<clusterNumber>.tt.omtrdc.net
Wert enthält.Typ: Nummer
Standardwert: 5000 ms = 5 s
Beschreibung: In at.js 0.9.6 wurde diese neue Einstellung Target eingeführt, die über targetGlobalSettings
überschrieben werden kann.
Die Einstellung selectorsPollingTimeout
gibt an, wie lange der Client bereit ist zu warten, bis alle von Selektoren identifizierten Elemente auf der Seite angezeigt werden.
Über Visual Experience Composer (VEC) erstellte Aktivitäten haben Angebote, die Selektoren enthalten.
Diese Funktion kann definiert werden, bevor at.js geladen wird oder in Administration > Implementierung > at.js-Einstellungen bearbeiten > Codeeinstellungen > Bibliothekskopfzeile.
Die Bibliothekskopfzeile ermöglicht es Ihnen, JavaScript ohne Formvorgabe zu verwenden. Der Anpassungscode sollte dem folgenden Beispiel ähneln:
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
};
Mit dieser Einstellung können Kunden Daten von Drittdatenanbietern sammeln, beispielsweise Demandbase, BlueKai und benutzerspezifische Services, und die Daten an Target als Mbox-Parameter in der globalen Mbox-Anfrage weitergeben. Sie unterstützt die Sammlung von Daten von mehreren Anbietern über asynchrone und synchrone Anfragen. Mit diesem Ansatz ist es ein Leichtes, Flicker- oder Standardinhalte zu verwalten und gleichzeitig unabhängige Timeouts für die einzelnen Anbieter festzulegen, um die Auswirkungen auf die Seitenleistung zu begrenzen
Datenanbieter erfordert at.js 1.3 oder höher.
Weitere Informationen dazu finden Sie in den folgenden Videos:
Video | Beschreibung |
---|---|
Verwenden von Datenanbietern in Adobe Target | Mit der Datenanbieterfunktion können Sie Dateien von Drittanbietern einfach an Target übergeben. Ein Drittanbieter kann ein Wetterdienst, ein DMP oder sogar Ihr eigener Web-Service sein. Anschließend können Sie diese Daten zur Erstellung von Zielgruppen und zielgerichtetem Inhalt und zur Aufwertung des Benutzerprofils verwenden. |
Implementieren von Datenanbietern in Adobe Target | Implementierungsdetails und Beispiele zur Verwendung der dataProviders-Funktion von Adobe Target, um Daten von Drittanbietern abzurufen und in der Target-Anfrage zu übergeben. |
Die Einstellung window.targetGlobalSettings.dataProviders
entspricht einer Reihe von Datenanbietern.
Jeder Datenanbieter weist die folgende Struktur auf:
Schlüssel | Typ | Beschreibung |
---|---|---|
name | Zeichenfolge | Name des Anbieters. |
version | Zeichenfolge | Anbieterversion. Dieser Schlüssel wird für die Anbieterentwicklung verwendet. |
Zeitüberschreitung | Nummer | Gibt die Anbieter-Zeitüberschreigung an, wenn es sich hierbei um eine Netzwerkanfrage handelt. Dieser Schlüssel ist optional. |
provider | Funktion | Die Funktion, welche die Logik zum Abrufen der Anbieterdaten enthält. Die Funktion weist einen einzigen erforderlichen Parameter auf: callback . Der Parameter „callback“ ist eine Funktion, die nur aufgerufen werden sollte, wenn die Daten erfolgreich abgerufen wurden oder ein Fehler vorliegt.Der Callback erwartet zwei Parameter:
|
Im folgenden Beispiel wird gezeigt, wo der Datenanbieter die Synchronisierungsausführung verwendet:
var syncDataProvider = {
name: "simpleDataProvider",
version: "1.0.0",
provider: function(callback) {
callback(null, {t1: 1});
}
};
window.targetGlobalSettings = {
dataProviders: [
syncDataProvider
]
};
Nach den at.js-Prozessen vom Typ window.targetGlobalSettings.dataProviders
enthält die Target-Anfrage einen neuen Parameter: t1=1
.
Im folgenden Beispiel sehen Sie, ob die Parameter, die Sie zur Target-Anfrage hinzufügen möchten, von einem Drittanbieterservice, so wie BlueKai, Demandbase usw., abgerufen werden:
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
]
};
Nach den at.js-Prozessen vom Typ window.targetGlobalSettings.dataProviders
enthält die Target-Anfrage zusätzliche Parameter: t1=1
, t2=2
und t3=3
.
Das folgende Beispiel verwendet Datenanbieter, um API-Daten über das Wetter zu sammeln und als Parameter in einer Target-Anfrage zu senden. Die Target-Anfrage weist zusätzliche Parameter auf, beispielsweise country
und 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]
};
Beachten Sie Folgendes, wenn Sie die Einstellung dataProviders
verwenden.
window.targetGlobalSettings.dataProviders
hinzugefügten Datenanbieter asynchron sind, werden sie parallel ausgeführt. Die Besucher-API-Anfrage wird parallel mit den window.targetGlobalSettings.dataProviders
hinzugefügten Funktionen ausgeführt, um eine minimale Wartezeit zu ermöglichen."at.js 2.3.0+"unterstützt das Festlegen von Content Security Policy-Nonces für SCRIPT- und STYLE-Tags, die beim Anwenden von bereitgestellten Zielgruppe-Angeboten an das Seiten-DOM angehängt werden.
Die SCRIPT- und STYLE-Nonces sollten vor dem Laden von at.js 2.3.0 entsprechend in targetGlobalSettings.cspScriptNonce
und targetGlobalSettings.cspStyleNonce
eingestellt werden. Siehe Beispiel unten:
...
<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>
...
Nachdem die Einstellungen cspScriptNonce
und cspStyleNonce
festgelegt wurden, legt at.js 2.3.0+ diese auf allen SCRIPT- und STYLE-Tags, die beim Anwenden von Zielgruppen-Angeboten an das DOM angehängt werden, als nonce-Attribute fest.
serverState
ist eine Einstellung in at.js v2.2+, die zur Optimierung der Seitenleistung verwendet werden kann, wenn eine Hybridintegration der Zielgruppe implementiert wird. Hybrid-Integration bedeutet, dass Sie sowohl at.js v2.2+ auf Client- als auch Versand-API oder ein Zielgruppe-SDK auf Serverseite verwenden, um Erlebnisse bereitzustellen. serverState
gibt at.js v2.2+ die Möglichkeit, Erlebnisse direkt aus Inhalten anzuwenden, die auf dem Server abgerufen und als Teil der bereitzustellenden Seite an den Client zurückgegeben werden.
Sie müssen über eine Hybridintegration von Target verfügen.
Um besser zu verstehen, wie dies funktioniert, sehen Sie sich bitte die Codebeispiele unten an, die Sie auf Ihrem Server haben würden. Der Code setzt voraus, dass Sie das SDK Zielgruppe Node.js verwenden.
// 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 ...
Ein Beispiel für ein Objekt serverState
-JSON für die Ansicht-Vorab-Abfrage sieht wie folgt aus:
{
"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"
}
]
}
}
}
Nachdem die Seite im Browser geladen wurde, wendet at.js alle Target-Angebot von serverState
sofort an, ohne Netzwerkaufrufe gegen die Target-Kante auszulösen. Darüber hinaus verhindert at.js nur die DOM-Elemente, für die im serverseitigen Inhalt Target-Angebot verfügbar sind, was sich positiv auf die Seitenladeleistung und das Endbenutzererlebnis auswirkt.
Beachten Sie bei Verwendung von serverState
Folgendes:
Zurzeit unterstützt at.js v2.2 nur die Bereitstellung von Erlebnissen über serverState für:
VEC-erstellte Aktivitäten, die beim Laden der Seite ausgeführt werden.
Vorab abgerufene Ansichten.
Bei SPA mit den Ansichten Target und triggerView()
in der at.js-API speichert at.js v2.2 den Inhalt für alle auf dem Server vorab abgerufenen Ansichten zwischen und wendet diese an, sobald jede Ansicht über triggerView()
ausgelöst wird, ohne dass weitere inhaltliche Abrufe an die Zielgruppe ausgelöst werden.
Hinweis: Derzeit werden auf der Serverseite abgerufene Mboxes in nicht unterstützt serverState
.
Beim Anwenden von serverState
Angeboten berücksichtigt at.js die Einstellungen pageLoadEnabled
und viewsEnabled
, z. B. werden keine Angebot zum Laden der Seite angewendet, wenn pageLoadEnabled
den Wert false hat.
Aktivieren Sie zum Aktivieren dieser Einstellungen den Umschalter unter Administration > Implementierung > Bearbeiten > Seitenladevorgang aktiviert.
Wenn Sie serverState
und <script>
-Tags im zurückgegebenen Inhalt verwenden, stellen Sie sicher, dass Ihr HTML-Inhalt <\/script>
anstelle von </script>
verwendet. Wenn Sie </script>
verwenden, interpretiert der Browser </script>
als Ende eines Inline-SKRIPT und es kann die HTML-Seite beschädigen.
Weitere Informationen zur Funktionsweise von serverState
finden Sie in den folgenden Ressourcen: