# Guide d’implémentation SPA

### 1. W**hat est un environnement SPA**? <a href="#id-1.-what-is-an-spa-environment" id="id-1.-what-is-an-spa-environment"></a>

Un SPA (Single Page Application) est un site web ou une application web qui charge les é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 vous permettant de charger tout ou partie du container dans un environnement SPA, afin 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**? <a href="#id-2.how-to-implement-tagcommander-in-an-spa-environment" id="id-2.how-to-implement-tagcommander-in-an-spa-environment"></a>

#### 2.1 Chargement des containers <a href="#id-2.1-loading-containers" id="id-2.1-loading-containers"></a>

Les web containers Commanders Act sont chargés une fois au chargement de la page dans un Single Page Application Environment. 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 le module data storage et l'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 en excluant certains é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 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 spécifiques à 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 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 cela, vous devrez préciser l'ID du site et 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 la `tC.container.reload({exclusions:["datastorage","deduplication","internalvars","privacy"]})` fonction.

#### 2.2 Chargement des tags <a href="#id-2.2-loading-tags" id="id-2.2-loading-tags"></a>

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 également mettre en place une fonction « générique » comme tC.event.all sur toutes vos pages virtuelles afin d'appeler des tags sur tous vos sites SPA (des tags 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 tags.

* `tC.event.label(this, {"page_name":"", "product_id":""})` : cette fonction permet de charger des tags 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 produit spécifique …).

#### 2.3 Aller plus loin : Structure d'un web Ccontainer Commanders Act <a href="#id-2.3-going-further-structure-of-a-tagcommander-container" id="id-2.3-going-further-structure-of-a-tagcommander-container"></a>

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.

| É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 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                     |
| 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                     |
| Data storage                                                                             | 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 déclencheurs "Container loaded", "DOMready", "Clicks","Form submission" et"Scroll", ainsi que 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 déclencheurs "Custom", ainsi que les règles associées au chargement ou au rechargement du container.                  | oui                         | oui                             | oui                                      | oui                     |
| Events + règles                                                                          | 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 prendre en compte les choix des utilisateurs.                                                                      | oui                         | oui                             | oui                                      | No                      |
| Tag Hierarchy                                                                            | Identifie les tags piggybacked (tags sideloaded par d'autres tags dans le module "TagPerformance")                                                     | 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 (clicks, scrolls …))          | oui                         | non                             | non                                      | non                     |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.commandersact.com/fr/fonctionnalites/sources/sources-catalog/web/containers/setup-guides-for-developers/spa-implementation-guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.