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 des éléments dynamiquement selon les actions de l’utilisateur plutôt que de charger de nouvelles pages après chaque interaction. Le web container Commanders Act offre des fonctions permettant de charger tout ou partie du container dans un environnement SPA, vous permettant d’appeler les tags souhaités à chaque action effectuée par un utilisateur. Ces fonctions doivent être implémentées dans le code source de votre site par votre partenaire technique ou par vos propres équipes techniques.
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 fois lors du chargement de la page dans un environnement Single Page Application. Pour 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 sur une page. Les éléments partagés par les containers (calcul de deduplication, initialisation des variables externes, calcul des variables internes, calcul des cookies déposés avec data storage et initialisation du cookie Privacy) sont chargés une seule fois pour 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 tags 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 : spécifiez le nom sous lequel vous souhaitez appeler votre fonction (ex : "click", "add_to_cart"…). targeted_element : éléments DOM sur lesquels l’événement s’applique. {} si non nécessaire. event_variables : variables spécifiques à l’événement. {} si non 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 ce faire, vous devez spécifier l’ID du site et l’ID du container) sur une page qui en contient plusieurs.
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 ce faire, vous devrez spécifier l’ID du site et l’ID du container) sur une page qui en contient plusieurs 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énements doivent être mentionnées dans l’objet “events”, comme pour le tC.container.reload({exclusions:["datastorage","deduplication","internalvars","privacy"]}) fonction.
2.2 Chargement des tags
Pour charger des tags sélectionnés lors d’une action utilisateur, vous devrez implémenter cette fonction :
tC.event.label(): cette fonction permet de charger des tags sélectionnés lors d’une action utilisateur.
label : spécifiez le nom sous lequel vous souhaitez appeler votre fonction. Ex : implémentez la fonction tC.event.step2_basket si vous souhaitez appeler des tags spécifiques à la 2ᵉ étape du panier d’achat. Vous pouvez aussi configurer une fonction “générique” comme tC.event.all sur toutes vos pages virtuelles pour appeler des tags sur tous vos sites SPA (par exemple les tags Analytics). Vous utiliserez ensuite les périmètres et contraintes depuis l’interface Commanders Act pour contrôler l’exécution des autres tags.
tC.event.label(this, {"page_name":"", "product_id":""}): cette fonction permet de charger des tags sélectionnés en fonction d’une action utilisateur et de définir des variables spécifiques à ladite action (ex : le nom d’une page virtuelle, un ID produit spécifique …).
2.3 Pour aller plus loin : Structure d’un web Ccontainer Commanders Act
Vous trouverez ci-dessous la liste de tous les éléments qui se chargent à l’intérieur du 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 deduplication
Elles identifient la source de trafic du visiteur
oui
Oui (chargé une fois)
oui
non
Initialisation des variables externes
Elles définissent toutes les variables externes qui n’existent pas encore
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
Les 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
Stockage de données
Calcule la valeur des cookies créés avec le module "data storage"
oui
oui
oui
non
Tags "Container loaded" & "DOM ready" & "Clicks" & "Form submission" & "Scroll" + règles
Exécute les tags appelés sur les triggers "Container loaded", "DOMready", "Clicks", "Form submission" et "Scroll", ainsi que sur les règles associées au
oui
non
non
non
premier chargement du container.
Tags "Custom" + règles
Exécute les tags appelés sur les triggers "Custom", ainsi que sur les règles associées au chargement ou rechargement du container.
oui
oui
oui
oui
Événements + règles
Exécute les événements déclenchés sur la fonction tc_events précédente
oui
non
non
non
Privacy
Réinitialise le cookie Privacy pour prendre en compte les choix des utilisateurs.
oui
oui
oui
Non
Tag Hierarchy
Identifie les tags piggybackés (tags sideloaded par d’autres tags dans le module "TagPerformance")
oui
non
non
non
Écouteur d’événements
Recharge les écouteurs d’événements (qui permettent de suivre les actions effectuées par tout utilisateur parcourant le site (clicks, scrolls …))
oui
non
non
non
Mis à jour
Ce contenu vous a-t-il été utile ?