Traker un login avec rechagement GA4 GTM

Suivre les utilisateurs connectés et gérer les échecs de formulaire avec une pirouette Cookie avec GTM

difficulter:

• le formulaire peut echouer
• il faut tracker que les utilisateur loger
• Une fois envoyer la page recharge

Solution, crée un cookie et le supprimer une fois l’événement envoyé dans GA4

Étape 1

Crée le cookie qui se place dans le navigateur dès qu’un utilisateur clic sûr se connecte (que ce soit un échec ou une réussite) Delancheur clic ( html personaliser)

<script>
  
  function createCookie(name, value, daysToExpire) {
  var expires = "";
  if (daysToExpire) {
    var date = new Date();
    date.setTime(date.getTime() + (daysToExpire * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + value + expires + "; path=/";
}

// Exemple d'utilisation :
createCookie("cookielogin", "utilsateur a cliquer sur se connecter", 7);
 </script>

Etape2

Nouvel balise HTMl Déclenchement au changement de la page

Tester s’il y a un cookie,

Si TRUE tester s’il y a un élément sur la page qui indique que l’utilisateur est connecté,
Si TRUE envoyer un event dans le dataLayer et suprimer le cookie.

Si NON supprimer le cookie (c ‘est que le formulaire a connu un échec ) .

<script> 
function checkCookieExistence(cookieName) {
  var cookies = document.cookie.split(';');
  for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].trim();
    // Vérifier si le nom du cookie correspond à "cookielogin"
    if (cookie.indexOf(cookieName + '=') === 0) {
      return true; // Le cookie existe
    }
  }
  return false; // Le cookie n'existe pas
}
  
//suprime cookie
  function deleteCookie(name) {
  document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    console.log("Supprime le cookie");
}
  
function testPanierExiste() {
  if (document.querySelector("#div_panier")) {
     console.log("L'élément div avec l'id 'div_panier' existe !");
      window.dataLayer = window.dataLayer || []; 
      dataLayer.push({
        event: "Login"
        });
     console.log("envoie un event Login dans le dataLayer");
    
} else {
  console.log("L'élément div avec l'id 'div_panier' n'existe pas.");
}
 }
  

// Exemple d'utilisation :
if (checkCookieExistence("cookielogin")) {
  console.log("Le cookie 'cookielogin' existe !");
  testPanierExiste();
  
deleteCookie("cookielogin"); // Cela supprimera le cookie nommé 
  
} else {
  console.log("Le cookie 'cookielogin' n'existe pas.");
}
 
  </script>

Etape3

crée Balise eventement « login » déclencheur event personnaliser nomme comme celui décider ci-dessus

Dans cet article, nous allons aborder la problématique de suivre les utilisateurs connectés et de gérer les échecs de formulaire à l’aide de Google Analytics 4 (GA4). Souvent, lorsque les utilisateurs interagissent avec un formulaire de connexion, il est essentiel de savoir s’ils réussissent à se connecter ou s’ils rencontrent des échecs. De plus, nous voulons suivre ces événements dans GA4 pour obtenir des informations sur l’engagement des utilisateurs sur notre site web.

Étape 1 : Créer un cookie pour suivre les clics de connexion

La première étape consiste à créer un cookie qui se place dans le navigateur dès qu’un utilisateur clique sur le bouton de connexion, qu’il réussisse ou échoue. Pour cela, nous utiliserons une fonction JavaScript nommée createCookie. Ce cookie nous permettra de suivre si un utilisateur a tenté de se connecter.

htmlCopy code<script>
function createCookie(name, value, daysToExpire) {
  var expires = "";
  if (daysToExpire) {
    var date = new Date();
    date.setTime(date.getTime() + (daysToExpire * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + value + expires + "; path=/";
}

// Exemple d'utilisation :
createCookie("cookielogin", "utilisateur a cliqué sur se connecter", 7);
</script>

Étape 2 : Suivre les utilisateurs connectés et gérer les échecs

Dans cette étape, nous allons utiliser une nouvelle balise HTML déclenchée au changement de page pour effectuer le suivi. Nous vérifierons d’abord s’il y a un cookie « cookielogin » dans le navigateur. Si le cookie existe, nous testerons s’il y a un élément sur la page qui indique que l’utilisateur est connecté. Si tel est le cas, nous enverrons un événement dans le dataLayer de GA4 et supprimerons ensuite le cookie. Si l’élément n’est pas présent, cela signifie que le formulaire de connexion a échoué, et nous supprimerons également le cookie.

htmlCopy code<script>
function checkCookieExistence(cookieName) {
  var cookies = document.cookie.split(';');
  for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].trim();
    // Vérifier si le nom du cookie correspond à "cookielogin"
    if (cookie.indexOf(cookieName + '=') === 0) {
      return true; // Le cookie existe
    }
  }
  return false; // Le cookie n'existe pas
}

// Supprimer le cookie
function deleteCookie(name) {
  document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
  console.log("Supprime le cookie");
}

function testPanierExiste() {
  if (document.querySelector("#div_panier")) {
    console.log("L'élément div avec l'id 'div_panier' existe !");
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
      event: "Login"
    });
    console.log("Envoie un event Login dans le dataLayer");
  } else {
    console.log("L'élément div avec l'id 'div_panier' n'existe pas.");
  }
}

// Exemple d'utilisation :
if (checkCookieExistence("cookielogin")) {
  console.log("Le cookie 'cookielogin' existe !");
  testPanierExiste();
  deleteCookie("cookielogin"); // Cela supprimera le cookie nommé "cookielogin"
} else {
  console.log("Le cookie 'cookielogin' n'existe pas.");
}
</script>

Étape 3 : Configurer l’événement personnalisé « Login » dans GA4

Enfin, la dernière étape consiste à configurer une balise événement personnalisée dans Google Analytics 4 (GA4) avec le nom « Login ». Cette étape doit être réalisée directement dans votre compte GA4 en utilisant l’interface d’administration de GA4. Une fois que vous avez créé la balise événement « Login », elle sera utilisée pour suivre les événements de connexion dans GA4.

Conclusion :

Félicitations, vous avez maintenant mis en place un suivi efficace des utilisateurs connectés et géré les échecs de formulaire à l’aide de cookies et de Google Analytics 4. Grâce à ces informations, vous pourrez mieux comprendre l’engagement des utilisateurs sur votre site web et optimiser leur expérience de navigation.

N’oubliez pas de personnaliser les noms de cookies et les déclencheurs d’événements en fonction de votre propre contexte et des besoins spécifiques de votre site web. Suivre ces étapes vous permettra d’améliorer vos analyses et de mieux comprendre le comportement de vos utilisateurs connectés. Bonne analyse !