import { Inject , Injectable } from '@angular/core' ; import { IAnalyticsService , ANALYTICS_CONFIG } from '../analytics' ; import { getLogger } from 'util/logging' ; interface GoogleAnalyticsConfig { trackerID : string ; } const logger = getLogger ( 'Google Analytics' ) ; @ Injectable ( ) export class GoogleAnalyticsService implements IAnalyticsService { private _dataLayer : any [ ] ; constructor ( @ Inject ( ANALYTICS_CONFIG ) private config ) { this . _dataLayer = [ ] ; const script = document . createElement ( 'script' ) as HTMLScriptElement ; script . src = `https://www.googletagmanager.com/gtag/js?id=${ config . trackerID }` ; script . async = true ; script . onload = ( ) => { logger . log ( 'Google Analytics initialized' ) ; const queuedEvents = this . _dataLayer ; this . _dataLayer = ( window as any ) . dataLayer = ( window as any ) . dataLayer || [ ] ; this . log ( 'js' , new Date ( ) ) ; this . log ( 'config' , config . trackerID , { send_page_view : false } ) ; if ( queuedEvents ) { for ( const ev of queuedEvents ) { this . _dataLayer . push ( ev ) ; } } } ; script . onerror = err => { logger . warn ( 'Error initializing Google Analytics' , err ) ; } ; const head = document . getElementsByTagName ( 'head' ) [ 0 ] ; head . appendChild ( script ) ; logger . log ( 'Initializing Google Analytics' ) ; } private log ( ... args ) { this . _dataLayer . push ( arguments ) ; } private logEvent ( category , action , label = null , value = null ) { this . log ( 'event' , action , { event_category : category , event_label : label , value } ) ; } public async logPageView ( path , title ) { this . log ( 'event' , 'page_view' , { page_title : title , page_path : path , page_location : document . location . href } ) ; } public async logButtonClick ( buttonID ) { this . logEvent ( 'button-click' , buttonID ) ; } }