{"id":15775774,"url":"https://github.com/styd/impression","last_synced_at":"2025-03-31T14:43:23.778Z","repository":{"id":55589078,"uuid":"316517573","full_name":"styd/impression","owner":"styd","description":"HTML DOM element 'impression' event on your web pages.","archived":false,"fork":false,"pushed_at":"2020-12-27T15:17:49.000Z","size":655,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-11T17:06:53.184Z","etag":null,"topics":["custom-event","event","impression"],"latest_commit_sha":null,"homepage":"https://impression.surge.sh","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/styd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-27T14:05:02.000Z","updated_at":"2021-10-05T04:35:25.000Z","dependencies_parsed_at":"2022-08-15T03:50:26.238Z","dependency_job_id":null,"html_url":"https://github.com/styd/impression","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styd%2Fimpression","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styd%2Fimpression/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styd%2Fimpression/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styd%2Fimpression/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/styd","download_url":"https://codeload.github.com/styd/impression/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246484420,"owners_count":20785079,"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":["custom-event","event","impression"],"created_at":"2024-10-04T17:02:20.821Z","updated_at":"2025-03-31T14:43:23.757Z","avatar_url":"https://github.com/styd.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![build-test](https://github.com/styd/impression/workflows/build-test/badge.svg)\n\n\u003e Impression is a gallery of easy to use scripts to have HTML DOM element 'impression' event on\n\u003e your web pages.\n\n# Usage\n\nPick one that you need, add CSS class 'impression' (overridable default) to elements you want to\ntrack, and then add listeners for the event just as you use `click` event or any other events.\n\n## One Time Impression\n### (92+/impression.min.js -\u003e 0.5KB)\n\nTo fire `impression` event one time when an element becomes visible, use one of the following CDNs.\n\n## One Time Impression + Off\n### (92+/impression+off.min.js -\u003e 0.8KB)\n\nTo fire `impression` event one time when an element becomes visible and `impressioff` event one time\nwhen an element is no longer visible, use one of the following CDNs.\n\n## CDNs\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003ejsDelivr\u003c/strong\u003e\u003c/summary\u003e\n\n```html\n\u003cscript src='https://cdn.jsdelivr.net/npm/@setyadi/impression/dist/92+/impression.min.js'\u003e\u003c/script\u003e\n```\n\n```html\n\u003cscript src='https://cdn.jsdelivr.net/npm/@setyadi/impression/dist/92+/impression+off.min.js'\u003e\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eunpkg\u003c/strong\u003e\u003c/summary\u003e\n\n\n```html\n\u003cscript src='https://unpkg.com/@setyadi/impression/dist/92+/impression.min.js'\u003e\u003c/script\u003e\n```\n\n```html\n\u003cscript src='https://unpkg.com/@setyadi/impression/dist/92+/impression+off.min.js'\u003e\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n\n## Configuration\n\nBy default, the script would just work provided that you agree with the default values. But if you\nwant to use something different, you can override the defaults by adding the following attributes on\nthe script tag.\n\n| Attributes         | Description                                                                                            | Default Value |\n|--------------------|--------------------------------------------------------------------------------------------------------|---------------|\n|`elements-selector` | CSS selector that would match the elements.                                                            | '.impression' |\n|`visible-fraction`  | Visible fraction of elements that would trigger impression event.                                      | 0.5           |\n|`visible-fractioff` | Visible fraction of elements that would trigger impressioff event after impression event is triggered. | 0.0           |\n\n## Example of Overriding Defaults\n\n```html\n\u003cscript\n  src='https://cdn.jsdelivr.net/npm/@setyadi/impression/dist/92+/impression+off.min.js'\n  elements-selector='[data-track=\"MyImpression\"]'\n  visible-fraction=0.8\n  visible-fractioff=0.1\u003e\n\u003c/script\u003e\n```\n\n\n# Demo\n\nTo run the demo, clone this repo, `cd` to it, `yarn install` and then pick the demo page you want to\nsee.\n\n### Vanilla JS\n\n```\nyarn demo\n```\n\n### Svelte\n\n```\nyarn demo:svelte\n```\n\nThey basically demo the same thing, but you can look at the source code to see how they use\n`impression`.\n\n\n# Disclaimer\n\nBased on [CanIUse](https://www.caniuse.com), the above scripts should work for 92.x% or more of users\nworldwide. For the other times when it's not working, it doesn't break the page.\n\n\n# Roadmap\n\n- Reocurring impressions (just like one time impression but every time).\n- Impression events for elements created dynamically.\n- Support old browsers.\n\n\n# [License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyd%2Fimpression","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstyd%2Fimpression","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyd%2Fimpression/lists"}