Doesn't support angular universal

clark0x commented 6 years ago

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)

ishan123456789 commented 6 years ago

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();

clark0x commented 6 years ago

Workaround: add following lines into server.ts:

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

codediodeio commented 6 years ago

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.

ishan123456789 commented 6 years ago

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

kuncevic commented 5 years ago

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

anode7 commented 4 years ago

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