# Scroll Depth Events in the dataLayer

> Pushes scroll_depth events to the Google Tag Manager dataLayer when visitors scroll 25, 50, 75 and 90 percent of a page, to measure how far content is read.

- Type: PHP
- Runs: Frontend only
- Category: [Analytics & Tracking](https://wpide.com/library/category/analytics/)
- Tags: google-tag-manager, datalayer, scroll, engagement
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/analytics-scroll-depth/

## Code

```php
add_action( 'wp_footer', function () {
    ?>
<script>
(function () {
    var marks = [25, 50, 75, 90], sent = {};
    window.dataLayer = window.dataLayer || [];
    function check() {
        var doc = document.documentElement;
        var max = doc.scrollHeight - window.innerHeight;
        if (max <= 0) { return; }
        var percent = Math.round((window.pageYOffset || doc.scrollTop) / max * 100);
        marks.forEach(function (mark) {
            if (percent >= mark && !sent[mark]) {
                sent[mark] = true;
                window.dataLayer.push({ event: 'scroll_depth', scroll_percent: mark, page_path: location.pathname });
            }
        });
    }
    var ticking = false;
    window.addEventListener('scroll', function () {
        if (ticking) { return; }
        ticking = true;
        window.requestAnimationFrame(function () { check(); ticking = false; });
    }, { passive: true });
})();
</script>
    <?php
} );
```

## Notes

In GTM, create a Custom Event trigger for "scroll_depth" and read the percent value from the dataLayer variable "scroll_percent".

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Scroll Depth Events in the dataLayer" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/