Dois-je mettre le JS Google Analytics dans <head> ou à la fin de <body>?

123

Google me donne un morceau de javascript et me dit de l'inclure dans le fichier <head>.

Puis-je le mettre à la fin <body>ou y aura-t-il des effets secondaires si je fais cela?

google-analytics Peter Hall
la source
3
Ne disent-ils pas de le mettre avant la balise de fermeture </body>? Ou cela a-t-il changé?
Marko

Réponses:

155

Le placer à la fin de la <head>section permet de garantir le suivi de vos métriques même lorsqu'un utilisateur ne laisse pas la page terminer le chargement.

Ils vous disaient de le mettre en bas de page, avant d'ajouter le support pour la gestion du chargement partiel des pages.

Directement de Google:

L'un des principaux avantages de l'extrait de code asynchrone est que vous pouvez le positionner en haut du document HTML. Cela augmente la probabilité que la balise de suivi soit envoyée avant que l'utilisateur ne quitte la page. Il est habituel de placer le code JavaScript dans la <head>section et nous vous recommandons de placer l'extrait au bas de la section pour de meilleures performances.

Consultez l' aide de Google Analytics : ajoutez le code de suivi directement sur votre site

Chris Arguin
la source
8
Alors ça va si je le mets en bas? Je préfère que mes pages se chargent rapidement en mettant tout en bas (et css en haut pour un rendu correct) -edit- c'est grossier de mettre js là-haut.
2
Oui, c'est bien de le faire; J'ai en fait un mix, mais j'ai surtout migré vers le haut pour les raisons mentionnées.
Chris Arguin le
6
Pourquoi est-ce un avantage? Il me semble que je ne veux pas compter les chargements partiels de pages parce que ces utilisateurs disent essentiellement qu'ils ont fait une erreur en venant là-bas. Même quand ils veulent être là, je ne veux pas les faire attendre une milliseconde supplémentaire pour voir mon contenu.
Melinda Green
3
Un chargement partiel de page peut également signifier quelque chose pour le propriétaire du site qu'il doit corriger. Imaginez que quelqu'un entre dans votre magasin, pour se rendre compte que l'extérieur les a induits en erreur. Vous voudriez corriger votre publicité pour résoudre ce problème.
Optimus le
2
Une petite mise à jour à ceci: plutôt qu'à la fin de <head>, la page liée indique maintenant "Ajoutez la balise juste après la balise d'ouverture <head> sur chaque page."
Brandon
6

Vous pouvez le mettre où vous le souhaitez. Je mets toujours le code de suivi en fin de page et je n'ai jamais eu de problème.

casablanca
la source
2
Pourquoi voudriez-vous détecter un utilisateur qui charge partiellement votre page et quitte en quelques millisecondes?
João Pimentel Ferreira
@ JoãoPimentelFerreira parce que ce sont également des informations précieuses, vous voudrez peut-être mesurer le pourcentage de vues comme ça
jangorecki
3

Vous pouvez le mettre où vous le souhaitez sur la page, et le parcourir n'importe où sur la page, que ce soit dans la tête ou dans le corps. Mais selon le support Google ( ajoutez le code de suivi directement sur votre site ) il est recommandé de le lui dans la balise head, collez-le juste avant la </head>balise de fermeture .

Paragraphe suivant d'un bon article expliquant pourquoi mettre du code dans la balise head

La page vue est enregistrée uniquement après le chargement de ce code. Ainsi, plus tôt vous chargez le code, plus tôt la page vue est enregistrée. Disons que vous avez une grande page de blog, et c'est une page à chargement lent, prenant même 10 à 20 secondes pour tout charger. Si votre code Google ne commence pas avant la fin de la page, il peut être bloqué, tout comme l'ancien code non asynchrone utilisé pour contenir D'AUTRES lignes de code. Sauf que maintenant, il retient le code de suivi. Si un visiteur de votre site accède à la page, puis la quitte avant que le code de suivi ne déclenche la page vue, vous perdez ce visiteur. Ils deviennent maintenant une nouvelle visite directe sur n'importe quelle page du site sur laquelle ils ont atterri. Cela peut rendre toutes sortes de données sur votre site incorrectes.

Subodh Ghulaxe
la source
0

Dans la tête, juste avant la balise de fermeture </ head>, vous n'aurez aucun problème à vérifier votre site Web dans les outils pour les webmasters.

Sezhers
la source
0

L'ajout du code suivant (appelé «extrait de code de suivi JavaScript») aux modèles de votre site est le moyen le plus simple de commencer à utiliser analytics.js.

Le code doit être ajouté en haut de la balise et avant tout autre script ou balise CSS, et la chaîne «UA-XXXXX-Y» doit être remplacée par l'ID de propriété (également appelé «ID de suivi») de Google Analytics propriété que vous souhaitez suivre.

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
Développer l'extrait

Le code ci-dessus fait quatre choses principales:

  1. Crée un élément qui démarre de manière asynchrone le téléchargement de la bibliothèque JavaScript analytics.js à partir de https://www.google-analytics.com/analytics.js

  2. Initialise une fonction ga globale (appelée file d'attente de commandes ga ()) qui vous permet de planifier l'exécution des commandes une fois que la bibliothèque analytics.js est chargée et prête à fonctionner.

  3. Ajoute une commande à la file d'attente de commandes ga () pour créer un nouvel objet de suivi pour la propriété spécifiée via le paramètre 'UA-XXXXX-Y'.

  4. Ajoute une autre commande à la file d'attente de commandes ga () pour envoyer une page vue à Google Analytics pour la page actuelle.

Mile Mijatović
la source
Regardons de plus près, car l'appeler une "file d'attente de commandes" lui donne beaucoup trop de crédit. Le code uglifié compacté accepte quelques arguments qu'il utilise pour décompresser quelques éléments et acquérir un handle vers une Array.pushfonction liée . La ga«fonction» est entièrement liée à cela push. Ainsi, les invocations immédiates peuvent être optimisées: au lieu de construire un tableau vide s'il n'est pas trouvé ( []), remplissez-le avec les tableaux "arguments" pour chaque gaappel: [['create', 'UA-XXX', 'auto'], ['send', 'pageview']]…
amcgregor
-3

Le code que vous devez toujours être ajouté en haut de la balise et avant tout autre script ou balise CSS, et la chaîne 'UA-XXXXX-Y'doit être remplacée par la propriété ID(également appelée "ID de suivi") de la propriété Google Analytics que vous souhaitez suivre.

Payal Daryani
la source
2
Cela ne répond pas à la question. La question est de savoir quels sont les effets secondaires de ne pas faire ce que vous dites.
Peter Hall