Réponses aux questions fréquentes sur la bibliothèque JavaScript at.js Adobe Target.
La bibliothèque at.js remplace la bibliothèque mbox.js. La bibliothèque mbox.js n’est plus prise en charge. Pour la plupart des utilisateurs, at.js offre cependant des avantages en comparaison de mbox.js.
Autres avantages : at.js réduit les délais de chargement des pages pour les implémentations web, renforce la sécurité et offre des options d’implémentation optimisées pour les applications d’une seule page.
Le diagramme suivant illustre les performances de chargement de page avec mbox.js et at.js.
Comme illustré ci-dessus, avec mbox.js, le contenu de la page ne commençait à charger qu’une fois l’appel Target terminé. Avec at.js, le contenu de la page commence à charger dès que l’appel de Target est initié, sans attendre qu’il soit terminé.
Bon nombre de clients et de consultants souhaitent connaître l’impact d’at.js et de mbox.js sur le délai de chargement des pages, particulièrement en ce qui concerne les nouveaux utilisateurs et les utilisateurs réguliers. Il est, malheureusement, difficile de mesurer l’influence d’at.js ou de mbox.js sur le délai de chargement des pages et d’avancer des chiffres concrets en raison de l’implémentation de chaque client.
Toutefois, si l’API visiteur est présente sur la page, Target peut mieux comprendre comment at.js et mbox.js influencent le délai de chargement des pages.
L’API visiteur et at.js ou mbox.js ont un impact sur le délai de chargement des pages uniquement lorsque vous utilisez la mbox globale (en raison de la technique de masquage du corps). Les mboxes régionales ne sont pas impactées par l’intégration de l’API visiteur.
Les sections suivantes décrivent la séquence d’actions pour les nouveaux visiteurs et les visiteurs récurrents :
L’API visiteur est chargée, analysée et exécutée.
at.js / mbox.js est chargé, analysé, puis exécuté.
Si la fonction de création automatique de mbox globale est activée, la bibliothèque JavaScript de Target :
L’API visiteur est chargée, analysée et exécutée.
at.js / mbox.js est chargé, analysé, puis exécuté.
Si la fonction de création automatique de mbox globale est activée, la bibliothèque JavaScript de Target :
Pour les nouveaux visiteurs, si l’API visiteur est présente, Target doit se connecter plusieurs fois pour s’assurer que les requêtes Target contiennent les données Experience Cloud Visitor ID. Pour les visiteurs réguliers, Target se connecte uniquement à Target pour récupérer le contenu personnalisé.
at.js version 1.0.0 (et ultérieure) déclenche toutes les demandes en parallèle. Les versions précédentes exécutent les requêtes de manière séquentielle, ce qui signifie que les requêtes sont placées en file d’attente et que Target attend que la première requête se termine avant de passer à la suivante.
La façon dont les versions précédentes d’at.js exécutent les demandes est sujette au « blocage d’en-tête de ligne ». Dans at.js version 1.0.0 et ultérieure, est passé à l’exécution de demandes parallèles.Target
Si vous consultez par exemple la cascade de l’onglet réseau pour at.js 0.9.1, vous verrez que la demande suivante ne démarre pas tant que la précédente n’est pas terminée. Target Cette séquence ne fonctionne pas avec at.js version 1.0.0 et ultérieure, où toutes les requêtes démarrent en même temps.
En termes de temps de réponse, mathématiquement, cette séquence peut se résumer comme suit :
La bibliothèque at.js version 1.0.0 exécute les requêtes plus rapidement. En outre, les demandes at.js sont asynchrones, de sorte que ne bloque pas le rendu de la page. Target Même si le traitement des requêtes ne prend que quelques secondes, la page rendue est toujours visible. Toutefois, certaines parties de la page sont masquées, et ce, jusqu’à ce que Target reçoive une réponse du Edge de Target.
La version 1.0.0 d’at.js permet de charger la bibliothèque Target de manière asynchrone.
Pour charger at.js de manière asynchrone, procédez comme suit :
L’approche par le biais des balises dans Adobe Experience Platform est celle recommandée.
Vous pouvez également charger at.js de manière asynchrone en ajoutant l’attribut async à la balise du script qui charge at.js. Utilisez un élément semblable au suivant :
<script src="<URL to at.js>" async></script>
Vous pouvez également charger at.js de manière asynchrone en utilisant le code suivant :
var script = document.createElement('script');
script.async = true;
script.src = "<URL to at.js>";
document.head.appendChild(script);
Le chargement d’at.js de manière asynchrone est un excellent moyen d’éviter de bloquer le rendu du navigateur. Cependant, cette technique peut entraîner un scintillement de la page web.
Vous pouvez éviter le scintillement à l’aide d’un extrait de code de masquage préalable qui masque la page (ou les parties spécifiées), puis la révèle après le chargement d’at.js et de la requête globale. Vous devez ajouter le fragment de code avant le chargement d’at.js.
Si vous déployez at.js par le biais d’une implémentation Adobe Experience Platform asynchrone, assurez-vous d’inclure le fragment de code de masquage préalable directement sur vos pages, avant le code intégré d’implémentation de Target avec Adobe Experience Platform.
Si vous déployez at.js par le biais d’une implémentation synchrone de la gestion dynamique des balises, le fragment de code prémasqué peut être ajouté au moyen d’une règle de chargement de page déclenchée en haut de la page.
Pour plus d’informations, voir Comment at.js gère le scintillement.
Adobe Experience Manager 6.2 avec FP-11577 (ou ultérieur) prend maintenant en charge les mises en œuvre d’at.js avec son intégration des Services Cloud d’Adobe Target.
Target propose plusieurs solutions pour éviter le scintillement au chargement des pages. Pour plus d’informations, voir Prévention du scintillement avec at.js.
Le fichier at.js fait environ 109 Ko une fois téléchargé. Cependant, comme la plupart des serveurs compressent automatiquement les fichiers pour les rendre plus légers, at.js ne fait plus que 34 Ko environ une fois compressé (avec GZIP ou une autre méthode) sur votre serveur et chargé lorsque des utilisateurs visitent votre site web. Les paramètres de compression du serveur sur lequel vous avez installé at.js déterminent sa taille réelle après compression.
Les implémentations at.js utilisent une seule bibliothèque (at.js), tandis que les implémentations mbox.js en utilisent réellement deux (mbox.js et target.js). Il serait donc préférable donc de comparer at.js à mbox.js et target.js
. Si l’on compare la taille des fichiers gzip des deux versions, at.js version 1.2 fait 34 Ko, tandis mbox.js version 63 fait 26,2 Ko. ``
Le fichier at.js est plus volumineux, car il effectue beaucoup plus d’analyses DOM que le fichier mbox.js, du fait que le fichier at.js doit interpréter les données « brutes » qu’il récupère dans la réponse JSON. mbox.js utilisait document.write()
et toute l’analyse était effectuée par le navigateur.
Malgré une taille de fichier plus importante, nos tests démontrent que les pages se chargent plus rapidement avec at.js qu’avec mbox.js. En outre, at.js offre une sécurité accrue, car il ne charge pas de fichiers supplémentaires de manière dynamique ni n’utilise document.write
.
Actuellement, at.js utilise des parties de jQuery ; c’est pourquoi l’avis de licence MIT s’affiche en haut du fichier at.js. jQuery n’est pas exposé et n’interfère pas avec la bibliothèque jQuery déjà présente sur votre page, qui peut être d’une autre version. Il n’est pas possible de supprimer le code jQuery dans at.js.
Non, si le suivi inter-domaines est défini sur x-uniquement et que les cookies tiers sont désactivés dans Safari, mbox.js et at.js définissent un cookie désactivé et aucune demande de mbox n’est exécutée pour le domaine de ce client spécifique.
Pour prendre en charge les visiteurs Safari, il convient d’avoir un x-domaine « désactivé » (définit uniquement un cookie propriétaire) ou « activé » (définit un cookie propriétaire sur Safari, ainsi que des cookies propriétaires et tiers sur les autres navigateurs).
Oui, vous pouvez utiliser le VEC pour votre SPA si vous utilisez at.js 2.x. Pour plus d’informations, consultez Compositeur d’expérience visuelle monopage (SPA).
Oui. Vous pouvez également utiliser mboxTrace à des fins de débogage ou les outils de développement de votre navigateur pour inspecter les demandes de réseau, en filtrant sur « mbox » pour isoler les appels mbox.
Oui, comme avec mbox.js.
Les clients de Target utilisent parfois des instances basées sur le cloud avec Target à des fins de test ou de preuve de concept. Ces domaines, et de nombreux autres, font partie de la liste des suffixes publics.
Les navigateurs modernes n’enregistrent pas les cookies si vous utilisez ces domaines, sauf si vous personnalisez le paramètre cookieDomain
à l’aide de targetGlobalSettings(). Pour plus d’informations, voir Utilisation d’instances basées sur Cloud avec Target.
Assurez-vous que vous utilisez la version at.js 1.2 ou ultérieure. Néanmoins, Adobe vous recommande vivement de rester à jour avec la dernière version.
Remarque : Les exemples suivants ne sont pas nécessaires si vous utilisez la version 1.2 ou ultérieure d’at.js.
Remarque : En fonction de votre utilisation de targetGlobalSettings, vous devrez peut-être apporter des modifications supplémentaires au code après le téléchargement d’at.js. Par exemple, si vous avez besoin de paramètres légèrement différents pour vos mises en œuvre Target sur plusieurs sites web et que vous ne parvenez pas à définir ces paramètres dynamiquement à l’aide d’un code JavaScript personnalisé, effectuez ces personnalisations manuellement après avoir téléchargé le fichier et avant de le transférer vers le site web correspondant.
Les exemples suivants permettent d’utiliser la fonction targetGlobalSettings()
d’at.js pour insérer un fragment de code permettant de prendre en charge les adresses IP.
Cet exemple concerne une adresse IP unique :
if (window.location.hostname === '123.456.78.9') {
window.targetGlobalSettings = window.targetGlobalSettings || {};
window.targetGlobalSettings.cookieDomain = window.location.hostname;
}
Cet exemple concerne une plage d’adresses IP :
if (/^123\.456\.78\..*/g.test(window.location.hostname)) {
window.targetGlobalSettings = window.targetGlobalSettings || {};
window.targetGlobalSettings.cookieDomain = window.location.hostname;
}
Ces messages ne sont pas liés à la fonctionnalité at.js. La bibliothèque at.js tente de signaler tout ce qui est introuvable dans l’élément DOM.
L’affichage de ce message d’avertissement peut s’expliquer par les causes suivantes :
La page est créée dynamiquement et at.js ne parvient pas à trouver l’élément.
La page est créée lentement (en raison de la lenteur du réseau) et at.js ne parvient pas à trouver le sélecteur dans le DOM.
La structure de la page sur laquelle s’exécute l’activité a été modifiée. Si vous rouvrez l’activité dans le Compositeur d’expérience visuelle (VEC), un message d’avertissement s’affiche. Mettez à jour l’activité afin que tous les éléments nécessaires soient détectés.
La page sous-jacente fait partie d’une Application monopage (SPA) ou la page contient des éléments qui apparaissent plus bas dans la page et le « mécanisme d’interrogation des sélecteurs » at.js ne parvient pas à trouver ces éléments. Augmenter le selectorsPollingTimeout
peut aider. Pour plus d’informations, voir targetGlobalSettings().
Les mesures de suivi des clics tentent de s’ajouter à chaque page, indépendamment de l’URL à laquelle elles ont été configurées. Bien que sans danger, cette situation entraîne l’affichage répété de ces messages.
Pour des résultats optimaux, téléchargez et utilisez la dernière version d’at.js. Pour plus d’informations, consultez les Détails de la version at.js et le Téléchargement d’at.js.
tt.omtrdc.net est le nom de domaine du réseau EDGE d’Adobe utilisé pour recevoir tous les appels au serveur pour Target.
HttpOnly ne peut être défini que via un code côté serveur. TargetLes cookies, tels que mbox, étant créés et enregistrés via le code JavaScript, ne peut pas utiliser l’indicateur de Target cookie HttpOnly. Target utilise la définition HttpOnly pour les cookies tiers définis du côté serveur lorsque le suivi inter-domaines est activé.
Secure ne peut être défini que via JavaScript lorsque la page a été chargée via HTTPS. Si la page se charge initialement via HTTP, JavaScript ne peut pas définir cet indicateur. En outre, si l’indicateur Secure est utilisé, le cookie est disponible uniquement sur les pages HTTPS. Pour les pages chargées via HTTPS, Target définit les attributs Secure et SameSite=None.
Pour garantir le suivi correct des utilisateurs par Target et parce que les cookies sont générés côté client, Target n’utilise aucun de ces indicateurs, sauf dans les situations mentionnées ci-dessus.
Toutes les prises de décision de Target se font côté serveur. Cela signifie que at.js déclenche une demande de réseau à chaque rechargement de page, ou qu’une API publique de at.js est appelée.
at.js tente d’éviter le masquage préalable de l’ensemble HTML BODY ou autres éléments DOM pendant une période prolongée, mais cela dépend des conditions du réseau et de la configuration des activités. at.js fournit des paramètres pouvant être utilisés pour personnaliser BODY en masquant le style CSS. Par exemple, au lieu de masquer entièrement l’ensemble HTML BODY, vous pouvez pré-masquer certaines parties de la page. On s’attend à ce que ces parties contiennent des éléments DOM à « personnaliser ».
La requête at.js est une requête XMLHttpRequest
asynchrone. Les étapes exécutées sont donc les suivantes :
Dans le cas ci-dessus, à quelle fréquence le contenu des pages est-il complétement chargé et visible lorsqu’at.js finit par supprimer le masquage de l’élément modifié par l’activité ? Autrement dit, la page est entièrement visible, excepté le contenu de l’activité, qui apparaît légèrement après le reste du contenu.
at.js ne bloque pas le rendu de la page. L’utilisateur peut apercevoir certaines zones vides dans la page, représentant les éléments personnalisés par Target. Si le contenu qui doit être appliqué contient peu d’actifs distants, tels que des scripts et des images, tout devrait être rendu rapidement.
Si une page est mise en cache sur un réseau CDN proche de l’emplacement géographique de l’utilisateur, mais loin du serveur Edge de Target, le délai risque d’être un peu plus long. Les serveurs Edge de Target sont bien répartis autour du globe, ce n’est donc pas un problème la plupart du temps.
Dans le cas suivant :
Le délai d’attente de Target est de cinq secondes. Un utilisateur charge une page qui a une activité afin de personnaliser une image principale. at.js envoie une requête pour déterminer s’il faut appliquer une activité, mais dans un premier temps, ne reçoit pas de réponse. On considère que l’utilisateur consulte le contenu de l’image principale, car Target n’a pas envoyé de réponse pour savoir si oui ou non une activité y est associée. Au bout de quatre secondes, Target envoie une réponse avec le contenu de l’activité.
À ce stade, est-il possible d’afficher la version alternative ? Donc, après les quatre secondes, l’image principale a pu changer et l’utilisateur a pu remarquer ce changement ?
Initialement, l’élément DOM de l’image principale est masqué. Une fois la réponse de Target reçue, at.js apporte les modifications aux éléments DOM, comme le changement d’image, et affiche l’image principale personnalisée.
at.js requiert le doctype HTML 5.
Cette syntaxe est la suivante :
<!DOCTYPE html>
Le doctype HTML 5 garantit le chargement de la page en mode standard. Lors du chargement en mode quirks, certaines API JS dont le fichier at.js dépend sont désactivées. Target désactive at.js en mode quirks.