Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Doesn't support angular universal #4

Open
clark0x opened this issue Aug 24, 2018 · 11 comments
Open

Doesn't support angular universal #4

clark0x opened this issue Aug 24, 2018 · 11 comments

Comments

@clark0x
Copy link

clark0x commented Aug 24, 2018

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
Copy link

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
Copy link
Author

clark0x commented Sep 18, 2018

Workaround:
add following lines into server.ts:

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

@codediodeio
Copy link
Owner

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
Copy link

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

@kuncevic
Copy link

kuncevic commented Jun 6, 2019

Had a similar issue here angular/universal-starter#681

@anode7
Copy link

anode7 commented Mar 19, 2020

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

@BruneXX
Copy link

BruneXX commented Aug 11, 2020

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
Copy link

BruneXX commented Aug 11, 2020

I'll make a PR for this one

@hans-fischer
Copy link

// @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?

@onclave
Copy link

onclave commented Apr 14, 2022

Hello, any update on this issue yet?

@onclave
Copy link

onclave commented Aug 19, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants