To integrate your RB2B tracking script to ensure that it fires on every page visit within your Angular application, you'll want to integrate it in a way that's globally accessible and consistently executed as users navigate your app. A good practice is to inject this script programmatically through the Angular framework to maintain control over its execution and lifecycle. Here’s a step-by-step guide on how to do this:
Step 1: Create a Custom Service for Script Loading
First, generate a new service in Angular that will handle the loading of your script. You can do this using the Angular CLI:
ng generate service CustomScriptLoader
This command creates a service with the name CustomScriptLoader. Next, you'll implement the script loading functionality within this service.
Step 2: Implement the Script Loading Logic
Open the newly created service file (custom-script-loader.service.ts) and add the script loading logic:
import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class CustomScriptLoaderService {
private renderer: Renderer2;
constructor(rendererFactory: RendererFactory2) {
this.renderer = rendererFactory.createRenderer(null, null);
}
loadScript() {
// Check if script is already loaded
if (window['reb2b'] && window['reb2b'].invoked) {
return;
}
// Initialize the script global object
let reb2b = window['reb2b'] = window['reb2b'] || [];
reb2b.invoked = true;
reb2b.methods = ['identify', 'collect'];
reb2b.factory = function (method) {
return function () {
var args = Array.prototype.slice.call(arguments);
args.unshift(method); reb2b.push(args);
return reb2b;
};
};
for (let i = 0; i < reb2b.methods.length; i++) {
let key = reb2b.methods[i];
reb2b[key] = reb2b.factory(key);
}
// Create the script element
let script = this.renderer.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = "https://s3-us-west-2.amazonaws.com/b2bjsstore/b/YOUR-UNIQUE-ID/reb2b.js.gz"; // Replace YOUR-UNIQUE-ID with your actual ID
let firstScript = document.getElementsByTagName('script')[0];
this.renderer.insertBefore(firstScript.parentNode, script, firstScript);
reb2b.load("YOUR-UNIQUE-ID"); // Replace YOUR-UNIQUE-ID with your actual ID
}
}
Step 3: Load the Script on Application Initialization
The best place to initialize this script so that it loads on every page is within your root component (usually AppComponent) or a component that remains loaded throughout your application's lifecycle. You can do this by injecting the CustomScriptLoaderService and calling the loadScript method within the ngOnInit lifecycle hook.
Open your app.component.ts or equivalent and modify it as follows:
import { Component, OnInit } from '@angular/core';
import { CustomScriptLoaderService } from './custom-script-loader.service'; // Adjust the path as necessary
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
constructor(private scriptLoader: CustomScriptLoaderService) {}
ngOnInit() {
this.scriptLoader.loadScript();
}
}
Step 4: Verify the Script Loads on Every Page
After integrating the script using the steps above, run your Angular application and navigate through different components or routes. Verify in your browser's developer tools (usually within the Network tab) that the script is loaded once upon initial application load and remains active as you navigate the application. Since the script and its initialization are tied to the root component's lifecycle, which is persistent across route changes in a single-page application, it doesn't need to reload on route changes.
Important Notes
Make sure to replace
"YOUR-UNIQUE-ID"with the actual unique ID provided by the service you're integrating with.This approach ensures the script is loaded globally and respects the single-page application dynamics of Angular without reloading the script unnecessarily on route changes.