GH-6 added google analytics configuration, events service and example…

… events

package.json

@@ -53,6 +53,7 @@
     "@angular-devkit/build-angular": "~0.803.24",
     "@angular/cli": "~8.3.24",
     "@angular/compiler-cli": "~8.2.14",
+    "@types/google.analytics": "0.0.40",
     "@angular/language-service": "~8.2.14",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",

src/app/app.component.ts

@@ -1,17 +1,47 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
+import { Router, NavigationEnd } from '@angular/router';
+import {
+  StorefrontComponent,
+  HamburgerMenuService,
+} from '@spartacus/storefront';
+import { ContentSlotComponentData, RoutingService } from '@spartacus/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
-import { StorefrontComponent } from '@spartacus/storefront';
-import { ContentSlotComponentData } from '@spartacus/core';
+import { GoogleAnalyticsEventsService } from './shared/google-analytics/google-analytics-event.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class AppComponent extends StorefrontComponent {
+export class AppComponent extends StorefrontComponent implements OnDestroy {
   public footerComponent: ContentSlotComponentData = {
     uid: 'FooterNavigationComponent',
     typeCode: 'FooterNavigationComponent',
     flexType: 'FooterNavigationComponent',
   };
+
+  private unsubscribe: Subject<any> = new Subject();
+
+  constructor(
+    hamburgerMenuService: HamburgerMenuService,
+    routingService: RoutingService,
+    private googleAnalyticsEventsService: GoogleAnalyticsEventsService,
+    private router: Router
+  ) {
+    super(hamburgerMenuService, routingService);
+
+    this.router.events.pipe(takeUntil(this.unsubscribe)).subscribe((event) => {
+      if (event instanceof NavigationEnd) {
+        this.googleAnalyticsEventsService.emitSetPage(event.urlAfterRedirects);
+        console.log('SET PAGE', event.urlAfterRedirects);
+      }
+    });
+  }
+
+  public ngOnDestroy(): void {
+    this.unsubscribe.next();
+    this.unsubscribe.complete();
+  }
 }

src/app/features/dvnt-bottom-navigation/dvnt-bottom-navigation.component.html

@@ -1,5 +1,5 @@
 <div class="bottom-navigation-container">
-  <div (click)="navigateTo('', $event)" class="navigation-item">
+  <div (click)="navigateToHomePage($event)" class="navigation-item">
     <app-dvnt-icon
       className="navigation-item-icon"
       fill="#A3A5AD"

src/app/features/dvnt-bottom-navigation/dvnt-bottom-navigation.component.ts

@@ -7,6 +7,12 @@ import { DvntModalSearchComponent } from 'src/app/features/dvnt-modal-search/dvn
 import { DvntProfileLinkListComponent } from 'src/app/features/dvnt-profile-link-list/dvnt-profile-link-list.component';
 import { DvntModalCategoriesComponent } from '../dvnt-modal-categories/dvnt-modal-categories.component';
 import { DvntCartModalComponent } from '../dvnt-cart/dvnt-cart-modal/dvnt-cart-modal.component';
+import { GoogleAnalyticsEventsService } from 'src/app/shared/google-analytics/google-analytics-event.service';
+import {
+  GoogleEventCategory,
+  GoogleActionCategory,
+  GoogleLabelCategory,
+} from 'src/app/shared/google-analytics/google-analytics.enum';
 
 @Component({
   selector: 'app-dvnt-bottom-navigation',
@@ -18,6 +24,7 @@ export class DvntBottomNavigationComponent implements OnDestroy {
 
   constructor(
     private authService: AuthService,
+    private googleAnalyticsEventsService: GoogleAnalyticsEventsService,
     private routingService: RoutingService,
     private modalService: ModalService
   ) {}
@@ -26,10 +33,15 @@ export class DvntBottomNavigationComponent implements OnDestroy {
     this.clearModalRef();
   }
 
-  public navigateTo(path: string, event: Event): void {
+  public navigateToHomePage(event: Event): void {
     this.preventOtherActions(event);
 
-    this.routingService.goByUrl(path);
+    this.routingService.goByUrl('');
+
+    this.googleAnalyticsEventsService.emitEvent(
+      GoogleEventCategory.Navigation,
+      GoogleActionCategory.HomePageRedirect
+    );
   }
 
   public setSearchAction(event: Event): void {
@@ -81,6 +93,13 @@ export class DvntBottomNavigationComponent implements OnDestroy {
   private createModal(component: any, componentType: string): void {
     this.clearModalRef();
     this.createModelInstance(component, componentType);
+
+    this.googleAnalyticsEventsService.emitEvent(
+      GoogleEventCategory.Modal,
+      GoogleActionCategory.OpenModal,
+      GoogleLabelCategory.BottomNavigationModal,
+      componentType
+    );
   }
 
   private createModelInstance(component: any, componentType: string): void {

src/app/features/dvnt-footer/dvnt-footer.component.html

@@ -5,7 +5,11 @@
         {{ column?.title }}
       </li>
       <li *ngFor="let item of column.children" class="footer-menu-item">
-        <a [href]="item.url" [target]="item.target">
+        <a
+          (click)="footerSectionSelected(column.title, item.title)"
+          [href]="item.url"
+          [target]="item.target"
+        >
           {{ item.title }}
         </a>
       </li>

src/app/features/dvnt-footer/dvnt-footer.component.ts

@@ -1,9 +1,43 @@
 import { Component } from '@angular/core';
-import { FooterNavigationComponent } from '@spartacus/storefront';
+import {
+  FooterNavigationComponent,
+  CmsComponentData,
+  NavigationService,
+} from '@spartacus/storefront';
+import {
+  Product,
+  CmsNavigationComponent,
+  AnonymousConsentsConfig,
+} from '@spartacus/core';
+
+import { GoogleAnalyticsEventsService } from 'src/app/shared/google-analytics/google-analytics-event.service';
+import {
+  GoogleEventCategory,
+  GoogleActionCategory,
+  GoogleLabelCategory,
+} from 'src/app/shared/google-analytics/google-analytics.enum';
 
 @Component({
   selector: 'app-dvnt-footer',
   templateUrl: './dvnt-footer.component.html',
   styleUrls: ['./dvnt-footer.component.scss'],
 })
-export class DvntFooterComponent extends FooterNavigationComponent {}
+export class DvntFooterComponent extends FooterNavigationComponent {
+  constructor(
+    anonymousConsentsConfig: AnonymousConsentsConfig,
+    componentData: CmsComponentData<CmsNavigationComponent>,
+    service: NavigationService,
+    private googleAnalyticsEventsService: GoogleAnalyticsEventsService
+  ) {
+    super(componentData, service, anonymousConsentsConfig);
+  }
+
+  public footerSectionSelected(column: string, title: string): void {
+    this.googleAnalyticsEventsService.emitEvent(
+      GoogleEventCategory.SelectFooterSection,
+      GoogleActionCategory.Footer,
+      GoogleLabelCategory.FooterSection,
+      { column, title }
+    );
+  }
+}

src/app/features/dvnt-header/dvnt-header-logo/dvnt-header-logo.component.html

@@ -1,3 +1,3 @@
-<a role="link" routerLink="">
+<a (click)="goToHomePage()" role="link" routerLink="">
   <img src="../../../../assets/images/homepage-logo.svg" alt="Logo" />
 </a>

src/app/features/dvnt-header/dvnt-header-logo/dvnt-header-logo.component.ts

@@ -1,7 +1,25 @@
 import { Component } from '@angular/core';
+import { GoogleAnalyticsEventsService } from 'src/app/shared/google-analytics/google-analytics-event.service';
+
+import {
+  GoogleEventCategory,
+  GoogleActionCategory,
+  GoogleLabelCategory,
+} from 'src/app/shared/google-analytics/google-analytics.enum';
 
 @Component({
   selector: 'app-dvnt-header-logo',
   templateUrl: './dvnt-header-logo.component.html',
 })
-export class DvntHeaderLogoComponent {}
+export class DvntHeaderLogoComponent {
+  constructor(
+    private googleAnalyticsEventsService: GoogleAnalyticsEventsService
+  ) {}
+
+  public goToHomePage(): void {
+    this.googleAnalyticsEventsService.emitEvent(
+      GoogleEventCategory.Navigation,
+      GoogleActionCategory.HomePageRedirect
+    );
+  }
+}

src/app/features/dvnt-header/dvnt-login/dvnt-login.component.html

@@ -17,7 +17,7 @@
 
 <ng-template #login>
   <a
-    (click)="blockPropagation($event)"
+    (click)="loginEvent($event)"
     [routerLink]="{ cxRoute: 'login' } | cxUrl"
     class="header-navigation-icon"
     role="link"

src/app/features/dvnt-header/dvnt-login/dvnt-login.component.ts

@@ -1,11 +1,35 @@
 import { Component } from '@angular/core';
 import { LoginComponent } from '@spartacus/storefront';
+import { AuthService, UserService } from '@spartacus/core';
+
+import { GoogleAnalyticsEventsService } from 'src/app/shared/google-analytics/google-analytics-event.service';
+import {
+  GoogleEventCategory,
+  GoogleActionCategory,
+} from 'src/app/shared/google-analytics/google-analytics.enum';
 
 @Component({
   selector: 'app-dvnt-login',
   templateUrl: './dvnt-login.component.html',
 })
 export class DvntLoginComponent extends LoginComponent {
+  constructor(
+    auth: AuthService,
+    userService: UserService,
+    private googleAnalyticsEventsService: GoogleAnalyticsEventsService
+  ) {
+    super(auth, userService);
+  }
+
+  public loginEvent(event: Event): void {
+    this.blockPropagation(event);
+
+    this.googleAnalyticsEventsService.emitEvent(
+      GoogleEventCategory.Navigation,
+      GoogleActionCategory.Login
+    );
+  }
+
   public blockPropagation(event: Event): void {
     event.stopPropagation();
     event.preventDefault();

src/app/features/dvnt-header/dvnt-mini-cart/dvnt-mini-cart.component.ts

@@ -3,6 +3,12 @@ import { MiniCartComponent, ModalService } from '@spartacus/storefront';
 import { CartService } from '@spartacus/core';
 
 import { DvntCartModalComponent } from '../../dvnt-cart/dvnt-cart-modal/dvnt-cart-modal.component';
+import { GoogleAnalyticsEventsService } from 'src/app/shared/google-analytics/google-analytics-event.service';
+import {
+  GoogleEventCategory,
+  GoogleActionCategory,
+  GoogleLabelCategory,
+} from 'src/app/shared/google-analytics/google-analytics.enum';
 
 @Component({
   selector: 'app-dvnt-mini-cart',
@@ -13,6 +19,7 @@ export class DvntMiniCartComponent extends MiniCartComponent {
   constructor(
     // tslint:disable-next-line: deprecation
     protected cartService: CartService,
+    private googleAnalyticsEventsService: GoogleAnalyticsEventsService,
     private modalService: ModalService
   ) {
     super(cartService);
@@ -26,5 +33,11 @@ export class DvntMiniCartComponent extends MiniCartComponent {
       windowClass: 'side-modal slide-from-right',
       backdropClass: 'side-modal-backdrop',
     });
+
+    this.googleAnalyticsEventsService.emitEvent(
+      GoogleEventCategory.Modal,
+      GoogleActionCategory.OpenModal,
+      GoogleLabelCategory.DesktopCart
+    );
   }
 }

src/app/features/dvnt-header/dvnt-wish-list-icon/dvnt-wish-list-icon.component.html

@@ -1,6 +1,6 @@
 <ng-container *ngIf="user$ | async as user">
   <a
-    (click)="blockPropagation($event)"
+    (click)="goToWishList($event)"
     [routerLink]="'my-account/wishlist'"
     class="header-navigation-icon navigation-link"
     role="link"

src/app/features/dvnt-header/dvnt-wish-list-icon/dvnt-wish-list-icon.component.ts

@@ -8,6 +8,11 @@ import {
   User,
   WishListService,
 } from '@spartacus/core';
+import { GoogleAnalyticsEventsService } from 'src/app/shared/google-analytics/google-analytics-event.service';
+import {
+  GoogleEventCategory,
+  GoogleActionCategory,
+} from 'src/app/shared/google-analytics/google-analytics.enum';
 
 @Component({
   selector: 'app-dvnt-wish-list-icon',
@@ -25,6 +30,7 @@ export class DvntWishListIconComponent implements OnInit {
 
   constructor(
     private auth: AuthService,
+    private googleAnalyticsEventsService: GoogleAnalyticsEventsService,
     private userService: UserService,
     private wishListService: WishListService
   ) {}
@@ -41,7 +47,16 @@ export class DvntWishListIconComponent implements OnInit {
     );
   }
 
-  public blockPropagation(event: Event): void {
+  public goToWishList(event: Event): void {
+    this.blockPropagation(event);
+
+    this.googleAnalyticsEventsService.emitEvent(
+      GoogleEventCategory.Navigation,
+      GoogleActionCategory.WishListRedirect
+    );
+  }
+
+  private blockPropagation(event: Event): void {
     event.stopPropagation();
     event.preventDefault();
   }

src/app/features/dvnt-landing-page/dvnt-bestselling-products/dvnt-bestselling-products.component.html

@@ -1,3 +1,4 @@
 <app-dvnt-carousel-products
+  (emitClickEvent)="productSelected($event)"
   [componentData]="componentData$"
 ></app-dvnt-carousel-products>

src/app/features/dvnt-landing-page/dvnt-bestselling-products/dvnt-bestselling-products.component.ts

@@ -1,8 +1,15 @@
 import { Component } from '@angular/core';
-import { CmsService } from '@spartacus/core';
+import { CmsService, Product } from '@spartacus/core';
 import { filter } from 'rxjs/operators';
 import { Observable } from 'rxjs';
 
+import { GoogleAnalyticsEventsService } from 'src/app/shared/google-analytics/google-analytics-event.service';
+import {
+  GoogleEventCategory,
+  GoogleActionCategory,
+  GoogleLabelCategory,
+} from 'src/app/shared/google-analytics/google-analytics.enum';
+
 @Component({
   selector: 'app-dvnt-bestselling-products',
   templateUrl: './dvnt-bestselling-products.component.html',
@@ -13,5 +20,17 @@ export class DvntBestsellingProductsComponent {
     .getComponentData('ElectronicsHomepageProductCarouselComponent')
     .pipe(filter(Boolean));
 
-  constructor(private cmsService: CmsService) {}
+  constructor(
+    private cmsService: CmsService,
+    private googleAnalyticsEventsService: GoogleAnalyticsEventsService
+  ) {}
+
+  public productSelected(product: Product): void {
+    this.googleAnalyticsEventsService.emitEvent(
+      GoogleEventCategory.SelectProduct,
+      GoogleActionCategory.Bestseller,
+      GoogleLabelCategory.ProductCode,
+      product.code
+    );
+  }
 }

src/app/features/dvnt-landing-page/dvnt-new-products/dvnt-new-products.component.html

@@ -1,3 +1,4 @@
 <app-dvnt-carousel-products
+  (emitClickEvent)="productSelected($event)"
   [componentData]="componentData$"
 ></app-dvnt-carousel-products>