codediodeio / angular-gtag Goto Github PK

View Code? Open in Web Editor NEW

109.0 6.0 20.0 312 KB

:bookmark: Google Analytics gtag.js for Angular

TypeScript 90.42% CSS 1.54% HTML 8.04%

gtag google-analytics angular

angular-gtag's Introduction

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.

angular-gtag's People

Contributors

Stargazers

Watchers

angular-gtag's Issues

Event adding extra unnecessary property EventModel to event object

Not able to track google events, the unnecessary property(EventModel) added on top of the model automatically see the snap which is captured from the Google Analytics dashboard.

set dimensions after tool loads

I'd like to be able to send in/set 'dimension' and 'userId' after the initial tool loads. I have an app that receives API data after load and that data contains values for dimensions and userId.

Thanks!

Cannot find name 'Gtag'

Encounter this >> ERROR in src/app/app.component.ts(11,29): error TS2304: Cannot find name 'Gtag'.

Here's my code in app.component.ts

import { Component } from '@angular/core';
import { GtagModule } from 'angular-gtag';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  constructor(gtag: Gtag) {}
}

mmm... what's missing?

It seems that is not tracking gtag('set', params);

I've tried to use set() method and debugging with GA debug extension for chrome with no success, the set() method doesn't set anything.

code was:
this.gtag.set({ user_id: this.userId });

How to use with variable GAID?

If I need to load a different GAID when the app loads (from a config file that varies between different applications), what is the best approach since I can't put a hard coded GAI in the app.module.ts imports @NgModule imports array since the GtagModule.forRoot() is run very early in the liefecycle?

Is there any way to use multiple tracking IDs?

I have a site where I have a conversion tracking (AW) tag as well as a universal tracking (UA) tag. I'd like both to trigger automatically on all page views, since that's the request the client has made. Is there any way to do so, or should I be calling the page views manually for each page view?

trackingId removed when run production mode.

Hi,

I have problem that trackingId removed when run production mode.

application info

angular v6.0.6
angular-gtag v1.0.3

set Import

# environment.prod.ts

{
  .
  .
   GA_ID : process.env.GA_ID,
  .
  .
}

# app.module.ts
GtagModule.forRoot({ trackingId: environment.GA_ID, trackPageviews: true})

development mode

// in app.comonent.ts
console.log(Gtag) 
> Gtag {router: Router, mergedConfig: {…}}
mergedConfig: {
 trackPageview: true, trackingId: "UA-122xxx040-2"

production mode

// in app.comonent.ts
console.log(Gtag) 
> Gtag {router: Router, mergedConfig: {…}}
mergedConfig: {
 trackPageview: true, trackingId: null

Doesn't support angular universal

After importing GtagModule, there is an error on runtime, even I don't use gtag service (just import).

Google Analytics pageview error ReferenceError: window is not defined
    at Gtag.pageview (/Users/wangshuo/Projects/ksite_webapps/node_modules/angular-gtag/bundles/angular-gtag.umd.js:80:32)
    at TapSubscriber._tapNext (/Users/wangshuo/Projects/ksite_webapps/node_modules/angular-gtag/bundles/angular-gtag.umd.js:60:23)

gtag - does not fire

Hi there,

I have followed your readme to the letter but for some reason nothing happens.

But - when I include the script file link <script async src="https://www.googletagmanager.com/gtag/js?id=<tag>"></script> in index.html's tag it fires both the hard-coded one and your service at the same time.

Without the link it fires neither.

If I check within the Google Tag Assistant extension (Chrome), when the above link is present, it shows 2 identical tags but without the link it shows no tags.

Not sure what more I can do there so I hope you can shed some light on this.

Many thanks!

Change default page_title

In automatic tracking of Pageviews, is there a way to change page_title default value 'Angular App', to another value or to a real document title?

Generic type 'ModuleWithProviders<T>' requires 1 type argument(s)

I have followed the set up instructions on: https://www.npmjs.com/package/angular-gtag

npm i angular-gtag

in app.module.ts:

GtagModule.forRoot({ trackingId: environment.GOOGLE_TAG_ID, trackPageviews: true }),

Angular version: 10.1.1

On ng serve I am getting this error:

ERROR in node_modules/angular-gtag/src/gtag.module.d.ts:4:41 - error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).
 
 4     static forRoot(config: GtagConfig): ModuleWithProviders;