Suivre la recherche semi-automatique dans Google Tag Manager

La recherche semi-automatique est une chose délicate à suivre. La logique sous-jacente est que lorsque l’utilisateur commence à saisir des caractères dans un formulaire de recherche, la recherche suggère des résultats basés sur une entrée limitée. Si l’utilisateur n’est pas satisfait des résultats, il peut continuer à ajouter des caractères à la recherche, augmentant ainsi la précision. Souvent, il y a aussi la possibilité de revenir à une recherche régulière avec ce qu’ils ont déjà écrit. Suivre cette logique dans des outils comme Google Analytics est difficile, car il n’y a vraiment aucun moyen de savoir si la recherche a réussi.

Prenons l’exemple de la capture d’écran ci-dessus. L’utilisateur a écrit ban dans le champ de recherche, et ils ont reçu une liste d’éléments de recherche à poursuivre. S’ils choisissent maintenant un élément de cette liste, la recherche serait-elle considérée comme réussie ?

Oui. Et (peut-être) non. Oui, ce serait une recherche réussie car l’utilisateur a cliqué sur un élément de la liste, validant ainsi la suggestion. Et (peut-être) non, car nous n’avons aucune idée si c’est l’élément que l’utilisateur était chercher en premier lieu. Si le but de notre recherche est de faire correspondre une réponse à une requête, alors tout clic sur les résultats de la recherche est un succès. Si le but de notre recherche est de faire correspondre une réponse à l’intention initiale de la requête, alors seul un certain type de clic sur le résultat de la recherche est un succès.

Cela va trop loin dans l’ontologie de la recherche et de l’intention, donc je vais m’arrêter ici avec la philosophie. Cependant, ce que je veux vous montrer, c’est un moyen assez simple de suivre ce que les utilisateurs recherchent dans le champ de recherche de saisie semi-automatique, à l’aide de Google Tag Manager. C’est à vous de déchiffrer si les recherches aboutissent, cependant.

Comment ça fonctionne

La configuration est essentiellement juste un Balise HTML personnalisée. Dans cette balise, nous allons écrire un écouteur personnalisé pour le keydown événement de navigateur, qui est enregistré lorsque l’utilisateur appuie (vers le bas) sur une touche. Vous devez fournir une durée de recherche minimale pour ce gestionnaire, ainsi que le délai d’attente que le navigateur doit attendre avant d’envoyer un terme de recherche à Google Analytics (ou à la plate-forme avec laquelle vous souhaitez l’utiliser).

Par exemple, si vous définissez minLength = 3 et timeout = 2000, le gestionnaire n’enverra que les recherches d’au moins trois caractères et où 2 secondes se sont écoulées depuis l’écriture du dernier caractère. Cela est nécessaire pour éliminer les frappes accidentelles et les termes de recherche contenant trop peu d’informations pour être utiles.

L’événement de recherche se produit donc lorsque deux secondes se sont écoulées depuis la saisie du dernier caractère OU lorsque l’utilisateur appuie sur la touche Entrée OU lorsque le focus quitte le champ de recherche.

Le code est tout contenu dans un seul Balise HTML personnalisée qui tire sur le Prêt pour DOM déclencheur. Vous aurez alors besoin d’un Déclencheur d’événement personnalisé se déclencher lorsqu’une recherche valide est enregistrée, ainsi qu’un Variable de couche de données pour saisir ce terme de recherche.

1. La balise HTML personnalisée

Voici le code qui exécute le tout :

<script>   (function() {     // Set searchField to the search input field.     // Set timeout to the time you want to wait after the last character in milliseconds.     // Set minLength to the minimum number of characters that constitutes a valid search.     var searchField = document.querySelector('input#search-field'),         timeout = 2000,         minLength = 3;      var textEntered = false;      var timer, searchText;          var handleInput = function() {       searchText = searchField ? searchField.value : '';       if (searchText.length < minLength) {         return;       }       window.dataLayer.push({         event: 'customSearch',         customSearchInput: searchText       });       textEntered = false;     };          var startTimer = function(e) {       textEntered = true;       window.clearTimeout(timer);       if (e.keyCode === 13) {         handleInput();         return;       }       timer = setTimeout(handleInput, timeout);     };          if (searchField !== null) {       searchField.addEventListener('keydown', startTimer, true);       searchField.addEventListener('blur', function() {         if (textEntered) {           window.clearTimeout(timer);           handleInput();         }       }, true);     }   })(); </script>

Tout d’abord, vous devez définir certaines variables d’utilité.

• Ensemble searchField pour capturer l’élément HTML du champ de recherche. C’est l’élément auquel les gestionnaires seront attachés.

• Ensemble timeout à l’heure dans millisecondes vous voulez que le script attende après que le dernier caractère ait été tapé dans le champ. Cela permet d’éviter que l’événement de recherche ne se produise trop souvent, en particulier lorsque les gens tapent lentement.

• Ensemble minLength au nombre minimum de caractères qui constitue une recherche. Si la recherche est inférieure à ce nombre, la recherche ne sera pas enregistrée.

Les handleInput La méthode vérifie si la recherche est assez longue. Si c’est le cas, un objet est poussé vers dataLayer avec les paires clé-valeur suivantes :

• event: 'customSearch'que nous utiliserons pour créer le déclencheur d’événement personnalisé qui déclenche les balises de votre choix lorsqu’une recherche est enregistrée.

• customSearchInput: searchTextqui saisit le texte que l’utilisateur a écrit dans le champ de recherche.

Les startTimer La méthode est exécutée chaque fois que l’utilisateur tape quelque chose dans le champ de recherche. Tout d’abord, il arrête la minuterie en cours (qui compte le temps jusqu’à la timeout limite), parce que nous voulons réinitialiser la minuterie à chaque pression sur une touche.

Ensuite, il vérifie si la touche enfoncée était la touche Entrée (keyCode === 13). Si c’était le cas, nous interprétons cela comme une recherche valide et exécutons la handleInput méthode. Enfin, la minuterie est redémarrée et, une fois que la minuterie a atteint le timeout limite, handleInput est appelé.

Les dernières lignes du script ajoutent le keydown et blur les auditeurs au champ de recherche pour suivre les frappes et si le focus quitte le champ de recherche, respectivement.

2. Les déclencheurs

Pour tirer le Balise HTML personnalisée ci-dessus, utilisez un Prêt pour DOM déclencheur. Il est logique de n’activer le déclencheur que sur les pages où vous avez le formulaire de recherche, donc ajouter une condition de variable DOM au déclencheur n’est pas une mauvaise idée.

De cette façon, votre écouteur de recherche ne se déclenchera que sur les pages avec le champ de recherche (sensé !).

Ensuite, vous aurez besoin d’un Déclencheur d’événement personnalisé pour déclencher vos balises lorsqu’une recherche réussie est enregistrée :

Comme vous pouvez le voir, je vérifie également si le champ de recherche contient du texte. C’est, encore une fois, une précaution raisonnable pour éviter les faux positifs si quelque chose ne va pas avec le script.

3. La variable de couche de données

La variable de couche de données dont vous aurez besoin pour saisir le terme de recherche est simple :

Cette variable de couche de données extrait la valeur de la clé customSearchInputpoussé par le script lors d’une recherche enregistrée avec succès.

Mettre tous ensemble

Alors maintenant, vous avez les composants, et il est temps de tout assembler. Vous trouverez ci-dessous un exemple dans lequel j’utilise une balise Universal Analytics pour envoyer le terme de recherche à Google Analytics à l’aide d’un paramètre de requête personnalisé.

La clé est la page champ, qui est remplacé par :

/search/?q={{DLV – customSearchInput}}

Ainsi, lorsque Universal Analytics se déclenche avec le Événement : recherche personnalisée déclencheur, le page le champ est envoyé avec le chemin personnalisé /recherche/?q=termerecherché. Alors si j’écrivais uunilohi dans le champ de recherche, le chemin de la page envoyé à GA serait /recherche/?q=uunilohi.

Après cela, tout ce que vous avez à faire est d’aller sur Paramètres d’affichage dans Google Analytics, et définissez le paramètre q être le paramètre de recherche de site utilisé par Google Analytics pour créer les rapports de recherche de site.

Résumé

Le suivi de la recherche de saisie semi-automatique est difficile non seulement à cause des restrictions techniques, mais aussi parce qu’il est difficile de déterminer l’intention d’origine avec seulement quelques caractères avec lesquels travailler.

On peut affirmer que TOUTE recherche qui précède un clic sur les résultats de recherche ou même une conversion est réussie, et j’ai tendance à être d’accord avec cela. Cependant, en particulier pour les créateurs de contenu, il est important d’aligner les recherches sur pertinent résultats, pas n’importe quel résultat ancien que l’utilisateur trouve attrayant. Pour cette raison, il est important de suivre les recherches partielles ainsi que les recherches avec des entrées raffinées.

Comment avez-vous résolu le problème de la recherche par saisie semi-automatique ? Faites-vous confiance aux rapports de recherche sur le site lorsque vous ne voyez que des recherches partielles, et trouvez-vous ces informations utiles pour optimiser le site afin qu’il soit plus réactif aux recherches complexes ?