2

I'm currently working with AMP-html in my project, which gives me no use of my own javascript on the front-end. There are built-in components, but nothing to fire a request when a certain element scrolls into the viewport.

I was wondering if there was an html/css hack in order to fire a beacon for analytics purposes. (maybe something similar to lazy-loading an image, when the url is the request url)

Thanks!

Daniel Jamrozik
  • 1,168
  • 1
  • 10
  • 21
  • There may be a way to do this using AMP analytics. If you post the structure of your HTML and the specific section you wish to track, I may be able to illo a potential solution. But this is exclusively a post-process, Google analytics solution. I'm not aware of any other potential techniques. – Jay Gray Jun 21 '16 at 12:56

1 Answers1

3

Short of it:

As far as I know, there is no way to do scroll-linked effects, delayed image loading, or "beacons" reliably without JavaScript.

Long explanation:

Browsers will request images up front for layout and DOM purposes, even if they're outside the current view. The HTML5 spec says that when scripting is disabled browsers may obtain images synchronously or asynchronously, but if scripting is enabled it must get them immediately. The spec indicates scripting is only considered disabled if the user turned it off, the browser doesn't support it, or the current document is in a sandbox.*

* Basically iframes with a sandbox attribute that doesn't contain allow-scripts as part of the value.

An old comment on another StackOverflow question indicates there are other ways to try to prevent image loading, such as using background-image, but they're not the same across browsers and can't be triggered by scrolling alone.

Community
  • 1
  • 1
Art McBain
  • 400
  • 2
  • 8