<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 })
  ]
})

Pageviews

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

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'
});

Event Directive

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.

Keywords

angular

google analytics

gtag.js

FAQs

What is angular-gtag?

Is angular-gtag well maintained?

Package last updated on 26 Nov 2019

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.

Install

angular-gtag

Angular gtag.js

Install

Pageviews

Events

Event Directive

Keywords

Related posts

Engineering with AI Podcast: The Promise of AI-First Development

Spearphishing Campaign Abuses npm Registry to Target U.S. and Allied Manufacturing and Healthcare Organizations