根据 cookie 同意选择加入/退出谷歌分析 - Angular

Opt in/Opt out of google analytic based on cookie consent - Angular

提问人:Utkarsh Khare 提问时间:12/11/2022 更新时间:12/11/2022 访问量:309

问:

我正在尝试将 Google Analytics 与 cookie 同意集成。这意味着如果用户同意,那么跟踪器将起作用,否则将不起作用。

我正在使用

window['ga-disable-${environment.gaTrackingId}'] = false;

选择加入 google analytic 和 window['ga-disable-${environment.gaTrackingId}'] = true;要选择退出 Google Analytic,默认情况下,它将被选择退出。

我的app.component.ts是这样的

import {
  Component,
  HostListener,
  OnInit,
  OnDestroy
} from '@angular/core';
import {
  NgcCookieConsentService,
  NgcInitializeEvent,
  NgcNoCookieLawEvent,
  NgcStatusChangeEvent
} from 'ngx-cookieconsent';
import {
  Subscription
} from 'rxjs';
import {
  environment
} from 'src/environments/environment';
import {
  Title
} from '@angular/platform-browser';
import {
  ActivatedRoute
} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit, OnDestroy {
  isShow ? : boolean;
  topPosToStartShowing = 100;
  public consent!: string;
  notTrackScript!: any;
  trackScript!: any;


  //keep refs to subscriptions to be able to unsubscribe later
  private popupOpenSubscription!: Subscription;
  private popupCloseSubscription!: Subscription;
  private initializeSubscription!: Subscription;
  private statusChangeSubscription!: Subscription;
  private revokeChoiceSubscription!: Subscription;
  private noCookieLawSubscription!: Subscription;

  constructor(private ccService: NgcCookieConsentService, private title: Title) {


    if (environment.gaTrackingId) {
      // register google tag manager
      const gTagManagerScript = document.createElement('script');
      gTagManagerScript.async = true;
      gTagManagerScript.src = `https://www.googletagmanager.com/gtag/js?id=${environment.gaTrackingId}`;
      document.head.appendChild(gTagManagerScript);

      // register google analytics
      const gaScript = document.createElement('script');
      gaScript.innerHTML = `
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', '${environment.gaTrackingId}');
      `;
      document.head.appendChild(gaScript);

      this.notTrackScript = document.createElement('script');
      this.notTrackScript.innerHTML = `window['ga-disable-${environment.gaTrackingId}'] = true;`
      document.head.appendChild(this.notTrackScript)

      this.trackScript = document.createElement('script');
      this.trackScript.innerHTML = `window['ga-disable-${environment.gaTrackingId}'] = false;`
    }

  }

  ngOnInit(): void {

    this.statusChangeSubscription = this.ccService.statusChange$.subscribe(
      (event: NgcStatusChangeEvent) => {
        // you can use this.ccService.getConfig() to do stuff...
        console.log(`initialized: ${JSON.stringify(event)}`);
        if (event.status === 'allow') {
          document.head.removeChild(this.notTrackScript)
          document.head.appendChild(this.trackScript)
          location.reload()
        }

      });

  }
  ngOnDestroy(): void {
    // unsubscribe to cookieconsent observables to prevent memory leaks
    this.popupOpenSubscription.unsubscribe();
    this.popupCloseSubscription.unsubscribe();
    this.initializeSubscription.unsubscribe();
    this.statusChangeSubscription.unsubscribe();
    this.revokeChoiceSubscription.unsubscribe();
    this.noCookieLawSubscription.unsubscribe();
  }



}

现在有了这段代码,我可以默认关闭谷歌分析。但是,如果我同意,它就不会开始。

JavaScript Angular Google Analytics Cookie同意

评论


答: 暂无答案