Add logging

Added console warnings when either of the tracking functions is called without an active Pixel instance

Author: NielsCodes

README.md

@@ -35,7 +35,7 @@ import { PixelModule } from 'ngx-pixel';
   ],
   imports: [
     BrowserModule,
-    PixelModule.forRoot({ enabled: true, pixelId: 'YOUR_PIXEL_ID'})
+    PixelModule.forRoot({ enabled: true, pixelId: 'YOUR_PIXEL_ID' })
   ],
   providers: [],
   bootstrap: [AppComponent]
@@ -117,6 +117,12 @@ export class HomeComponent {
 }
 ```
 
+## Enabling with a dynamic Pixel ID
+In situations where the Pixel ID needs to be changed dynamically, this can be done using `initialize()` with the new Pixel ID as an optional argument. 
+**Notes:** 
+- A Pixel ID still needs to be provided when importing ***ngx-pixel*** in the module.
+- The previous instance should be removed with `remove()` before initializing a new Pixel ID.  
+
 ## Disabling ***ngx-pixel***
 Disabling works very similar to *enabling* from within a component and looks like this:
 ```TypeScript
@@ -141,9 +147,8 @@ export class HomeComponent {
 ---
 
 # What's next?
-- [ ] Checking Pixel ID's using a RegEx. First need to confirm whether all Pixel ID's follow the same format.
+- [ ] Adding Angular Universal SSR support.
 - [ ] Adding tests.
-- [ ] Testing View Engine backwards-compatibility.
 - [ ] Removing all Facebook scripts on removal, not just the initial script.
 
 ---

projects/pixel/README.md

@@ -35,7 +35,7 @@ import { PixelModule } from 'ngx-pixel';
   ],
   imports: [
     BrowserModule,
-    PixelModule.forRoot({ enabled: true, pixelId: 'YOUR_PIXEL_ID'})
+    PixelModule.forRoot({ enabled: true, pixelId: 'YOUR_PIXEL_ID' })
   ],
   providers: [],
   bootstrap: [AppComponent]
@@ -117,6 +117,12 @@ export class HomeComponent {
 }
 ```
 
+## Enabling with a dynamic Pixel ID
+In situations where the Pixel ID needs to be changed dynamically, this can be done using `initialize()` with the new Pixel ID as an optional argument. 
+**Notes:** 
+- A Pixel ID still needs to be provided when importing ***ngx-pixel*** in the module.
+- The previous instance should be removed with `remove()` before initializing a new Pixel ID.  
+
 ## Disabling ***ngx-pixel***
 Disabling works very similar to *enabling* from within a component and looks like this:
 ```TypeScript
@@ -141,16 +147,17 @@ export class HomeComponent {
 ---
 
 # What's next?
-- [ ] Checking Pixel ID's using a RegEx. First need to confirm whether all Pixel ID's follow the same format.
+- [ ] Adding Angular Universal SSR support.
 - [ ] Adding tests.
-- [ ] Testing View Engine backwards-compatibility.
 - [ ] Removing all Facebook scripts on removal, not just the initial script.
 
 ---
+
 Created with ❤️ by Niels Kersic, [niels.codes](https://niels.codes).
 
 
 
 
 
 
+

projects/pixel/src/lib/pixel.module.ts

@@ -3,8 +3,7 @@ import { ModuleWithProviders, NgModule } from '@angular/core';
 import { PixelService } from './pixel.service';
 
 @NgModule({
-  imports: [
-  ],
+  imports: [],
 })
 export class PixelModule {
 
@@ -21,6 +20,7 @@ export class PixelModule {
 
   /**
    * Initiale the Facebook Pixel Module
+   *
    * Add your Pixel ID as parameter
    */
   static forRoot(config: PixelConfiguration): ModuleWithProviders<PixelModule> {
@@ -40,12 +40,10 @@ export class PixelModule {
    * @param pixelId Pixel ID to verify
    */
   private static verifyPixelId(pixelId: string): void {
-
     // Have to verify first that all Pixel IDs follow the same 15 digit format
     if (pixelId === null || pixelId === undefined || pixelId.length === 0) {
       throw Error('Invalid Facebook Pixel ID. Did you pass the ID into the forRoot() function?');
     }
-
   }
 
 }

projects/pixel/src/lib/pixel.service.ts

@@ -59,6 +59,10 @@ export class PixelService {
     eventName: PixelEventName,
     properties?: PixelEventProperties
     ): void {
+    if(!this.isLoaded()) {
+      console.warn('Tried to track an event without initializing a Pixel instance. Call `initialize()` first.');
+      return;
+    }
 
     if (properties) {
       fbq('track', eventName, properties);
@@ -76,6 +80,11 @@ export class PixelService {
    * @param properties Optional properties of the event
    */
   trackCustom(eventName: string, properties?: object): void {
+    if(!this.isLoaded()) {
+      console.warn('Tried to track an event without initializing a Pixel instance. Call `initialize()` first.');
+      return;
+    }
+
     if (properties) {
       fbq('trackCustom', eventName, properties);
     } else {

tsconfig.json

@@ -31,4 +31,4 @@
     "strictInputAccessModifiers": true,
     "strictTemplates": true
   }
-}
+}