diff --git a/package.json b/package.json index d57a1bc..5bb1156 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,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", diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 1898d86..7aa8f83 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,17 +1,50 @@ -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 routerEventsSubscription: Subject = new Subject(); + + constructor( + hamburgerMenuService: HamburgerMenuService, + routingService: RoutingService, + private googleAnalyticsEventsService: GoogleAnalyticsEventsService, + private router: Router + ) { + super(hamburgerMenuService, routingService); + + this.router.events + .pipe(takeUntil(this.routerEventsSubscription)) + .subscribe((event) => { + if (event instanceof NavigationEnd) { + this.googleAnalyticsEventsService.emitSetPage( + event.urlAfterRedirects + ); + } + }); + } + + public ngOnDestroy(): void { + this.routerEventsSubscription.next(); + this.routerEventsSubscription.complete(); + } } diff --git a/src/app/features/dvnt-bottom-navigation/dvnt-bottom-navigation.component.html b/src/app/features/dvnt-bottom-navigation/dvnt-bottom-navigation.component.html index be6fd65..a898667 100644 --- a/src/app/features/dvnt-bottom-navigation/dvnt-bottom-navigation.component.html +++ b/src/app/features/dvnt-bottom-navigation/dvnt-bottom-navigation.component.html @@ -1,5 +1,5 @@
-
+
  • - + {{ item.title }}
    • diff --git a/src/app/features/dvnt-footer/dvnt-footer.component.ts b/src/app/features/dvnt-footer/dvnt-footer.component.ts index 8c65553..0eba2d2 100644 --- a/src/app/features/dvnt-footer/dvnt-footer.component.ts +++ b/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, + 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 } + ); + } +} diff --git a/src/app/features/dvnt-header/dvnt-header-logo/dvnt-header-logo.component.html b/src/app/features/dvnt-header/dvnt-header-logo/dvnt-header-logo.component.html index e83c150..d01118c 100644 --- a/src/app/features/dvnt-header/dvnt-header-logo/dvnt-header-logo.component.html +++ b/src/app/features/dvnt-header/dvnt-header-logo/dvnt-header-logo.component.html @@ -1,3 +1,3 @@ - + Logo diff --git a/src/app/features/dvnt-header/dvnt-header-logo/dvnt-header-logo.component.ts b/src/app/features/dvnt-header/dvnt-header-logo/dvnt-header-logo.component.ts index 7b9b639..b9a2ebc 100644 --- a/src/app/features/dvnt-header/dvnt-header-logo/dvnt-header-logo.component.ts +++ b/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 + ); + } +} diff --git a/src/app/features/dvnt-header/dvnt-login/dvnt-login.component.html b/src/app/features/dvnt-header/dvnt-login/dvnt-login.component.html index a350d1e..24c569a 100644 --- a/src/app/features/dvnt-header/dvnt-login/dvnt-login.component.html +++ b/src/app/features/dvnt-header/dvnt-login/dvnt-login.component.html @@ -17,7 +17,7 @@ diff --git a/src/app/features/dvnt-landing-page/dvnt-bestselling-products/dvnt-bestselling-products.component.ts b/src/app/features/dvnt-landing-page/dvnt-bestselling-products/dvnt-bestselling-products.component.ts index 4d6a3fb..07a1d3f 100644 --- a/src/app/features/dvnt-landing-page/dvnt-bestselling-products/dvnt-bestselling-products.component.ts +++ b/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 + ); + } } diff --git a/src/app/features/dvnt-landing-page/dvnt-new-products/dvnt-new-products.component.html b/src/app/features/dvnt-landing-page/dvnt-new-products/dvnt-new-products.component.html index 372405b..c6b9e71 100644 --- a/src/app/features/dvnt-landing-page/dvnt-new-products/dvnt-new-products.component.html +++ b/src/app/features/dvnt-landing-page/dvnt-new-products/dvnt-new-products.component.html @@ -1,3 +1,4 @@ diff --git a/src/app/features/dvnt-landing-page/dvnt-new-products/dvnt-new-products.component.ts b/src/app/features/dvnt-landing-page/dvnt-new-products/dvnt-new-products.component.ts index e7ee4ed..cbb0219 100644 --- a/src/app/features/dvnt-landing-page/dvnt-new-products/dvnt-new-products.component.ts +++ b/src/app/features/dvnt-landing-page/dvnt-new-products/dvnt-new-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-new-products', templateUrl: './dvnt-new-products.component.html', @@ -13,5 +20,17 @@ export class DvntNewProductsComponent { .getComponentData('NewElectronicsHomepageProductCarouselComponent') .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.WhatIsNew, + GoogleLabelCategory.ProductCode, + product.code + ); + } } diff --git a/src/app/features/dvnt-product-details/dvnt-add-product-to-cart/dvnt-add-product-to-cart.component.ts b/src/app/features/dvnt-product-details/dvnt-add-product-to-cart/dvnt-add-product-to-cart.component.ts index bd4aebf..4aa2457 100644 --- a/src/app/features/dvnt-product-details/dvnt-add-product-to-cart/dvnt-add-product-to-cart.component.ts +++ b/src/app/features/dvnt-product-details/dvnt-add-product-to-cart/dvnt-add-product-to-cart.component.ts @@ -13,6 +13,12 @@ import { GlobalMessageService, GlobalMessageType, } 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-add-product-to-cart', @@ -27,7 +33,8 @@ export class DvntAddProductToCartComponent extends AddToCartComponent { cd: ChangeDetectorRef, currentProductService: CurrentProductService, modalService: ModalService, - private globalMessageService: GlobalMessageService + private globalMessageService: GlobalMessageService, + private googleAnalyticsEventsService: GoogleAnalyticsEventsService ) { super(cartService, modalService, currentProductService, cd); } @@ -49,7 +56,18 @@ export class DvntAddProductToCartComponent extends AddToCartComponent { ); this.cartService.addEntry(this.productCode, this.quantity); this.increment = false; + + this.addToCartGoogleEvent(this.productCode); }) .unsubscribe(); } + + private addToCartGoogleEvent(productCode: string): void { + this.googleAnalyticsEventsService.emitEvent( + GoogleEventCategory.SelectProduct, + GoogleActionCategory.AddToCart, + GoogleLabelCategory.ProductCode, + productCode + ); + } } diff --git a/src/app/features/dvnt-shared/components/dvnt-carousel-products/dvnt-carousel-products.component.html b/src/app/features/dvnt-shared/components/dvnt-carousel-products/dvnt-carousel-products.component.html index 84e0e57..fc48c02 100644 --- a/src/app/features/dvnt-shared/components/dvnt-carousel-products/dvnt-carousel-products.component.html +++ b/src/app/features/dvnt-shared/components/dvnt-carousel-products/dvnt-carousel-products.component.html @@ -6,6 +6,7 @@

    {{ title }}

    diff --git a/src/app/features/dvnt-shared/components/dvnt-carousel-products/dvnt-carousel-products.component.ts b/src/app/features/dvnt-shared/components/dvnt-carousel-products/dvnt-carousel-products.component.ts index effa707..06fcbb9 100644 --- a/src/app/features/dvnt-shared/components/dvnt-carousel-products/dvnt-carousel-products.component.ts +++ b/src/app/features/dvnt-shared/components/dvnt-carousel-products/dvnt-carousel-products.component.ts @@ -5,6 +5,8 @@ import { OnDestroy, ChangeDetectorRef, ChangeDetectionStrategy, + EventEmitter, + Output, } from '@angular/core'; import { Observable, Subscription } from 'rxjs'; import { map } from 'rxjs/operators'; @@ -57,6 +59,8 @@ export class DvntCarouselProductsComponent implements OnInit, OnDestroy { private _componentData$: Observable; private _componentSubscription = new Subscription(); + @Output() private emitClickEvent = new EventEmitter(); + constructor( private breakpointService: BreakpointService, private cd: ChangeDetectorRef, @@ -78,6 +82,10 @@ export class DvntCarouselProductsComponent implements OnInit, OnDestroy { return this._componentData$; } + public emitClickOnProduct(product: Product): void { + this.emitClickEvent.emit(product); + } + private setTitle(): void { this.title$ = this.componentData$.pipe(map((data) => data.title)); } diff --git a/src/app/features/dvnt-wish-list/dvnt-wish-list-item/dvnt-wish-list-item.component.ts b/src/app/features/dvnt-wish-list/dvnt-wish-list-item/dvnt-wish-list-item.component.ts index 0a402d1..cc6c8ba 100644 --- a/src/app/features/dvnt-wish-list/dvnt-wish-list-item/dvnt-wish-list-item.component.ts +++ b/src/app/features/dvnt-wish-list/dvnt-wish-list-item/dvnt-wish-list-item.component.ts @@ -1,6 +1,12 @@ import { Component } from '@angular/core'; import { WishListItemComponent } from '@spartacus/storefront'; import { CartService } 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-wish-list-item', @@ -10,7 +16,8 @@ import { CartService } from '@spartacus/core'; export class DvntWishListItemComponent extends WishListItemComponent { constructor( // tslint:disable-next-line: deprecation - private cartService: CartService + private cartService: CartService, + private googleAnalyticsEventsService: GoogleAnalyticsEventsService ) { super(); } @@ -26,5 +33,12 @@ export class DvntWishListItemComponent extends WishListItemComponent { this.cartEntry.quantity ); this.remove.emit(this.cartEntry); + + this.googleAnalyticsEventsService.emitEvent( + GoogleEventCategory.SelectProduct, + GoogleActionCategory.AddToCartFromWishList, + GoogleLabelCategory.ProductCode, + this.cartEntry.product.code + ); } } diff --git a/src/app/features/dvnt-wish-list/dvnt-wish-list.component.ts b/src/app/features/dvnt-wish-list/dvnt-wish-list.component.ts index 7e63ff9..37ad667 100644 --- a/src/app/features/dvnt-wish-list/dvnt-wish-list.component.ts +++ b/src/app/features/dvnt-wish-list/dvnt-wish-list.component.ts @@ -1,9 +1,35 @@ import { Component } from '@angular/core'; import { WishListComponent } from '@spartacus/storefront'; +import { WishListService, OrderEntry } 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-wish-list', templateUrl: './dvnt-wish-list.component.html', styleUrls: ['./dvnt-wish-list.component.scss'], }) -export class DvntWishListComponent extends WishListComponent {} +export class DvntWishListComponent extends WishListComponent { + constructor( + wishListService: WishListService, + private googleAnalyticsEventsService: GoogleAnalyticsEventsService + ) { + super(wishListService); + } + + public removeEntry(item: OrderEntry) { + super.removeEntry(item); + + this.googleAnalyticsEventsService.emitEvent( + GoogleEventCategory.SelectProduct, + GoogleActionCategory.RemoveFromWishList, + GoogleLabelCategory.ProductCode, + item.product.code + ); + } +} diff --git a/src/app/shared/google-analytics/google-analytics-event.service.ts b/src/app/shared/google-analytics/google-analytics-event.service.ts new file mode 100644 index 0000000..d982eb4 --- /dev/null +++ b/src/app/shared/google-analytics/google-analytics-event.service.ts @@ -0,0 +1,46 @@ +import { Injectable, isDevMode } from '@angular/core'; + +import { + GoogleEventCategory, + GoogleActionCategory, + GoogleLabelCategory, +} from './google-analytics.enum'; + +declare const gtag: Function; + +@Injectable({ + providedIn: 'root', +}) +export class GoogleAnalyticsEventsService { + private googleAnalyticsId: string = 'G-D6VTVFJ6E0'; + + constructor() { + if (!isDevMode()) { + (window).gtag('js', new Date()); + (window).gtag('config', this.googleAnalyticsId); + } + } + + public emitSetPage(url: string): void { + if (!isDevMode()) { + (window).gtag('set', 'page', url); + (window).gtag('send', 'pageview'); + } + } + + public emitEvent( + eventCategory: GoogleEventCategory, + eventAction: GoogleActionCategory, + eventLabel: GoogleLabelCategory = null, + eventValue: any = null + ): void { + if (!isDevMode()) { + (window).gtag('send', 'event', { + eventCategory, + eventLabel, + eventAction, + eventValue, + }); + } + } +} diff --git a/src/app/shared/google-analytics/google-analytics.enum.ts b/src/app/shared/google-analytics/google-analytics.enum.ts new file mode 100644 index 0000000..edcdc7b --- /dev/null +++ b/src/app/shared/google-analytics/google-analytics.enum.ts @@ -0,0 +1,26 @@ +export enum GoogleEventCategory { + SelectProduct = 'SelectProduct', + SelectFooterSection = 'SelectFooterSection', + Navigation = 'Navigation', + Modal = 'Modal', +} + +export enum GoogleActionCategory { + Bestseller = 'Bestseller', + WhatIsNew = 'WhatIsNew', + Footer = 'Footer', + HomePageRedirect = 'HomePageRedirect', + WishListRedirect = 'WishListRedirect', + OpenModal = 'OpenModal', + Login = 'Login', + AddToCart = 'AddToCart', + AddToCartFromWishList = 'AddToCartFromWishList', + RemoveFromWishList = 'RemoveFromWishList', +} + +export enum GoogleLabelCategory { + ProductCode = 'ProductCode', + FooterSection = 'FooterSection', + DesktopCart = 'DesktopCart', + BottomNavigationModal = 'BottomNavigationModal', +} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index bfb42c6..75943ed 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -6,6 +6,8 @@ import { RouterModule } from '@angular/router'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { ReactiveFormsModule } from '@angular/forms'; +import { GoogleAnalyticsEventsService } from './google-analytics/google-analytics-event.service'; + const imports = [ CommonModule, I18nModule, @@ -22,5 +24,6 @@ const imports = [ declarations: [], imports: imports, exports: imports, + providers: [GoogleAnalyticsEventsService], }) export class SharedModule {} diff --git a/src/index.html b/src/index.html index abe7370..362db4c 100644 --- a/src/index.html +++ b/src/index.html @@ -135,11 +135,22 @@ media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" /> + + + - + diff --git a/yarn.lock b/yarn.lock index 6d3a697..b46fc5a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1069,6 +1069,11 @@ "@types/minimatch" "*" "@types/node" "*" +"@types/google.analytics@0.0.40": + version "0.0.40" + resolved "https://registry.yarnpkg.com/@types/google.analytics/-/google.analytics-0.0.40.tgz#35526e9d78333423c430ade1c821ce54d0f0f850" + integrity sha512-R3HpnLkqmKxhUAf8kIVvDVGJqPtaaZlW4yowNwjOZUTmYUQEgHh8Nh5wkSXKMroNAuQM8gbXJHmNbbgA8tdb7Q== + "@types/jasmine@*": version "3.5.5" resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-3.5.5.tgz#3cad028470cf36ea24771078ec7ef86939af0d48"