https://github.com/codediodeio/angular-gtag
:bookmark: Google Analytics gtag.js for Angular
https://github.com/codediodeio/angular-gtag
angular google-analytics gtag
Last synced: 3 months ago
JSON representation
:bookmark: Google Analytics gtag.js for Angular
- Host: GitHub
- URL: https://github.com/codediodeio/angular-gtag
- Owner: codediodeio
- Created: 2018-05-02T16:01:54.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-29T13:28:47.000Z (over 2 years ago)
- Last Synced: 2024-10-19T07:02:10.931Z (8 months ago)
- Topics: angular, google-analytics, gtag
- Language: TypeScript
- Homepage:
- Size: 305 KB
- Stars: 108
- Watchers: 5
- Forks: 20
- Open Issues: 41
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular gtag.js
A simple Google Analytics [gtag.js](https://developers.google.com/analytics/devguides/collection/gtagjs/) package for Angular.
## Install
```
npm install angular-gtag --save
```
Add the the tracking code from GA admin dashboard to `index.html` and set _send_page_view_ to false.
```html
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-YOUR_TRACKING_ID', { 'send_page_view': false });
```
Add the package to to your `app.module.ts`.
```ts
import { GtagModule } from 'angular-gtag';
@NgModule({
imports: [
GtagModule.forRoot({ trackingId: 'UA-YOUR_TRACKING_ID', trackPageviews: true })
]
})
```
**Options**
- `trackingId: string (required)` Google Analytics UA tracking ID.
- `trackPageviews: boolean` Default true.
- `debug: boolean` Default false, console logs every gtag event/pageview.
## Pageviews
The package will listen to route changes by default, you just need to instantiate service in the root of the project.
```ts
export class AppComponent {
constructor(gtag: Gtag) {}
}
```
Gtag is a serivce that also allows you to track pageviews manually.
```ts
gtag.pageview();
// or with custom params
gtag.pageview({
page_title: 'Lesson Feed',
page_path: '/lessons',
page_location: 'https://angularfirebase.com/lessons'
});
```
## Events
[Events](https://developers.google.com/analytics/devguides/collection/gtagjs/events) expect an action.
```ts
gtag.event('view_promotion');
```
You can optionally pass in addtional params.
```ts
gtag.event('login', {
method: 'Instagram',
event_category: 'engagemnt',
event_label: 'New user logged in via OAuth'
});
```
## Event Directive
Many analytics events are tracked based on user interaction, such as button clicks. Just tell it which DOM event to track.
```html
Track Me
```
This will register a general event in GA based on the event name.
You can pass optional params to the directive like so:
```html
Some Product...
```
The directive will produce the following event on dragstart.
