Implémentation d’Adobe Target at.js 2.0 dans une application d’une seule page (SPA)
Adobe Target at.js 2.0 fournit des ensembles de fonctionnalités riches qui permettent à votre entreprise d’exécuter la personnalisation sur les technologies côté client de nouvelle génération. Cette version est axée sur la mise à niveau de at.js afin d’avoir des interactions harmonieuses avec les applications d’une seule page (SPA).
Implémentation d’at.js 2.0 dans un SPA
- Implémentez
at.js2.0 dans la balise <head> de votre application de page unique. - Mettez en oeuvre la fonction
adobe.target.triggerView()chaque fois que l’affichage change dans votre SPA. Diverses techniques peuvent être utilisées à cet effet, telles que l’écoute des modifications de hachage d’URL, l’écoute des événements personnalisés déclenchés par votre SPA ou l’incorporation directe du codetriggerView()dans votre application. Vous devez choisir l’option qui fonctionne le mieux pour votre application d’une seule page spécifique. - Le nom de la vue est le premier paramètre de la fonction
triggerView(). Utilisez des noms simples, clairs et uniques pour faciliter leur sélection dans le compositeur d’expérience visuelle de Target. - Vous pouvez déclencher des vues dans des changements de petites vues, ainsi que dans des contextes autres que SPA, tels que la mi-chemin vers le bas d’une page de défilement infini.
at.js2.0 ettriggerView()peuvent être implémentés via une solution de gestion des balises, telle qu’Adobe Experience Platform Launch.
Limites d’at.js 2.0
Gardez à l’esprit les limites suivantes de at.js 2.0 avant de procéder à la mise à niveau :
- Le suivi inter-domaines n'est pas pris en charge dans
at.js2.0 - Les paramètres mboxOverride.browserIp et mboxSession URL ne sont pas pris en charge dans
at.js2.0 - Les fonctions héritées mboxCreate, mboxDefine, mboxUpdate sont obsolètes dans
at.js2.0. Le contenu par défaut s’affiche et aucune demande réseau n’est effectuée.
Code de pied de page de bibliothèque utilisé dans la vidéo
Le code ci-dessous a été ajouté à la section Library Footer (Pied de page de bibliothèque) de la bibliothèque at.js pendant la vidéo. Il se déclenche lors du premier chargement de l’application, puis lors de toute modification de hachage dans l’application. Il utilise une version nettoyée du hachage comme nom d’affichage et "home" lorsque le hachage est vide. Notez que pour identifier le SPA, le code recherche le texte "response/" dans l’URL, qui devra probablement être mis à jour sur votre site. Gardez également à l’esprit qu’il peut être plus approprié pour votre SPA de déclencher triggerView() des événements personnalisés ou en incorporant le code directement dans votre application.
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);
}
}