@kattoshi/ngx-ga4
Version:
Easily call Google Analytics 4 properties from your angular project.
231 lines (224 loc) • 8.05 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Optional, Directive, Input, NgModule, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';
/**
* Config
*/
class NgxGa4Config {
}
/**
* Google Analytics4 Service
*/
class NgxGa4Service {
/**
* constructor
* @param ng4Config
*/
constructor(ng4Config) {
if (ng4Config) {
this.measurementId = ng4Config.measurementId;
}
}
/**
* Google Analytics script load
* @param measurementId Measurement Id()
* @returns
*/
install$(measurementId) {
return new Promise((resolve, reject) => {
if (measurementId) {
this.measurementId = measurementId;
}
if (this.measurementId == null) {
reject(`Measurement ID not set`);
}
const scriptId = `ga-gtag`;
if (document.getElementById(scriptId)) {
reject(new Error(`script id ${scriptId} is already loaded`));
}
const { head } = document;
const script = document.createElement("script");
script.id = scriptId;
script.type = "text/javascript";
script.async = true;
script.onerror = () => {
reject(`GA4 script load error`);
};
script.onload = () => {
window.dataLayer = window.dataLayer || [];
resolve();
};
script.src = `https://www.googletagmanager.com/gtag/js?id=${this.measurementId}`;
head.insertBefore(script, head.firstChild);
});
}
/**
* gtag naitive call
* @param arg
*/
gtag(...arg) {
if (window.dataLayer) {
window.dataLayer.push(arguments);
}
else {
throw new Error(`NgxGa4Service not initalized.`);
}
}
/**
* gtag("js", date)
* @param date date
*/
js(date = new Date()) {
this.gtag("js", date);
}
/**
* gtag("config", ... )
* @param streamSetting
*/
config(streamSetting) {
if (streamSetting == null) {
this.gtag("config", this.measurementId);
}
else {
this.gtag("config", this.measurementId, streamSetting);
}
}
/**
* config (Group and route data)
* https://developers.google.com/tag-platform/gtagjs/routing
* @param mesureId menure id
* @param groupName group name
*/
configGroups(mesureId, groupName) {
if (mesureId == null) {
this.gtag("config", this.measurementId);
}
else if (groupName == null) {
this.gtag("config", mesureId);
}
else {
this.gtag("config", mesureId, { "groups": groupName });
}
}
/**
* gtag("event" , ... )
* @param eventName string event name
* @param eventParams? object event parameter
*/
event(eventName, eventParams) {
if (eventParams == null) {
this.gtag("event", eventName);
}
else {
this.gtag("event", eventName, eventParams);
}
}
/**
* gtag ("set" , ...)
* @param config NgxGa4GlobalSettingType
* @param value NgxGa4GlobalSettingValue
*/
set(config, value) {
this.gtag("set", config, value);
}
}
NgxGa4Service.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxGa4Service, deps: [{ token: NgxGa4Config, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
NgxGa4Service.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxGa4Service, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxGa4Service, decorators: [{
type: Injectable,
args: [{ providedIn: 'root' }]
}], ctorParameters: function () {
return [{ type: NgxGa4Config, decorators: [{
type: Optional
}] }];
} });
/**
* Directive
*/
class NgxGa4tagDirective {
constructor(ga4service, renderer, el) {
this.ga4service = ga4service;
this.renderer = renderer;
this.el = el;
}
/**
* AfterViewInit
*/
ngAfterViewInit() {
try {
if (!!this.trackOn && !!this.action) {
this.renderer.listen(this.el.nativeElement, this.trackOn, () => {
this.ga4service.event(this.action || this.trackOn, Object.assign({}, this.params));
});
}
}
catch (err) {
throw err;
}
}
}
NgxGa4tagDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxGa4tagDirective, deps: [{ token: NgxGa4Service }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
NgxGa4tagDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: NgxGa4tagDirective, selector: "[gtagEvent]", inputs: { trackOn: "trackOn", action: "action", params: "params" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxGa4tagDirective, decorators: [{
type: Directive,
args: [{
selector: '[gtagEvent]'
}]
}], ctorParameters: function () { return [{ type: NgxGa4Service }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { trackOn: [{
type: Input
}], action: [{
type: Input
}], params: [{
type: Input
}] } });
/**
* NgxGa4Module
*/
class NgxGa4Module {
constructor(parentModule) {
if (parentModule) {
throw new Error('NgxGa4Module is already loaded. Import it in the AppModule only');
}
}
/**
* Constant parameter inject to NGxGa4Service
* @param config
* @returns
*/
static forRoot(config) {
return {
ngModule: NgxGa4Module,
providers: [
{ provide: NgxGa4Config, useValue: config }
]
};
}
}
NgxGa4Module.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxGa4Module, deps: [{ token: NgxGa4Module, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule });
NgxGa4Module.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxGa4Module, declarations: [NgxGa4tagDirective], imports: [CommonModule], exports: [NgxGa4tagDirective] });
NgxGa4Module.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxGa4Module, providers: [], imports: [[CommonModule]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxGa4Module, decorators: [{
type: NgModule,
args: [{
declarations: [
NgxGa4tagDirective
],
imports: [CommonModule],
exports: [NgxGa4tagDirective],
providers: []
}]
}], ctorParameters: function () {
return [{ type: NgxGa4Module, decorators: [{
type: Optional
}, {
type: SkipSelf
}] }];
} });
/*
* Public API Surface of ngx-ga4
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxGa4Config, NgxGa4Module, NgxGa4Service, NgxGa4tagDirective };
//# sourceMappingURL=kattoshi-ngx-ga4.mjs.map