Guide d'implémentation SPA
1. What est un environnement SPA?
Un SPA (Single Page Application) est un site web ou une application web qui charge les éléments de manière dynamique en fonction des actions de l’utilisateur plutôt que de charger de nouvelles pages après chaque interaction. Le web container Commanders Act propose des fonctions vous permettant de charger tout ou partie du container dans un environnement SPA, afin d’appeler les tag souhaités à chaque action effectuée par un utilisateur. Ces fonctions doivent être implémentées dans le code source de votre site soit par votre partenaire technique, soit par votre propre équipe technique.
2.Comment implémenter le web container Commanders Act dans un environnement SPA?
2.1 Chargement des containers
Les web containers Commanders Act sont chargés une seule fois au chargement de la page dans un environnement Single Page Application. Afin de recharger les containers lors des actions utilisateur, vous pouvez utiliser les fonctionnalités suivantes :
tC.container.reload() : cette fonction vous permet de recharger tous les containers d’une page. Les éléments partagés par les containers (calcul de déduplication, initialisation des variables externes, calcul des variables internes, calcul des cookie déposés avec data storage et initialisation du Privacy cookie) ne sont chargés qu’une seule fois afin d’optimiser les performances.
tC.container.reload({ exclusions: ["datastorage","deduplication","internalvars","privacy"], events: {label1: [{targeted_element},{event_variables}], label2: [{},{}]}})Cette fonction permet de recharger tous les containers d’une page tout en excluant certains de leurs éléments. Les éléments à exclure doivent être mentionnés dans le tableau « exclusions ». Ex. : si vous souhaitez recharger le container sans recalculer les variables internes, vous devez appeler cette fonction : tC.container.reload({exclusions:["internalvars"]}) Cette fonction permet également d’appeler la fonction tC.event qui charge les tag sélectionnés lors d’une action utilisateur. La fonction tC.event est exécutée après le rechargement des éléments du container. label : indiquez le nom que vous souhaitez donner à votre fonction (ex. : "click", "add_to_cart"…). targeted_element : éléments DOM sur lesquels l’événement s’applique. {} si ce n’est pas nécessaire. event_variables : variables propres à l’événement. {} si ce n’est pas nécessaire. Ex :
tC.container.reload({events: {label1: [{target: document.getElementById('targeted_element'}, {"page_name":"", "product_id":""}]}})
tC.container_IDS_IDC.reload() : cette fonction permet de charger un seul container (pour cela, vous devrez préciser l’ID du site et l’ID du container) sur une page qui en contient plus d’un.
IDS : ID du site Commanders Act IDC : ID du container Commanders Act
tC.container_IDS_IDC.reload({ exclusions: ["datastorage","deduplication","internalvars","privacy"], events: {label1: [{targeted_element},{event_variables}], label2: [{},{}]} })
Cette fonction permet de charger un seul container (pour cela, vous devrez préciser l’ID du site et l’ID du container) sur une page qui en contient plus d’un tout en excluant certains de leurs éléments. Les éléments à exclure doivent être mentionnés dans le tableau « exclusions », et les fonctions d’événement doivent être mentionnées dans l’objet « events », comme pour la tC.container.reload({exclusions:["datastorage","deduplication","internalvars","privacy"]}) fonction.
2.2 Chargement des tag
Pour charger des tag sélectionnés lors d’une action utilisateur, vous devrez implémenter cette fonction :
tC.event.label(): cette fonction permet de charger des tag sélectionnés lors d’une action utilisateur.
label : indiquez le nom que vous souhaitez donner à votre fonction. Ex. : implémentez la fonction tC.event.step2_basket si vous souhaitez appeler des tag spécifiques à la 2e étape du panier d’achat. Vous pouvez également configurer une fonction « générique » comme tC.event.all sur toutes vos pages virtuelles afin d’appeler des tag sur tous vos sites SPA (des tag Analytics, par exemple). Vous utiliserez ensuite les périmètres et contraintes de l’interface Commanders Act pour contrôler l’exécution des autres tag.
tC.event.label(this, {"page_name":"", "product_id":""}): cette fonction permet de charger des tag sélectionnés en fonction de l’action utilisateur et de définir des variables spécifiques à ladite action (ex. : le nom d’une page virtuelle, un ID de produit spécifique …).
2.3 Aller plus loin : Structure d’un web Ccontainer Commanders Act
Vous trouverez ci-dessous la liste de tous les éléments qui se chargent dans le web container Commanders Act lors du premier chargement, ainsi que les fonctions tC.container.reload,(tC.container_IDS_IDC.reload()) et tC.event.XXX() qui sont appelées.
Fonctions de déduplication
Elles identifient la source de trafic du visiteur
oui
Oui (une fois chargé)
oui
non
Initialisation des variables externes
Elles définissent toutes les variables externes qui n’existent pas déjà
oui
oui
oui
non
Dynamic JS 1
Appelle un fichier JavaScript externe avant la déclaration des variables internes
oui
non
non
non
Static JS 1
Appelle du code JavaScript personnalisé avant la déclaration des variables internes
oui
non
non
non
Variables internes
Calcule les variables internes
oui
oui
oui
non
Dynamic JS 2
Appelle un fichier JavaScript externe après la déclaration des variables externes
oui
non
non
non
Static JS 2
Appelle un fichier JavaScript externe après la déclaration des variables internes
oui
non
non
non
Data storage
Calcule la valeur des cookie créés avec le module "data storage"
oui
oui
oui
non
"Container loaded" & "DOM ready" & "Clicks"& "Form submission " & "Scroll" tag + rules
Exécute les tag appelés sur les déclencheurs "Container loaded", "DOMready", "Clicks","Form submission" et"Scroll", ainsi que sur les règles associées au premier chargement du container.
oui
non
non
non
premier chargement du container.
"Custom" tag + rules
Exécute les tag appelés sur les déclencheurs "Custom", ainsi que sur les règles associées au chargement ou au rechargement du container.
oui
oui
oui
oui
Events + rules
Exécute les events déclenchés sur la fonction tc_events précédente
oui
non
non
non
Privacy
Réinitialise le Privacy cookie pour tenir compte des choix des utilisateurs.
oui
oui
oui
Non
Tag Hierarchy
Identifie les tag en piggyback (tag chargés en parallèle par d’autres tag dans le module "TagPerformanc e")
oui
non
non
non
Event listener
Recharge les event listeners (qui permettent de suivre les actions effectuées par tout utilisateur naviguant sur le site (clics, scrolls …))
oui
non
non
non
Mis à jour
Ce contenu vous a-t-il été utile ?