Implementieren von Adobe Target at.js 2.0 in eine Einzelseiten-App (SPA)
Adobe Target at.js 2.0 bietet umfassende Funktionen, mit denen Ihr Unternehmen mithilfe von Client-seitigen Technologien der neuesten Generation Personalisierungen ausführen kann. Diese Version konzentriert sich auf die Aktualisierung von at.js, um harmonische Interaktionen mit Einzelseitenanwendungen (SPA) zu ermöglichen.
Implementieren von at.js 2.0 in einer SPA
- Implementieren Sie
at.js2.0 im <head> Ihrer Einzelseiten-App. - Implementieren Sie die Funktion "
adobe.target.triggerView()", wenn sich die Ansicht in Ihrer SPA ändert. Hierfür können verschiedene Verfahren eingesetzt werden, z. B. das Überwachen von URL-Hash-Änderungen, das Überwachen von benutzerdefinierten Ereignissen, die von Ihrer SPA ausgelöst werden, oder das Einbetten destriggerView()-Codes direkt in Ihre Anwendung. Sie sollten die Option auswählen, die am besten für Ihre spezifische Einzelseitenanwendung geeignet ist. - Der Ansichtsname ist der erste Parameter der Funktion
triggerView(). Verwenden Sie einfache, klare und eindeutige Namen, damit sie im Visual Experience Composer von Target leicht ausgewählt werden können. - Sie können Trigger-Ansichten in kleinen Ansichtsänderungen sowie in nicht SPA Kontexten wie der halben Navigation nach unten auf einer unendlichen Scrollseite anzeigen.
at.js2.0 undtriggerView()können über eine Tag-Management-Lösung wie Adobe Experience Platform Launch implementiert werden.
Einschränkungen von at.js 2.0
Beachten Sie vor dem Upgrade die folgenden Einschränkungen von at.js 2.0:
- Domänenübergreifendes Tracking wird in
at.js2.0 nicht unterstützt - Die URL-Parameter mboxOverride.browserIp und mboxSession werden in
at.js2.0 nicht unterstützt - Die alten Funktionen mboxCreate, mboxDefine, mboxUpdate werden in
at.js2.0 nicht mehr unterstützt. Standardinhalt wird angezeigt und es werden keine Netzwerkanfragen gestellt.
Im Video verwendeter Bibliotheksfußzeilencode
Der unten stehende Code wurde während des Videos zum Abschnitt "Bibliotheksfußzeile"der at.js -Bibliothek hinzugefügt. Sie wird ausgelöst, wenn die App zuerst geladen wird und dann bei jeder Hash-Änderung in der App. Es verwendet eine bereinigte Version des Hash als Ansichtsnamen und "home", wenn der Hash leer ist. Beachten Sie, dass der Code zur Identifizierung des SPA nach dem Text "react/"in der URL sucht, der höchstwahrscheinlich auf Ihrer Site aktualisiert werden muss. Beachten Sie auch, dass es für Ihre SPA angemessener sein kann, triggerView() benutzerspezifische Ereignisse auszulösen oder den Code direkt in Ihre App einzubetten.
function sanitizeViewName(viewName) {
if (viewName.startsWith('#')) {
viewName = viewName.substr(1);
}
if (viewName.startsWith('/')) {
viewName = viewName.substr(1);
}
return viewName;
}
function triggerView(viewName) {
viewName = sanitizeViewName(viewName) || 'home';
// Validate if the Target Libraries are available on your website
if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
adobe.target.triggerView(viewName);
console.log('AT: View triggered on page load: '+viewName)
}
}
//fire triggerView when the SPA loads and when the hash changes in the SPA
if(window.location.pathname.indexOf('react/') >-1){
triggerView(location.hash);
}
window.onhashchange = function() {
if(window.location.pathname.indexOf('react/') >-1){
triggerView(location.hash);
}
}