New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

angular-gtag

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular-gtag

A simple Google Analytics [gtag.js](https://developers.google.com/analytics/devguides/collection/gtagjs/) package for Angular.

Version published
Weekly downloads
2.2K
increased by6.14%
Maintainers
1
Weekly downloads
 
Created
Source

Angular gtag.js

A simple Google Analytics gtag.js 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.

<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

FAQs

Package last updated on 26 Nov 2019

Did you know?

Socket

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

Related posts