angular-gtag
Advanced tools
A simple Google Analytics [gtag.js](https://developers.google.com/analytics/devguides/collection/gtagjs/) package for Angular.
A simple Google Analytics gtag.js package for Angular.
npm install angular-gtag --save
Add the the tracking code from GA admin dashboard to index.html and set send_page_view to false.
<head>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-YOUR_TRACKING_ID', { 'send_page_view': false });
</script>
</head>
Add the package to to your app.module.ts.
import { GtagModule } from 'angular-gtag';
@NgModule({
imports: [
GtagModule.forRoot({ trackingId: 'UA-YOUR_TRACKING_ID', trackPageviews: true })
]
})
The package will listen to route changes by default, you just need to instantiate service in the root of the project.
export class AppComponent {
constructor(gtag: Gtag) { }
}
Gtag is a serivce that also allows you to track pageviews manually.
gtag.pageview();
// or with custom params
gtag.pageview({
page_title: 'Lesson Feed',
page_path: '/lessons',
page_location: 'https://angularfirebase.com/lessons'
});
Events expect an action.
gtag.event('view_promotion')
You can optionally pass in addtional params.
gtag.event('login', {
method: 'Instagram',
event_category: 'engagemnt',
event_label: 'New user logged in via OAuth'
});
Many analytics events are tracked based on user interaction, such as button clicks. Just tell it which DOM event to track.
<button gtagEvent trackOn="click">Track Me</button>
This will register a general event in GA based on the event name.
You can pass optional params to the directive like so:
<div gtagEvent
trackOn="dragstart"
action="product_dragged"
category="ecommerce"
[params]="{ event_label: 'Something cool just happened' }">
Some Product...
</div>
The directive will produce the following event on dragstart.
FAQs
A simple Google Analytics [gtag.js](https://developers.google.com/analytics/devguides/collection/gtagjs/) package for Angular.
The npm package angular-gtag receives a total of 897 weekly downloads. As such, angular-gtag popularity was classified as not popular.
We found that angular-gtag demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Libxml2’s solo maintainer drops embargoed security fixes, highlighting the burden on unpaid volunteers who keep critical open source software secure.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.