{"id":17037423,"url":"https://github.com/robflaherty/scroll-depth-2","last_synced_at":"2025-03-22T23:13:50.273Z","repository":{"id":137550736,"uuid":"306789546","full_name":"robflaherty/scroll-depth-2","owner":"robflaherty","description":"New version of scroll depth tracking library","archived":false,"fork":false,"pushed_at":"2020-11-19T15:50:15.000Z","size":156,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-28T02:43:11.802Z","etag":null,"topics":["analytics","googleanalytics","scroll"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/robflaherty.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-24T02:27:50.000Z","updated_at":"2020-11-19T15:50:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"c1f0270a-4318-4112-81c9-1af8b30aa2ce","html_url":"https://github.com/robflaherty/scroll-depth-2","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robflaherty%2Fscroll-depth-2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robflaherty%2Fscroll-depth-2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robflaherty%2Fscroll-depth-2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robflaherty%2Fscroll-depth-2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robflaherty","download_url":"https://codeload.github.com/robflaherty/scroll-depth-2/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245031515,"owners_count":20549926,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["analytics","googleanalytics","scroll"],"created_at":"2024-10-14T08:53:52.316Z","updated_at":"2025-03-22T23:13:50.239Z","avatar_url":"https://github.com/robflaherty.png","language":"JavaScript","readme":"# 🚨 Update\nDevelopment has moved to the main [Scroll Depth repository](https://github.com/robflaherty/scroll-depth/tree/next).\n\n# Scroll Depth 2\nAlpha version of a better way to measure scroll depth. This is the next version of the original [Scroll Depth](https://github.com/robflaherty/scroll-depth) library.\n\nIntended for people comfortable working with GA data outside of the web UI.\n\nFeatures and data structure are still in flux so I'd recommend only using in test environments.\n\nFeedback welcome!\n\n## What it does\nThe script generates a unique ID for each pageview and sends the ID as the Event Label. Scroll depth is a pixel value recorded by incrementing the Event Value.\n\nThe pageview ID includes the document height, which can be used to calculate the percent of the page scrolled, and the viewport height, which can be used to calculate the number of screens scrolled.\n\nExample:\n\n`1604195775299.26174.8016.744`\n\n`{timestamp}.{random number}.{document height}.{viewport height}`\n\n![Google Analytics Web UI Screenshot](scroll-depth-ga-data.png)\n\n## Pixel Depth\nThe script keeps track of the max scroll depth, in pixels, and sends an event when `visibilityState` changes to `hidden` as a way of recording the deepest scroll point when the tab is closed or the user switches tabs. If a user returns to the tab and continues scrolling, the event value is updated the next time `visibilityState` changes to `hidden` again.\n\n## Milestones\nMilestones are specified DOM elements that have been scrolled into view, reported as the total number of milestones scrolled into view.\n\n## How to use\n```\n\u003cscript src=\"scrolldepth.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  scrolldepth.init({\n    mode: 'gtag'\n  })\n\u003c/script\u003e\n```\n\n## Options\n### mode\nThe only required option is to define the GA implementation. Options are `gtag`, `gtm`, or `universal`.\n\nIf using GTM, the dataLayer variables are:\n```\n dataLayer.push({\n    'event': 'GAEvent',\n    'event_category': category,\n    'event_action': action,\n    'event_label': label,\n    'event_value': delta,\n    'non_interaction': true\n  });\n```\n\n### milestones\nYou can pass a list of selectors or add the class `.scroll-milestone` to elements that should be treated as milestones. If doing the latter, you need to turn on milestone tracking by setting the `milestones` option to `true`. Optionally you can specify an offset.\n\n```\n\u003cscript\u003e\n  scrolldepth.init({\n    milestones : {\n      selectors: ['.first-milestone', '.another-milestone'],\n      offset: 100\n    }\n  })\n\u003c/script\u003e\n```\n### pixelDepth\nPixel depth tracking is turned on by default. If you only want to tracking milestones you can turn off pixel depth tracking by setting `pixelDepth` to `false`.\n\n### sendEvent\nYou can use this to override the function that sends data to GA with a custom function.\n\n## Notes\n\n- Doesn't support IE11 yet\n- GA4 support coming soon\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobflaherty%2Fscroll-depth-2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobflaherty%2Fscroll-depth-2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobflaherty%2Fscroll-depth-2/lists"}