All Projects → codediodeio → Angular Gtag

codediodeio / Angular Gtag

🔖 Google Analytics gtag.js for Angular

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Angular Gtag

Analytics
Simple, open-source, lightweight (< 1 KB) and privacy-friendly web analytics alternative to Google Analytics.
Stars: ✭ 9,469 (+9867.37%)
Mutual labels:  google-analytics
Plugin Ga
Google Analytics tracking for your book
Stars: ✭ 44 (-53.68%)
Mutual labels:  google-analytics
Meteor Iron Router Ga
Google analytics for Iron Router
Stars: ✭ 76 (-20%)
Mutual labels:  google-analytics
Angulartics2
Vendor-agnostic analytics for Angular2 applications.
Stars: ✭ 963 (+913.68%)
Mutual labels:  google-analytics
App
Just a little analytics insight for your personal or indie project
Stars: ✭ 40 (-57.89%)
Mutual labels:  google-analytics
Kindmetrics
Kind metrics analytics for your website
Stars: ✭ 57 (-40%)
Mutual labels:  google-analytics
Devdash
🍱 Highly Configurable Terminal Dashboard for Developers and Creators
Stars: ✭ 939 (+888.42%)
Mutual labels:  google-analytics
Google Analytics Plugin
Cordova Google Analytics Plugin for Android & iOS
Stars: ✭ 90 (-5.26%)
Mutual labels:  google-analytics
Google Analytics Api Symfony
Google Analytics API Symfony Bundle
Stars: ✭ 43 (-54.74%)
Mutual labels:  google-analytics
As3 Universal Analytics
Google Universal Analytics for AS3
Stars: ✭ 73 (-23.16%)
Mutual labels:  google-analytics
React Spy
A set of utilities for collecting UX-analytics of your React-application (ex: clicks, shows, errors and etc.)
Stars: ✭ 37 (-61.05%)
Mutual labels:  google-analytics
Gumshoe
A we analytics and event tracking sleuth JavaScript library
Stars: ✭ 39 (-58.95%)
Mutual labels:  google-analytics
Googleanalyticsforxamarinforms
Google Analytics Plugin for Xamarin Forms
Stars: ✭ 65 (-31.58%)
Mutual labels:  google-analytics
Aurelia Google Analytics
An Aurelia.io plugin that adds Google Analytics page tracking to your project.
Stars: ✭ 28 (-70.53%)
Mutual labels:  google-analytics
Ganalytics
Interact with Google Analytics using R
Stars: ✭ 77 (-18.95%)
Mutual labels:  google-analytics
Fathom
Fathom Lite. Simple, privacy-focused website analytics. Built with Golang & Preact.
Stars: ✭ 6,989 (+7256.84%)
Mutual labels:  google-analytics
Google Measurement Php Client
PHP Client to send analytics data over the Google Measurement Protocol to Google Analytics
Stars: ✭ 52 (-45.26%)
Mutual labels:  google-analytics
Middleman Google Analytics
📈 A @middleman plugin to handle generating your Google Analytics tracking code.
Stars: ✭ 91 (-4.21%)
Mutual labels:  google-analytics
Newspaper
An aggregated newspaper app containing news from 10+ local news publishers in Hong Kong. Made with ❤
Stars: ✭ 82 (-13.68%)
Mutual labels:  google-analytics
React Router Ga
Google Analytics component for React Router
Stars: ✭ 66 (-30.53%)
Mutual labels:  google-analytics

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 async src="https://www.googletagmanager.com/gtag/js?id=UA-YOUR_TRACKING_ID"></script>
<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 })
  ]
})

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.

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].