ngx-pixel
Version:
An Angular library to simplify the use of a Facebook Pixel.
199 lines (192 loc) • 9.39 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/router'), require('@angular/common'), require('rxjs/operators')) :
typeof define === 'function' && define.amd ? define('ngx-pixel', ['exports', '@angular/core', '@angular/router', '@angular/common', 'rxjs/operators'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['ngx-pixel'] = {}, global.ng.core, global.ng.router, global.ng.common, global.rxjs.operators));
}(this, (function (exports, i0, i2, i1, operators) { 'use strict';
var PixelService = /** @class */ (function () {
function PixelService(config, injectedDocument, platformId, router, rendererFactory) {
var _this = this;
this.config = config;
this.injectedDocument = injectedDocument;
this.platformId = platformId;
this.router = router;
this.rendererFactory = rendererFactory;
// DOCUMENT cannot be injected directly as Document type, see https://github.com/angular/angular/issues/20351
// It is therefore injected as any and then cast to Document
this.doc = injectedDocument;
this.renderer = rendererFactory.createRenderer(null, null);
if (router) {
// Log page views after router navigation ends
router.events.pipe(operators.filter(function (event) { return event instanceof i2.NavigationEnd; })).subscribe(function (event) {
if (_this.isLoaded()) {
_this.track('PageView');
}
});
}
}
/**
* Initialize the Pixel tracking script
* - Adds the script to page's head
* - Tracks first page view
*/
PixelService.prototype.initialize = function (pixelId) {
if (pixelId === void 0) { pixelId = this.config.pixelId; }
if (this.isLoaded()) {
console.warn('Tried to initialize a Pixel instance while another is already active. Please call `remove()` before initializing a new instance.');
return;
}
this.config.enabled = true;
this.addPixelScript(pixelId);
};
/** Remove the Pixel tracking script */
PixelService.prototype.remove = function () {
this.removePixelScript();
this.config.enabled = false;
};
/**
* Track a Standard Event as predefined by Facebook
*
* See {@link https://developers.facebook.com/docs/facebook-pixel/reference Facebook Pixel docs - reference}
* @param eventName The name of the event that is being tracked
* @param properties Optional properties of the event
*/
PixelService.prototype.track = function (eventName, properties) {
if (!i1.isPlatformBrowser(this.platformId)) {
return;
}
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);
}
else {
fbq('track', eventName);
}
};
/**
* Track a custom Event
*
* See {@link https://developers.facebook.com/docs/facebook-pixel/implementation/conversion-tracking#custom-conversions Facebook Pixel docs - custom conversions}
* @param eventName The name of the event that is being tracked
* @param properties Optional properties of the event
*/
PixelService.prototype.trackCustom = function (eventName, properties) {
if (!i1.isPlatformBrowser(this.platformId)) {
return;
}
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 {
fbq('trackCustom', eventName);
}
};
/**
* Adds the Facebook Pixel tracking script to the application
* @param pixelId The Facebook Pixel ID to use
*/
PixelService.prototype.addPixelScript = function (pixelId) {
if (!i1.isPlatformBrowser(this.platformId)) {
return;
}
var pixelCode = "\n var pixelCode = function(f,b,e,v,n,t,s)\n {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n n.queue=[];t=b.createElement(e);t.async=!0;\n t.src=v;s=b.getElementsByTagName(e)[0];\n s.parentNode.insertBefore(t,s)}(window, document,'script',\n 'https://connect.facebook.net/en_US/fbevents.js');\n fbq('init', '" + pixelId + "');\n fbq('track', 'PageView');";
var scriptElement = this.renderer.createElement('script');
this.renderer.setAttribute(scriptElement, 'id', 'pixel-script');
this.renderer.setAttribute(scriptElement, 'type', 'text/javascript');
this.renderer.setProperty(scriptElement, 'innerHTML', pixelCode);
this.renderer.appendChild(this.doc.head, scriptElement);
};
/** Remove Facebook Pixel tracking script from the application */
PixelService.prototype.removePixelScript = function () {
if (!i1.isPlatformBrowser(this.platformId)) {
return;
}
var pixelElement = this.doc.getElementById('pixel-script');
if (pixelElement) {
pixelElement.remove();
}
};
/** Checks if the script element is present */
PixelService.prototype.isLoaded = function () {
if (i1.isPlatformBrowser(this.platformId)) {
var pixelElement = this.doc.getElementById('pixel-script');
return !!pixelElement;
}
return false;
};
return PixelService;
}());
PixelService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PixelService_Factory() { return new PixelService(i0.ɵɵinject("config"), i0.ɵɵinject(i1.DOCUMENT), i0.ɵɵinject(i0.PLATFORM_ID), i0.ɵɵinject(i2.Router, 8), i0.ɵɵinject(i0.RendererFactory2)); }, token: PixelService, providedIn: "root" });
PixelService.decorators = [
{ type: i0.Injectable, args: [{
providedIn: 'root'
},] }
];
PixelService.ctorParameters = function () { return [
{ type: undefined, decorators: [{ type: i0.Inject, args: ['config',] }] },
{ type: undefined, decorators: [{ type: i0.Inject, args: [i1.DOCUMENT,] }] },
{ type: Object, decorators: [{ type: i0.Inject, args: [i0.PLATFORM_ID,] }] },
{ type: i2.Router, decorators: [{ type: i0.Optional }] },
{ type: i0.RendererFactory2 }
]; };
var PixelModule = /** @class */ (function () {
function PixelModule(pixel, platformId) {
this.pixel = pixel;
if (!PixelModule.config) {
throw Error('ngx-pixel not configured correctly. Pass the `pixelId` property to the `forRoot()` function');
}
if (PixelModule.config.enabled && i1.isPlatformBrowser(platformId)) {
this.pixel.initialize();
}
}
/**
* Initiale the Facebook Pixel Module
*
* Add your Pixel ID as parameter
*/
PixelModule.forRoot = function (config) {
this.config = config;
var pixelId = config.pixelId;
this.verifyPixelId(pixelId);
return {
ngModule: PixelModule,
providers: [PixelService, { provide: 'config', useValue: config }]
};
};
/**
* Verifies the Pixel ID that was passed into the configuration.
* - Checks if Pixel was initialized
* @param pixelId Pixel ID to verify
*/
PixelModule.verifyPixelId = function (pixelId) {
// 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?');
}
};
return PixelModule;
}());
PixelModule.config = null;
PixelModule.decorators = [
{ type: i0.NgModule, args: [{
imports: [],
},] }
];
PixelModule.ctorParameters = function () { return [
{ type: PixelService },
{ type: Object, decorators: [{ type: i0.Inject, args: [i0.PLATFORM_ID,] }] }
]; };
/**
* Generated bundle index. Do not edit.
*/
exports.PixelModule = PixelModule;
exports.PixelService = PixelService;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ngx-pixel.umd.js.map