{"id":18789713,"url":"https://github.com/notiz-dev/ngx-plausible","last_synced_at":"2025-04-13T14:06:34.106Z","repository":{"id":57139916,"uuid":"396786933","full_name":"notiz-dev/ngx-plausible","owner":"notiz-dev","description":"Plausible Event directive for Angular","archived":false,"fork":false,"pushed_at":"2023-11-17T14:31:02.000Z","size":1897,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-13T14:06:15.714Z","etag":null,"topics":["angular","plausible-analytics"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/notiz-dev.png","metadata":{"funding":{"github":"notiz-dev","patreon":"notiz_dev"},"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,"governance":null}},"created_at":"2021-08-16T12:33:40.000Z","updated_at":"2024-07-27T03:58:57.000Z","dependencies_parsed_at":"2023-11-17T16:06:33.340Z","dependency_job_id":null,"html_url":"https://github.com/notiz-dev/ngx-plausible","commit_stats":{"total_commits":53,"total_committers":1,"mean_commits":53.0,"dds":0.0,"last_synced_commit":"0e830d63bfed394ac49f51b026fb792348a8edc1"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notiz-dev%2Fngx-plausible","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notiz-dev%2Fngx-plausible/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notiz-dev%2Fngx-plausible/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notiz-dev%2Fngx-plausible/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/notiz-dev","download_url":"https://codeload.github.com/notiz-dev/ngx-plausible/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248724639,"owners_count":21151561,"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":["angular","plausible-analytics"],"created_at":"2024-11-07T21:08:23.506Z","updated_at":"2025-04-13T14:06:34.085Z","avatar_url":"https://github.com/notiz-dev.png","language":"TypeScript","readme":"# @notiz/ngx-plausible\n\n[![npm version](https://badge.fury.io/js/@notiz%2Fngx-plausible.svg)](https://www.npmjs.com/package/@notiz/ngx-plausible)\n\nIntegrate [Plausible](https://plausible.io/) [custom event](https://plausible.io/docs/custom-event-goals) easily into your Angular application.\n\n## Installation\n\n```bash\nnpm i @notiz/ngx-plausible\n```\n\nAdd plausible [script](https://plausible.io/docs/plausible-script) for your domain and register a global function called `plausible` for [custom events](https://plausible.io/docs/custom-event-goals) in your `index.html`.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003ctitle\u003eNgxPlausible\u003c/title\u003e\n    \u003cbase href=\"/\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e\n    \u003clink rel=\"icon\" type=\"image/x-icon\" href=\"favicon.ico\" /\u003e\n\n    \u003c!-- plausible --\u003e\n    \u003c!-- replace yourdomain.com  --\u003e\n    \u003c!-- use different script extensions https://plausible.io/docs/script-extensions --\u003e\n    \u003cscript\n      defer\n      data-domain=\"yourdomain.com\"\n      src=\"https://plausible.io/js/plausible.js\"\n    \u003e\u003c/script\u003e\n    \u003c!-- required for custom events with `plausible` function --\u003e\n    \u003cscript\u003e\n      window.plausible =\n        window.plausible ||\n        function () {\n          (window.plausible.q = window.plausible.q || []).push(arguments);\n        };\n    \u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003capp-root\u003e\u003c/app-root\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nImport `PlausibleEventDirective` into your component module and use `plausibleEvent` directive to trigger events.\n\n```html\n\u003ca\n  href=\"...\"\n  [plausibleEvent]=\"'Download'\"\n  [plausibleProps]=\"{filename: 'pricing.pdf'}\"\n\u003e\n  Download pricing\n\u003c/a\u003e\n```\n\n## Plausible Service\n\nUse directly `PlausibleService` to trigger an event.\n\n```ts\nimport { Component, inject } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { PlausibleService } from '@notiz/ngx-plausible';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  template: `\n    \u003cform\u003e\n      \u003c!-- contact form --\u003e\n    \u003c/form\u003e\n  `,\n  styles: [],\n})\nexport class AppComponent {\n  private http = inject(HttpClient);\n  private plausible = inject(PlausibleService);\n\n  sendContactForm() {\n    this.http\n      .post('https://api.example.dev/contact', {\n        name: '...',\n        email: '...',\n        message: '...',\n      })\n      .subscribe({\n        complete: () =\u003e {\n          this.plausible.event('Contact', { props: { action: 'submitted' } });\n        },\n      });\n  }\n}\n```\n\nOr observe your data streams such as http calls.\n\n```ts\nimport { Component, inject } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { PlausibleService } from '@notiz/ngx-plausible';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  template: `\n    \u003cform\u003e\n      \u003c!-- contact form --\u003e\n    \u003c/form\u003e\n  `,\n  styles: [],\n})\nexport class AppComponent {\n  private http = inject(HttpClient);\n  private plausible = inject(PlausibleService);\n\n  sendContactForm() {\n    this.http\n      .post('https://api.example.dev/contact', {\n        name: '...',\n        email: '...',\n        message: '...',\n      })\n      .pipe(\n        this.plausible.observe({\n          loading: {\n            event: 'Contact',\n            options: { props: { action: 'loading' } },\n          },\n          success: (response) =\u003e {\n            return {\n              event: 'Contact',\n              options: {\n                props: { action: 'submitted' },\n              },\n            };\n          },\n          error: (error) =\u003e {\n            return {\n              event: 'Contact',\n              options: { props: { action: 'error' } },\n            };\n          },\n        })\n      )\n      .subscribe();\n  }\n}\n```\n\n## injectPlausibleEvent\n\n`injectPlausibleEvent` is a helper function that allows to inject plausible service and trigger events.\n\n```ts\n@Component({\n  standalone: true,\n  template: '\u003cbutton (click)=\"triggerEvent()\"\u003eNew Event\u003c/button\u003e',\n})\nclass TestComponent {\n  plausibleEvent = injectPlausibleEvent();\n\n  triggerEvent() {\n    // TODO does something\n\n    this.plausibleEvent('Event');\n  }\n}\n```\n","funding_links":["https://github.com/sponsors/notiz-dev","https://patreon.com/notiz_dev"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotiz-dev%2Fngx-plausible","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnotiz-dev%2Fngx-plausible","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotiz-dev%2Fngx-plausible/lists"}