Puis-je utiliser CSS pour masquer le gif de suivi utilisé par Google Analytics Mobile?
Je suis en train de remodeler mon site Web mobile qui utilise un 1x1px Google Analytics pour les sites Web mobiles tracking gif.
L'ancien design affichait l'image au bas de la page, mais mon nouveau design cache le gif avec CSS (display:none).
Cela affectera-t-il le suivi du site?
* modifier *
Alors que j'ai déplacé mon gif de suivi et résolu le problème immédiat que j'entends réponses contradictoires quant à savoir si une image avec display:none est téléchargée ou non.
Quelqu'un peut-il créer un lien vers une documentation officielle?
Oui. Il sera toujours téléchargé et fonctionnera correctement en tant que gif de suivi, même avec display:none. Vous pouvez le tester vous-même en ajoutant un attribut onload à l'image:
<img src="image.gif" style="display:none" onload="alert('Image loaded!')" />
Cela provoquera l'affichage d'une popup JavaScript lors du téléchargement de l'image, même si vous ne la voyez pas sur la page. Démo en direct ici.
Si vous rendez l'attribut src de l'image vide, aucune image n'est téléchargée. Par conséquent, l'événement onload ne se déclenche jamais ( démonstration en direct ):
<img src="" style="display:none" onload="alert('Image loaded!')" />
La raison pour laquelle l'image est toujours téléchargée est que display:none empêche simplement "l'élément d'apparaître dans la structure de mise en forme", comme le dit spécification W3C pour la propriété display .
L'utilisation de display:none ne supprime pas la requête HTTP pour l'image. Certains développeurs JavaScript dépendent de ce fait pour créer des balises img portant le styledisplay:none afin de mettre en cache les images avant qu'elles ne soient prêtes à être affichées.
Voir également les réponses à "Un élément avec display: aucun élément défini dans css n'est-il toujours téléchargé par le navigateur?" over on Stack Overflow.
Comme mentionné dans réponse de feela , cependant, il n’ya aucune raison de cacher un gif de suivi carré de 1 px lorsque vous pouvez le déplacer dans un endroit qui n’affectera pas votre mise en page.
Normalement, les images réglées sur display: none; ne sont pas chargées du tout - aucun suivi n'est donc effectué. Mais cela dépend si le CSS est chargé avant le balisage (par exemple dans le <head>) ou après le balisage (ce qui provoquera un "scintillement du chargement"). Je ne sais pas pour visibility: hidden;…
Pourquoi cachez-vous cette image de suivi? Il suffit de le mettre quelque part, où personne ne le mentionnera.