Implémentation d’Adobe Target at.js 2.0 dans une application d’une seule page (SPA)

Adobe Target at.js La version 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. at.js pour avoir des interactions harmonieuses avec les applications d’une seule page (SPA).

Implémentation d’at.js 2.0 dans un SPA

  • Mise en oeuvre at.js 2,0 dans la variable <head> de votre application d’une seule page.
  • Mettez en oeuvre le adobe.target.triggerView() à chaque fois que l’affichage change dans votre SPA. Diverses techniques peuvent être utilisées à cet effet, par exemple l’écoute des modifications de hachage d’URL, l’écoute des événements personnalisés déclenchés par votre SPA ou l’incorporation des triggerView() code directement 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 variable triggerView() fonction . 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.js 2.0 et triggerView() peut être implémenté par le biais d’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 la mise à niveau :

  • Le suivi inter-domaines n’est pas pris en charge dans at.js 2,0
  • Les paramètres mboxOverride.browserIp et mboxSession URL ne sont pas pris en charge dans at.js 2,0
  • Les fonctions héritées mboxCreate, mboxDefine, mboxUpdate sont obsolètes dans at.js 2.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 Pied de page de bibliothèque du 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() hors 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);
    }
}

Ressources supplémentaires

recommendation-more-help
0f172607-337e-442f-a279-477fd735571f