https://github.com/notiz-dev/ngx-plausible
Plausible Event directive for Angular
https://github.com/notiz-dev/ngx-plausible
angular plausible-analytics
Last synced: 12 months ago
JSON representation
Plausible Event directive for Angular
- Host: GitHub
- URL: https://github.com/notiz-dev/ngx-plausible
- Owner: notiz-dev
- License: mit
- Created: 2021-08-16T12:33:40.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-11-17T14:31:02.000Z (over 2 years ago)
- Last Synced: 2025-04-13T14:06:15.714Z (12 months ago)
- Topics: angular, plausible-analytics
- Language: TypeScript
- Size: 1.81 MB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @notiz/ngx-plausible
[](https://www.npmjs.com/package/@notiz/ngx-plausible)
Integrate [Plausible](https://plausible.io/) [custom event](https://plausible.io/docs/custom-event-goals) easily into your Angular application.
## Installation
```bash
npm i @notiz/ngx-plausible
```
Add 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`.
```html
NgxPlausible
window.plausible =
window.plausible ||
function () {
(window.plausible.q = window.plausible.q || []).push(arguments);
};
```
Import `PlausibleEventDirective` into your component module and use `plausibleEvent` directive to trigger events.
```html
Download pricing
```
## Plausible Service
Use directly `PlausibleService` to trigger an event.
```ts
import { Component, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { PlausibleService } from '@notiz/ngx-plausible';
@Component({
selector: 'app-root',
standalone: true,
template: `
`,
styles: [],
})
export class AppComponent {
private http = inject(HttpClient);
private plausible = inject(PlausibleService);
sendContactForm() {
this.http
.post('https://api.example.dev/contact', {
name: '...',
email: '...',
message: '...',
})
.subscribe({
complete: () => {
this.plausible.event('Contact', { props: { action: 'submitted' } });
},
});
}
}
```
Or observe your data streams such as http calls.
```ts
import { Component, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { PlausibleService } from '@notiz/ngx-plausible';
@Component({
selector: 'app-root',
standalone: true,
template: `
`,
styles: [],
})
export class AppComponent {
private http = inject(HttpClient);
private plausible = inject(PlausibleService);
sendContactForm() {
this.http
.post('https://api.example.dev/contact', {
name: '...',
email: '...',
message: '...',
})
.pipe(
this.plausible.observe({
loading: {
event: 'Contact',
options: { props: { action: 'loading' } },
},
success: (response) => {
return {
event: 'Contact',
options: {
props: { action: 'submitted' },
},
};
},
error: (error) => {
return {
event: 'Contact',
options: { props: { action: 'error' } },
};
},
})
)
.subscribe();
}
}
```
## injectPlausibleEvent
`injectPlausibleEvent` is a helper function that allows to inject plausible service and trigger events.
```ts
@Component({
standalone: true,
template: 'New Event',
})
class TestComponent {
plausibleEvent = injectPlausibleEvent();
triggerEvent() {
// TODO does something
this.plausibleEvent('Event');
}
}
```