angular-gtag icon indicating copy to clipboard operation
angular-gtag copied to clipboard

Doesn't support angular universal

Open clark0x opened this issue 7 years ago • 11 comments
trafficstars

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)

clark0x avatar Aug 24 '18 08:08 clark0x

Please provide a fix or a workaround for this like calling a function which will allow the dev to conditionally use this module if the platform is browser

if (isPlatformBrowser(this.platformId)) {
      gtag.use();

ishan123456789 avatar Sep 15 '18 19:09 ishan123456789

Workaround: add following lines into server.ts:

// @ts-ignore
global.window = {};
// @ts-ignore
global.gtag = ()=>();

clark0x avatar Sep 18 '18 17:09 clark0x

The fix from @ishan123456789 should work in this lib. I'll get a fix published soon, but feel to send a PR if you want.

codediodeio avatar Sep 18 '18 17:09 codediodeio

Already stuck with two projects will surely work on it if I get time to work on it any time soon @codediodeio

ishan123456789 avatar Sep 20 '18 17:09 ishan123456789

Had a similar issue here https://github.com/angular/universal-starter/issues/681

kuncevic avatar Jun 06 '19 12:06 kuncevic

Replace the code in the file "gtag.service.ts" with this one, rebuild the lib ... And it's all working very well

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { GtagPageview, GtagEvent, GtagConfig } from './interfaces';
import { Router, NavigationEnd } from '@angular/router';
import { tap, filter } from 'rxjs/operators';
import { isPlatformBrowser } from '@angular/common';
import { Location } from '@angular/common';
declare var gtag: any;

@Injectable()
export class Gtag {
  private mergedConfig: GtagConfig;
  testBrowser: any;
  constructor(@Inject('config') gaConfig: GtagConfig, private router: Router, @Inject(PLATFORM_ID) platformId: string,private location:Location) {
    this.testBrowser = isPlatformBrowser(platformId);
    this.mergedConfig = { trackPageviews: true, ...gaConfig };
    if (this.mergedConfig.trackPageviews && this.testBrowser) {
      router.events
        .pipe(
          filter(event => event instanceof NavigationEnd),
          tap(event => {
            this.pageview();
          })
        )
        .subscribe();
    }
  }

  event(action: string, params: GtagEvent = {}) {
    // try/catch to avoid cross-platform issues
    try {
      gtag('event', action, params);
      this.debug('event', this.mergedConfig.trackingId, action, params);
    } catch (err) {
      console.error('Google Analytics event error', err);
    }
  }

  pageview(params?: GtagPageview) {
    try {
      const defaults = {
        page_path: this.router.url,
        page_title: 'Angular App',
        page_location: this.location.path()
      };

      params = { ...defaults, ...params };
      gtag('config', this.mergedConfig.trackingId, params);
      this.debug('pageview', this.mergedConfig.trackingId, params);
    } catch (err) {
      console.error('Google Analytics pageview error', err);
    }
  }

  config(params: any) {
    try {
      gtag('config', this.mergedConfig.trackingId, (params = {}));
    } catch (err) {
      console.error('Google Analytics config error', err);
    }
  }

  set(params: any) {
    try {
      gtag('set', (params = {}));
    } catch (err) {
      console.error('Google Analytics set error', err);
    }
  }

  private debug(...msg) {
    if (this.mergedConfig.debug) {
      console.log('angular-gtag:', ...msg);
    }
  }
}

anode7 avatar Mar 19 '20 12:03 anode7

The error for my is spcifically on this line:

gtag('config', this.mergedConfig.trackingId, params);

Error: Google Analytics pageview error ReferenceError: gtag is not defined

BruneXX avatar Aug 11 '20 18:08 BruneXX

I'll make a PR for this one

BruneXX avatar Aug 11 '20 18:08 BruneXX

// @ts-ignore global.window = {}; // @ts-ignore global.gtag = ()=>();

I added this to: function app(): express.Express

But I'm getting an error, what am I doing wrong?

hans-fischer avatar Mar 16 '21 06:03 hans-fischer

Hello, any update on this issue yet?

onclave avatar Apr 14 '22 20:04 onclave

Since this project seems to be not maintained anymore, we took inspiration from this repository and created one that also supports SSR.

You can find it here: https://github.com/bloomscorp/ngx-google-tags-manager

We are using this in our projects and it is working fine. Hope this helps someone.

onclave avatar Aug 19 '22 17:08 onclave