Add support for custom data layer name (#48)

PiwikPRO · Feb 17, 2025 · 861e000 · 861e000
1 parent d279f1f
commit 861e000
Show file tree

Hide file tree

Showing 11 changed files with 92 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,12 +1,16 @@
 # CHANGELOG
 
+- [2.2.0](#220)
 - [2.1.0](#210)
 - [2.0.1](#201)
 - [2.0.0](#200)
 - [1.1.0](#110)
 - [1.0.0](#100)
 - [0.0.1](#001)
 
+## 2.2.0
+- add option to configure Data Layer name
+
 ## 2.1.0
 - update @piwikpro/tracking-base-library version
 - add cross-domain-tracking service

diff --git a/README.md b/README.md
@@ -62,7 +62,7 @@ import { NgxPiwikProModule } from "@piwikpro/ngx-piwik-pro";
   declarations: [AppComponent],
   imports: [
     BrowserModule,
-    NgxPiwikProModule.forRoot("container-id", "container-url", "nonce-hash"),
+    NgxPiwikProModule.forRoot("container-id", "container-url", {nonce: "nonce-hash"}),
     // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ],
   providers: [],
@@ -144,6 +144,24 @@ import { NgxPiwikProModule, NgxPiwikProRouterModule } from '@piwikpro/ngx-piwik-
 export class AppModule {}
 ```
 
+##### Customize Data Layer name
+
+```ts
+@Component(...)
+import { NgxPiwikProModule, NgxPiwikProRouterModule } from '@piwikpro/ngx-piwik-pro';
+...
+
+@NgModule({
+  ...
+  imports: [
+    ...
+    NgxPiwikProModule.forRoot('container-id', 'container-url', {dataLayerName: "myDataLayerName"}),
+//  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  ]
+})
+export class AppModule {}
+```
+
 ### Piwik PRO Services
 
 #### Send Custom Events

diff --git a/docs/README_BASE.md b/docs/README_BASE.md
@@ -56,7 +56,7 @@ import { NgxPiwikProModule } from "@piwikpro/ngx-piwik-pro";
   declarations: [AppComponent],
   imports: [
     BrowserModule,
-    NgxPiwikProModule.forRoot("container-id", "container-url", "nonce-hash"),
+    NgxPiwikProModule.forRoot("container-id", "container-url", {nonce: "nonce-hash"}),
     // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ],
   providers: [],
@@ -138,6 +138,24 @@ import { NgxPiwikProModule, NgxPiwikProRouterModule } from '@piwikpro/ngx-piwik-
 export class AppModule {}
 ```
 
+#### Customize Data Layer name
+
+```ts
+@Component(...)
+import { NgxPiwikProModule, NgxPiwikProRouterModule } from '@piwikpro/ngx-piwik-pro';
+...
+
+@NgModule({
+  ...
+  imports: [
+    ...
+    NgxPiwikProModule.forRoot('container-id', 'container-url', {dataLayerName: "myDataLayerName"}),
+//  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  ]
+})
+export class AppModule {}
+```
+
 ## Piwik PRO Services
 
 ### Send Custom Events

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@piwikpro/ngx-piwik-pro-project",
-  "version": "2.0.1",
+  "version": "0.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

diff --git a/projects/ngx-piwik-pro/package.json b/projects/ngx-piwik-pro/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@piwikpro/ngx-piwik-pro",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Piwik PRO tracking library for Angular apps.",
   "keywords": [
     "PiwikPRO",

diff --git a/projects/ngx-piwik-pro/src/lib/initializers/piwik-pro.initializer.ts b/projects/ngx-piwik-pro/src/lib/initializers/piwik-pro.initializer.ts
@@ -1,8 +1,8 @@
 import { APP_INITIALIZER, FactoryProvider, PLATFORM_ID, isDevMode } from '@angular/core';
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import PiwikPro, { DataLayer } from '@piwikpro/tracking-base-library';
 
 import { NGX_PIWIK_PRO_SETTINGS_TOKEN } from '../tokens/ngx-piwik-pro-settings.token';
-import PiwikPro from '@piwikpro/tracking-base-library';
 import { PiwikProSettings } from '../interfaces/piwik-pro-settings.interface';
 
 export const NGX_PIWIK_PRO_INITIALIZER_PROVIDER: FactoryProvider = {
@@ -51,6 +51,10 @@ export function PiwikProInitializer(
       }
     }
 
+    if(settings.dataLayerName){
+        DataLayer.setDataLayerName(settings.dataLayerName)
+    }
+
     const s: HTMLScriptElement = document.createElement('script');
     s.async = true;
     if (settings.nonce) {
@@ -60,6 +64,7 @@ export function PiwikProInitializer(
       containerId: settings.containerId,
       containerUrl: settings.containerURL,
       nonceValue: settings.nonce,
+      dataLayerName: settings.dataLayerName
     })
 
     const head: HTMLHeadElement = document.getElementsByTagName('head')[0];

diff --git a/projects/ngx-piwik-pro/src/lib/interfaces/piwik-pro-settings.interface.ts b/projects/ngx-piwik-pro/src/lib/interfaces/piwik-pro-settings.interface.ts
@@ -1,5 +1,6 @@
-export interface PiwikProSettings {
+import { InitOptions } from '@piwikpro/tracking-base-library';
+
+export type PiwikProSettings = {
   containerId: string;
   containerURL: string;
-  nonce?: string;
-}
+} & InitOptions;
diff --git a/projects/ngx-piwik-pro/src/lib/ngx-piwik-pro.module.ts b/projects/ngx-piwik-pro/src/lib/ngx-piwik-pro.module.ts
@@ -1,4 +1,6 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
+import { InitOptions } from '@piwikpro/tracking-base-library';
+
 import { NGX_PIWIK_PRO_SETTINGS_TOKEN } from './tokens/ngx-piwik-pro-settings.token';
 import { PiwikProSettings } from './interfaces/piwik-pro-settings.interface';
 import { NGX_PIWIK_PRO_INITIALIZER_PROVIDER } from './initializers/piwik-pro.initializer';
@@ -10,17 +12,25 @@ declare global {
 }
 
 @NgModule({
-  declarations: [
-  ],
-  imports: [
-  ],
-  exports: [
-  ]
+  declarations: [],
+  imports: [],
+  exports: [],
 })
 export class NgxPiwikProModule {
   constructor() {}
 
-  static forRoot(containerId: string, containerURL: string, nonce?: string): ModuleWithProviders<NgxPiwikProModule> {
+  static forRoot(
+    containerId: string,
+    containerURL: string,
+    nonceOrOptions?: string | InitOptions
+  ): ModuleWithProviders<NgxPiwikProModule> {
+    const options =
+      typeof nonceOrOptions === 'string'
+        ? {
+            nonce: nonceOrOptions,
+          }
+        : nonceOrOptions;
+
     return {
       ngModule: NgxPiwikProModule,
       providers: [
@@ -29,11 +39,11 @@ export class NgxPiwikProModule {
           useValue: {
             containerId,
             containerURL,
-            nonce
-          } as PiwikProSettings
+            ...options,
+          } as PiwikProSettings,
         },
         NGX_PIWIK_PRO_INITIALIZER_PROVIDER,
       ],
-    }
+    };
   }
 }
diff --git a/projects/piwik-pro-angular-demo/src/app/app.component.ts b/projects/piwik-pro-angular-demo/src/app/app.component.ts
@@ -1,14 +1,16 @@
 import { Component } from '@angular/core';
 import { Title } from '@angular/platform-browser';
+import { DataLayerService } from '@piwik-pro/ngx-piwik-pro/src/lib/services/data-layer/data-layer.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
   title = 'piwik-pro-angular-demo';
-  constructor(private titleService: Title) {
+  constructor(private titleService: Title, private readonly dataLayerService: DataLayerService) {
     this.titleService.setTitle('Home Page')
+    this.dataLayerService.push({ name: "my custom data layer entry" })
   }
 }
diff --git a/projects/piwik-pro-angular-demo/src/app/app.module.ts b/projects/piwik-pro-angular-demo/src/app/app.module.ts
@@ -24,6 +24,7 @@ import { CustomEventsService } from '@piwik-pro/ngx-piwik-pro/src/lib/services/c
 import { MatIconModule } from '@angular/material/icon';
 import { MatDividerModule } from '@angular/material/divider';
 import { DownloadAndOutlinkComponent } from './pages/download-and-outlink/download-and-outlink.component';
+import { DataLayerService } from '@piwik-pro/ngx-piwik-pro/src/lib/services/data-layer/data-layer.service';
 
 @NgModule({
   declarations: [
@@ -41,7 +42,15 @@ import { DownloadAndOutlinkComponent } from './pages/download-and-outlink/downlo
     AppRoutingModule,
     NavbarModule,
     EventListModule,
-    NgxPiwikProModule.forRoot(environment.containerId, environment.containerURL),
+    NgxPiwikProModule.forRoot(
+      environment.containerId,
+      environment.containerURL,
+      // optional config
+      {
+        nonce: '_nonce_', // nonce string
+        dataLayerName: 'myDataLayerName' // custom data layer name
+      }
+    ),
     NgxPiwikProRouterModule.forRoot(),
     BrowserAnimationsModule,
     MatCardModule,
@@ -54,7 +63,7 @@ import { DownloadAndOutlinkComponent } from './pages/download-and-outlink/downlo
     UserManagementService,
     ContentTrackingService,
     CustomEventsService,
-
+    DataLayerService
   ],
   bootstrap: [AppComponent]
 })