: Can I use CSS to hide the tracking gif used by Google Analytics Mobile? I am redesigning my mobile website which uses a 1x1px Google Analytics for Mobile Websites tracking gif. The old design
I am redesigning my mobile website which uses a 1x1px Google Analytics for Mobile Websites tracking gif.
The old design displayed the image at the foot of the page, but my new design hides the gif with CSS (display:none).
Will this have any affect on the tracking of the site?
*edit*
Whilst I have moved my tracking gif and solved the immediate issue I am hearing conflicting answers as to whether an image with display:none is, or is not, downloaded.
Can anyone link to any official documentation?
More posts by @Samaraweera270
2 Comments
Sorted by latest first Latest Oldest Best
Yes. It will still be downloaded and function correctly as a tracking gif, even with display:none. You can test this for yourself by adding an onload attribute to the image:
<img src="image.gif" style="display:none" onload="alert('Image loaded!')" />
This will cause a JavaScript popup to display when the image is downloaded, even though you won't see the image on the page. Live demo here.
If you make the image's src attribute blank, no image is downloaded, so the onload event never fires (live demo):
<img src="" style="display:none" onload="alert('Image loaded!')" />
The reason that the image is still downloaded is that display:none simply "prevents the element from appearing in the formatting structure", in the words of the W3C spec for the display property.
Using display:none does not suppress the HTTP request for the image. This fact is depended upon by some JavaScript developers, who create img tags styled withdisplay:none to pre-cache images before they're ready to be displayed.
Also see the responses to "Does a element with display:none set in css still get downloaded by the browser?" over on Stack Overflow.
As mentioned in feela's answer, though, there's little reason to hide a 1px square tracking gif when you can move it somewhere that won't affect your layout.
Normally, images which are set to display: none; aren't loaded at all – so no tracking takes place. But depends on whether the CSS is loaded before the markup (e.g. in the <head>) or after the markup (which will cause a "loading-flicker"). I don't know about visibility: hidden;…
Why are you hiding that tracking-image at all? Just put it somewhere, where nobody will mention it.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.