استفاده از Gtag در انگولار — راهنمای کاربردی

1...
2<section fxLayout="column" fxLayoutAlign="center center" gtag="home">
3
4  <p><b>Google Site Tagging</b> (aka Google Analytics) Example</p>
5
6</section>
7...

1...
2<ng-container [ngSwitch]="mode">
3
4  <!-- Survey -->
5  <section *ngSwitchCase="'survey'" gtag="survey">
6    ...
7  </section>
8
9  <!-- Search -->
10  <section *ngSwitchCase="'search'" gtag="search">
11    ...
12  </section>
13
14  <!-- Subscribe -->
15  <section *ngSwitchCase="'subscribe'" gtag="subscribe">      
16    ...
17  </section>
18
19  <!-- Thank you -->
20  <section *ngSwitchCase="'thanks'" gtag="thanks">
21    ...
22  </section>  
23
24</ng-container>
25...

1@Directive({
2  selector: '[gtag]'
3})
4export class GtagDirective implements OnChanges {
5
6  constructor(private gtag: GtagService, @Optional() private router: Router) {}
7
8  @Input('gtag') title: string;
9
10  @Input() path: string;
11
12  @Input() location: string;
13
14  ngOnChanges() {
15    this.gtag.pageView(this.title, this.path, this.location || this.router && this.router.url);
16  }
17}

1...
2  constructor(private gtag: GtagService) {
3
4    gtag.login('Google');
5
6    gtag.search('Bologna')
7      .then( () => console.log('Search correctly tagged') )
8      .catch( e => console.error(e) );
9
10    gtag.addToCart([{
11      id: "P12345",
12      name: "Android Warhol T-Shirt",
13      list_name: "Search Results",
14      brand: "Google",
15      category: "Apparel/T-Shirts",
16      variant: "Black",
17      list_position: 1,
18      quantity: 2,
19      price: '2.0'
20    }]);
21  }
22...

1@Injectable()
2export class GtagService {
3
4  constructor(@Inject(GTAG) private gtag: Gtag) { }
5
6  /** @see: https://developers.google.com/analytics/devguides/collection/gtagjs/setting-values */
7  public set(params: CustomParams): void {
8    return this.gtag('set', params);
9  }
10
11  /** @see: https://developers.google.com/analytics/devguides/collection/gtagjs/events */
12  public event(action: string, params?: EventParams): Promise<void> {
13    // Wraps the event call into a Promise
14    return new Promise( (resolve, reject) => {
15      try { 
16        // Triggers a 3s time-out timer 
17        const tmr = setTimeout( () => reject(new Error('gtag call timed-out')), 3000 );
18        // Performs the event call resolving with the event callback
19        this.gtag('event', action, { ...params, event_callback: () => { clearTimeout(tmr); resolve(); }}); } 
20      // Rejects the promise on errors
21      catch(e) { reject(e); }
22    });
23  }
24
25  /** @see: https://developers.google.com/analytics/devguides/collection/gtagjs/pages */
26  public pageView(page_title?: string, page_path?: string, page_location?: string) { 
27    return this.event('page_view', { page_title, page_location, page_path }); 
28  }
29
30  /** @see: https://developers.google.com/analytics/devguides/collection/gtagjs/exceptions */
31  public exception(description?: string, fatal?: boolean) { 
32    return this.event('exception', { description, fatal }); 
33  }
34
35  /** @see: https://developers.google.com/analytics/devguides/collection/gtagjs/user-timings */
36  public timingComplete(name: string, value: number, event_category?: string, event_label?: string) { 
37    return this.event('timing_complete', { name, value, event_category, event_label }); 
38  }
39
40  public login(method?: string) {
41    return this.event('login', { method });
42  }
43
44  public signUp(method?: string) {
45    return this.event('sign_up', { method });
46  }
47
48  public search(search_term?: string) {
49    return this.event('search', { search_term });
50  }
51  ...
52}

1...
2@NgModule({
3  imports:      [   
4    BrowserModule, 
5    ...    
6    GtagModule.init({
7      targetId: '<<YOUR GOOGLE ID HERE>>'
8    })
9  ],
10  
11  declarations: [ 
12    AppComponent
13  ],
14  
15  bootstrap: [ AppComponent ]
16})
17export class AppModule { }

1...
2@NgModule({
3  providers: [ GtagService ],
4  declarations: [ GtagDirective ],
5  exports: [ GtagDirective ]
6})
7export class GtagModule {
8
9  static init(config: GtagConfig): ModuleWithProviders<GtagModule> {
10    return {
11      ngModule: GtagModule,
12      providers: [
13        { provide: GtagConfigToken, useValue: config },
14        { provide: GTAG,
15          useFactory: gtagFactory, 
16          deps: [ [ new Optional(), new Inject(GtagConfigToken) ] ] }
17      ]
18    };
19  } 
20}

1...
2export function gtagFactory(config: GtagConfig): Gtag {
3
4  if((window as any).gtag) { return (window as any).gtag; }
5
6  const script = document.createElement('script');
7
8  script.src = 'https://www.googletagmanager.com/gtag/js?id=' + config.targetId;
9  script.type = 'text/javascript';
10  script.async = true;
11 
12  document.head.appendChild(script);
13
14  (window as any).dataLayer = (window as any).dataLayer || [];
15  function gtag(...args){ (window as any).dataLayer.push(arguments);}
16
17  gtag('js', new Date());
18
19  gtag('config', config.targetId, { send_page_view: false, ...config.configInfo });
20
21  ('setParams' in config) && gtag('set', config.setParams );
22
23  ('moreIds' in config) && config.moreIds.forEach( id => gtag('config', id) );
24
25  return (window as any).gtag = gtag;
26}