angular and google analytics integration => ga is not a function

user_7364750 0
Viewed 13710

I'm doing an angular(4) application, but i got a problem integrating google analytics. I'm currently to add google analytics to my single page web application. But when I try to retrieve the ga function to send the new url it seems that it don't find the function.

This is the code I got:

index.hbs

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'My-key', 'auto');
</script>

app.component.ts

import { Component, OnInit } from '@angular/core';
import {NavigationEnd, Router} from "@angular/router";
import {WindowRef} from "./social/windowRef";
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    user: User;
    private currentRoute: string;

    constructor(private misc: MiscService, public router: Router) {
        this.router.events.subscribe(event => {
            if (event instanceof NavigationEnd) {
                console.log(event.urlAfterRedirects);
                WindowRef.get().ga('set', 'page', event.urlAfterRedirects);
                WindowRef.get().ga('send', 'pageview');
            }
        });
    }
}

windowRef.ts

export class WindowRef{
    public static get(): any{
        console.log(window);
        return window;
    }
}

I got this error: ERROR TypeError: windowRef_1.WindowRef.get(...).ga is not a function

When I do console.log(WindowRef.get()); I can see in the window the ga function but it still display the previous error when I try to use it. here and here

I don't really understand I used this method to retrieve the stripe function and it worked pretty well.

Have a good day :)

angular google-analytics analytics javascript
4 Answers

If @WeissDev answer don't work for you use setInterval to make sure its ready before using it.

  ngAfterViewInit() {
    this.initGoogleAnalyticsPageView()
  }

  private initGoogleAnalyticsPageView() {
    const interval = setInterval(() => {
      if ((window as any).ga && (window as any).ga.getAll) {
        this.router.events.subscribe(event => {
          const ga = (window as any).ga
          if (event instanceof NavigationEnd) {
            const tracker = ga.getAll()[0]
            tracker.set('page', event.urlAfterRedirects)
            tracker.send('pageview')
          }
        })
        clearInterval(interval)
      }
    }, 50)
  }
user_12058710

If you go to the Analytics Google Website they say this:

Copy the global site tag into the <head> section of your HTML. Or, if you use a website builder (e.g. WordPress, Shopify, etc), copy the global site tag into your website builder’s custom HTML field.

It needs to go into <head> tag.

user_92052770
Related