Comment utiliser DTM pour les applications à page unique (SPA) ?

Rechercher

Dernière mise à jour le 2 mai 2021

Une application à page unique (SPA) est une application Web ou un site Web qui charge toutes les ressources requises pour naviguer dans l’ensemble du site lors du premier chargement de la page. Lorsque l’utilisateur clique sur les liens et interagit avec la page, le contenu suivant est chargé dynamiquement. L’application met souvent à jour l’URL dans la barre d’adresse pour émuler la navigation des pages traditionnelles, mais une autre requête complète de page n’est jamais effectuée.

Il existe quelques façons d’utiliser DTM pour les applications de page unique et nous allons parcourir certaines de ces options dans cet article.

Méthode 1 : règles d’appel direct (DCR)

Lancez une règle d’appel direct, comme _satellite.track(“page vue”) sur tout ce qui est considéré comme une visualisation de page, qu’il s’agisse d’un nouveau DOM ou non.

Pour plus d’informations sur les règles d’appel direct, veuillez consulter le lien

Méthode 2 : état push ou modification de hachage

L’événement pushState ou hashchange peut être utilisé avec des applications à page unique (SPA) dans lesquelles une page ne se recharge pas, mais son contenu change. Les cadres de développement courants qui peuvent être utilisés pour créer des SPAs sont des Angular et des React. Ce type d’événement vous permet de créer des règles basées sur des événements sans compter sur les développeurs. Ces règles se déclenchent lorsque les fonctions courantes de SPAs se produisent, telles que :

le chemin d’accès à l’url a changé en fonction de l’utilisation de l’API HTML5 de pushState de l’historique.
Le hachage a changé en raison de la modification des visualisations ou des emplacements sur la page.

Étape 1 : créez un événement basé sur la règle et sélectionnez le type d’événement tel que « Push State or Hashchange »

Étape 2 : sous la condition de règle, sélectionnez le critère « hash » puis spécifiez le paramètre de hachage

Notez que, dans le cas de deux ou plusieurs demandes d’image, on obtient la même page. Par conséquent, il est nécessaire de supprimer les valeurs des variables définies précédemment.

Pour s.tl(), c’est-à-dire les appels de suivi de lien, cela peut être accompli par :

l’écriture d’une simple fonction JavaScript pour effacer les variables Adobe
Définissez les variables linkTrackVars et linkTrackEvents si vous ne l’avez pas déjà fait dans le fichier s_code.js / App Measurement
Définissez les valeurs appropriées pour le contenu modifié, c’est-à-dire la variable pageName.
Une fois les variables définies, appelez la fonction tl()

Exemple de code :

s.linkTrackVars="prop1,eVar1,events"; s.linkTrackEvents="event1"; 
s.prop1="some value"; s.eVar1="another value"; s.events="event1"; 
s.tl(this,'o','My Link Name');

Pour s.t(), c’est-à-dire les appels de visualisation de la page, cela peut être accompli par :

la suppression des valeurs de l’objet s que vous ne souhaitez pas conserver. Si vous utilisez AppMeasurement pour JavaScript, vous pouvez appeler s.clearVars(). Si vous utilisez le code H, rédigez une routine simple pour définir des variables dans une chaîne vide.

Exemple de code :

s.clearVars(); 
s.pageName="New Page" 
s.prop1="some value" 
void(s.t());

Méthode 3 : règle basée sur un événement personnalisé

DTM peut également réagir aux événements personnalisés qui se produisent sur la page. Un événement personnalisé déclenché à partir de DOM peut être suivi à l’aide des règles basées sur un événement avec le type d’événement sur « Evénement personnalisé ».

Prenons un exemple d’utilisation d’un E-commerce SPA où l’idée consiste à déclencher les appels « visualisation de page » lorsque la personne passe d’une page à une autre, sans charger la nouvelle page.

Étape 1 : créez un nouvel événement basé sur une règle et sélectionnez le type d’événement sous « Evénement personnalisé » et spécifiez le nom convivial « Custom_Page_View » pour le type d’événement déclencher. “#content” est spécifié dans le champ « Type d’élément ou sélecteur », car ce champ est l’endroit où l’événement est envoyé. Sélectionnez la case à cocher « Appliquer un gestionnaire d’événement directement sur l’élément », la règle ne s’applique pas sans elle.

Etape 2 : dans la section Analytics de la règle, cochez le bouton radio « s.t() », requis pour suivre une « visualisation de page » dans ce cas d’utilisation.

Etape 3 : insérez le code dans votre site qui crée et distribue l’événement.

Nous pouvons référencer les données envoyées via l’événement en utilisant % event.detail.pageName% dans la section Analytics de la règle.

Remarque : indépendamment de l’une des trois méthodes ci-dessus utilisées, il peut être nécessaire de supprimer la balise de la page d’accueil consultée que l’outil Analytics souhaite définir par défaut. Sinon, dans l’exemple ci-dessus où les développeurs déclenchent une règle d’appel direct ou EBR sur toutes les pages consultées, vous obtenez deux balises sur la première page et 1 sur toutes les pages suivantes. Reportez-vous à l’exemple de code pour supprimer de l’outil Analytics la balise d’affichage de la page d’accueil consultée.