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 en fonction des 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 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 lors du 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 external variables, calcul des internal variables, calcul des cookie déposés avec le data storage et l'initialisation du cookie Privacy) ne sont chargés qu'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 internal variables, 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 que vous souhaitez donner à 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 devrez spécifier l'ID du site et l'ID du container) sur une page qui en contient plusieurs.

IDS : Commanders Act site ID IDC : Commanders Act container ID

• 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 que vous souhaitez donner à votre fonction. Ex : implémentez la fonction tC.event.step2_basket si vous souhaitez appeler des tags spécifiques à la 2e é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 (les tags Analytics, par exemple). 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 product_id spécifique …).

2.3 Aller plus loin : Structure d'un web Ccontainer Commanders Act

Vous trouverez ci-dessous une 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.

Élément du container	Définition	1er chargement du container	fonction tC.container.rel oad()	fonction tC.container_IDS_IDC.reload()	fonction tC.event.XXX()
Fonctions de déduplication	Elles identifient la source de trafic du visiteur	oui	Oui (une fois chargé)	oui	non
Initialisation des external variables	Elles définissent toutes les external variables qui n'existent pas encore	oui	oui	oui	non
Dynamic JS 1	Appelle un fichier JavaScript externe avant la déclaration des internal variables	oui	non	non	non
Static JS 1	Appelle du code JavaScript personnalisé avant la déclaration des internal variables	oui	non	non	non
Les variables internes	Calcule les internal variables	oui	oui	oui	non
Dynamic JS 2	Appelle un fichier JavaScript externe après la déclaration des external variables	oui	non	non	non
Static JS 2	Appelle un fichier JavaScript externe après la déclaration des internal variables	oui	non	non	non
Stockage de données	Calcule la valeur des cookie 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 précédente fonction tc_events	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 piggybacked (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