ng-easycommerce-v18 0.0.1

package/projects/ng-easycommerce/src/lib/ec-services/analytics/google-analytics.service.ts

@@ -0,0 +1,284 @@
+import { DOCUMENT } from '@angular/common';
+import { inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
+import { AnalyticEventKey } from '../../interfaces';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs';
+/**
+ * Funcion que sera dada por el script que se inserta en el inicializador de Google Analytics.
+ */
+declare var gtag: Function;
+declare var dataLayer: any[];
+
+/**
+ * Servicio encargado de manejar el analytics de google.
+ * @class GoogleAnalyticsService
+ */
+@Injectable({
+	providedIn: 'root'
+})
+export class GoogleAnalyticsService {
+	/**
+	 * Se encarga de crear el elemento HTML con las configuraciones para 
+	 * que se pueda ejecutar el servicio.
+	 */
+	private renderer: Renderer2;
+	/**
+     * Indica cuando el servicio esta habilitado.
+     */
+	private enabled: boolean = false;
+
+	private rendererFactory: RendererFactory2 = inject(RendererFactory2);
+	private document: any = inject(DOCUMENT);
+	/**
+	 * Servicio de ruteo de angular.
+	 */
+	private router:Router = inject(Router);
+
+	constructor() {
+		this.renderer = this.rendererFactory.createRenderer(null, null);
+	}
+	/**
+	 * Inicializa el Servicio de analytics con sus configuraciones.
+	 * @param gtm_id id provisto por Google Tag Manager.
+	 */
+	initialize(gtm_id: string) {
+		if (!document.getElementById('google_tag_manager')) {
+			console.log('hay elemento')
+			const declaration = this.renderer.createElement('script');
+			declaration.async = true;
+			declaration.id = 'google_tag_manager';
+			declaration.src = `https://www.googletagmanager.com/gtag/js?id=${gtm_id}`;
+			const initialization = this.renderer.createElement('script');
+			initialization.text = `window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '${gtm_id}')`;
+			this.renderer.appendChild(this.document.head, initialization);
+			this.renderer.appendChild(this.document.head, declaration);
+			this.enabled = true;
+		}
+		setTimeout(() => this.startListeningPageViews(gtm_id), 1000);
+	}
+	/**
+	 * 
+	 * @param gtm_id 
+	 */
+	private startListeningPageViews(gtm_id:any){
+		this.router.events.pipe(
+			filter(event => event instanceof NavigationEnd)
+		).subscribe((event: NavigationEnd) => {
+			gtag('config', gtm_id, {
+				'page_path': event.urlAfterRedirects
+			})
+		})
+	}	
+	/**
+	 * Ejecuta el evento pasado por parametro. 
+	 * @param event_name Nombre del evento.
+	 * @param data Data extra para agregar al evento.
+	 * @returns 
+	 */
+	callEvent(event_name: AnalyticEventKey, data = {}){
+		if (!this.enabled) return;
+		let event = this.translateEventName(event_name);
+		event && gtag('event', this.translateEventName(event_name), this.evalEvent(event_name, data));
+	}
+	/**
+     * Traduce el evento recibido y devuelve el nombre de la función que lo va a tratar.
+     * @param event_name 
+     * @returns 
+     */
+	translateEventName(event_name: AnalyticEventKey){
+		switch (event_name) {
+			case 'view_item': return 'view_item';
+			case 'view_item_list': return 'view_item_list';
+			case 'checkout_init': return 'begin_checkout';
+			case 'shipping_info': return 'add_shipping_info';
+			case 'add_payment_info': return 'add_payment_info';
+			case 'purchase': return 'purchase';
+			case 'add_to_cart': return 'add_to_cart';
+			case 'remove_from_cart': return 'remove_from_cart';
+			case 'sign_up': return 'sign_up';
+			default: return null;
+			//default: return event_name;
+		}
+	}
+	/**
+     * Evalua el evento y devuelve los datos de las funciones relacionadas.
+     * @param event_name Nombre del evento
+     * @param data Data extra para agregar al evento
+     * @returns 
+     */
+	evalEvent(event_name:AnalyticEventKey, data:any){
+		switch (event_name) {
+			case 'view_item': return this.toViewItem(data);
+			case 'view_item_list': return this.toViewItemList(data);
+			case 'checkout_init': return this.toCheckoutInit(data);
+			case 'shipping_info': return this.toShippingInfo(data);
+			case 'add_payment_info': return this.toPaymentInfo(data);
+			case 'purchase': return this.toPurchase(data);
+			case 'add_to_cart': return this.toAddToCart(data);
+			case 'remove_from_cart': return this.toRemoveToCart(data);
+			case 'sign_up': return this.toSignUp(data);
+			default: return data;
+		}
+	}
+	/**
+     * Evento que se dispara cuando se quiere comprar un producto.
+     * @param data 
+     * @returns 
+     */
+	private toPurchase(data:any){
+		return {
+			coupon: this.toCartDiscount(data),
+			currency: data.currency,
+			shipping: data.totals.shipping,
+			tax: data.totals.taxes,
+			value: data.totals.total,
+			transaction_id: data.number,
+			items: data.items.map((item:any) => ({
+				id: item.product.id,
+				name: item.product.name,
+				category: item.product.category,
+				price: item.total,
+				quantity: item.quantity
+			}))
+		}
+	}
+	/**
+     * Evento que se dispara cuando se inicializa en checkout.
+     * @param data 
+     * @returns 
+     */
+	private toCheckoutInit(data:any){
+		return {
+			coupon: this.toCartDiscount(data),
+			currency: data.currency || "USD",
+			items: data.items.map((item:any) => ({
+				id: item.product.id,
+				name: item.product.name,
+				category: item.product.category,
+				price: item.total,
+				quantity: item.quantity
+			})),
+			value: data.totals?.total || 0,
+		}
+	}
+	/**
+	 * Evento que se dispara con los descuentos en el carrito.
+	 * @param data 
+	 * @returns 
+	 */
+	private toCartDiscount(data:any){
+		let strDiscount = ''
+		strDiscount = data.cartDiscounts.map((itemDiscount:any) => itemDiscount?.type).join()
+		return strDiscount == '' ? 'not-discount' : strDiscount
+	}
+	/**
+     * Evento que se dispara cuando se agrega un producto al carrito. 
+     * @param data 
+     * @returns 
+     */
+	private toAddToCart(data:any){
+		let lastProduct = data.items?.length && data.items[data.items.length - 1]
+		return {
+			currency: data.currency || "USD",
+			items: [this.toItem({ quantity: lastProduct.quantity, ...lastProduct.product })],
+			value: lastProduct.total || 0,
+		}
+	}
+	/**
+     * Cambia la variable **enabled** a `false`
+     * @returns 
+     */
+	disable() {this.enabled = false; }
+	/**
+	 * Evento que se dispara cuando se interactua a las vista del producto.
+	 * @param product 
+	 * @returns 
+	 */
+	private toViewItem(product:any){
+		return {
+			currency: product.currency,
+			items: [this.toItem(product)],
+			value: product.variants[0]?.saleprice || product.variants[0]?.price,
+		}
+	}
+	/**
+	 * Evento que se dispara cuando se interactua con el listado de productos.
+	 * @param data 
+	 * @returns 
+	 */
+	private toViewItemList(data:any){
+		return {
+			items: data.products.map((product:any) => this.toItem(product)),
+			item_list_name: data.item_list_name || 'Collection',
+			item_list_id: data.item_list_id || 'collection'
+		}
+	}
+	/**
+	 * Evento que se dispara cuando se quita un item del carrito.
+	 * @param product 
+	 * @returns 
+	 */
+	private toRemoveToCart(product:any){
+		let productParam = product.product
+		return {
+			currency: product.currency || "USD",
+			items: [this.toItem({ quantity: product.quantity, ...productParam })],
+			value: (productParam.variants[0]?.saleprice || productParam.variants[0]?.price) * product.quantity || 1,
+		}
+	}
+
+	private toItem = (product:any) => ({
+		item_name: product.name,
+		item_id: product.id,
+		item_brand: product.attributes?.length ? product.attributes[0].name : '',
+		item_category: product.category,
+		price: product.variants[0]?.saleprice || product.variants[0]?.price,
+		quantity: product.quantity || 1,
+	})
+	/**
+     * Evento que se dispara cuando se consulta la información de pago.
+     * @param data 
+     * @returns 
+     */
+	private toPaymentInfo(data:any){
+		return {
+			coupon: this.toCartDiscount(data),
+			currency: data.currency || "USD",
+			items: data.items.map((item:any) => ({
+				id: item.product.id,
+				name: item.product.name,
+				category: item.product.category,
+				price: item.total,
+				quantity: item.quantity
+			})),
+			payment_type: data.payments[0]?.method?.code || 'not-payments',
+			value: data.totals?.total || 0,
+		}
+	}
+	/**
+	 * Evento que se dispara cuando se interactua con los métodos de envío.
+	 * @param data 
+	 * @returns 
+	 */
+	private toShippingInfo(data:any){
+		return {
+			coupon: this.toCartDiscount(data),
+			currency: data.currency || "USD",
+			items: data.items.map((item:any) => ({
+				id: item.product.id,
+				name: item.product.name,
+				category: item.product.category,
+				price: item.total,
+				quantity: item.quantity
+			})),
+			shipping_tier: data.shipments[0]?.method?.code || 'not-shipping',
+			value: data.totals?.total || 0,
+		}
+	}
+
+	private toSignUp(data:any){
+		return {
+			...data
+		}
+	}
+}

package/projects/ng-easycommerce/src/lib/ec-services/analytics/gtm.service.ts

@@ -0,0 +1,413 @@
+import { afterRender, inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
+import { AnalyticEventKey, GoogleTagManagerConfig } from '../../interfaces';
+import { NavigationEnd, Router } from '@angular/router';
+import { DOCUMENT } from '@angular/common';
+/**
+ * Servicio que se encarga de manejar el analytics de GTM.
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class GTMService {
+    /**
+     * Indica si se esta cargando el servicio.
+     */
+    private isLoaded: boolean = false;
+    /**
+     * Indica cuando el servicio esta habilitado.
+     */
+    private enabled: boolean = false;
+    /**
+     * Se encarga de crear el elemento HTML con las configuraciones para 
+     * que se pueda ejecutar el servicio.
+     */
+    private renderer: Renderer2;
+    /**
+     * Almacena el objecto window del navegador.
+     */
+    private window: any;
+
+    private rendererFactory: RendererFactory2 = inject(RendererFactory2);
+    private document: any = inject(DOCUMENT);
+    /**
+     * Servicio de ruteo de angular.
+     */
+    private router: Router = inject(Router);
+    /**
+     * Configuración de Google Tag Manager.
+     */
+    private config: GoogleTagManagerConfig = { id: null }
+
+    constructor() {
+        this.renderer = this.rendererFactory.createRenderer(null, null);
+        afterRender(() => {
+            this.window = window;
+        })
+    }
+    /**
+     * Obtiene el dataLayer del objecto window
+     * @returns 
+     */
+    public getDataLayer(): any[] {
+        const window = this.window;
+        window.dataLayer = window.dataLayer || [];
+        return window.dataLayer;
+    }
+    /**
+     * Agrega datos al dataLayer.
+     * @param obj 
+     */
+    private pushOnDataLayer(obj: object): void {
+        const dataLayer = this.getDataLayer();
+        dataLayer.push(obj);
+    }
+    /**
+     * Agrega el script de GTM para que empiece a capturar eventos.
+     * @returns 
+     */
+    public addGtmToDom(): Promise<boolean> {
+        return new Promise(
+            (resolve, reject) => {
+                if (this.isLoaded) {
+                    return resolve(this.isLoaded);
+                }
+                //const doc = this.browserGlobals.documentRef();
+                this.pushOnDataLayer({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
+
+                const gtmScript = this.document.createElement('script') //doc.createElement('script');
+                gtmScript.id = 'GTMscript';
+                gtmScript.async = true;
+                gtmScript.src = this.applyGtmQueryParams(this.config["gtm_resource_path"] ? this.config["gtm_resource_path"] : 'https://www.googletagmanager.com/gtm.js');
+                gtmScript.addEventListener('load', () => {
+                    return resolve(this.isLoaded = true);
+                });
+                gtmScript.addEventListener('error', () => {
+                    return reject(false);
+                });
+                this.document.head.insertBefore(gtmScript, this.document.head.firstChild);
+            }
+        );
+    }
+
+    private applyGtmQueryParams(url: string): string {
+        if (url.indexOf('?') === -1) {
+            url += '?';
+        }
+        return (url + Object.keys(this.config).filter((k) => this.config[k]).map((k) => `${k}=${this.config[k]
+            }`).join('&'));
+    }
+    /**
+     * Inicializa el Servicio de analytics con sus configuraciones.
+     * @param config Configuraciones de Google Tag Manager
+     */
+    public initialize(config: GoogleTagManagerConfig) {
+        this.config = config || this.config;
+        this.addGtmToDom().then(() => {
+            this.router.events.forEach(item => {
+                if (item instanceof NavigationEnd) {
+                    const gtmTag = {
+                        event: 'page',
+                        pageName: item.url
+                    };
+                    this.pushTag(gtmTag);
+                }
+            });
+        })
+    }
+
+    public pushTag(item: object): Promise<void> {
+        return new Promise<void>((resolve, reject) => {
+            if (!this.isLoaded) {
+                this.addGtmToDom().then(() => {
+                    this.pushOnDataLayer(item);
+                    return resolve();
+                }).catch(() => reject());
+            } else {
+                this.pushOnDataLayer(item);
+                return resolve();
+            }
+        });
+    }
+    /**
+     * Ejecuta el evento pasado por parametro. 
+     * @param event_name Nombre del evento.
+     * @param data Data extra para agregar al evento.
+     * @returns 
+     */
+    callEvent(event_name: AnalyticEventKey, data = {}) {
+        if (!this.isLoaded) return;
+        let event = this.translateEventName(event_name);
+        event && this.pushTag({ ecommerce: null })
+        event && this.pushTag({ 'event': this.translateEventName(event_name), ecommerce: this.evalEvent(event_name, data) })
+    }
+    /**
+     * Traduce el evento recibido y devuelve el nombre de la función que lo va a tratar.
+     * @param event_name 
+     * @returns 
+     */
+    translateEventName(event_name: AnalyticEventKey) {
+        switch (event_name) {
+            case 'view_item': return 'view_item';
+            case 'view_item_list': return 'view_item_list';
+            case 'checkout_init': return 'begin_checkout';
+            case 'shipping_info': return 'add_shipping_info';
+            case 'add_payment_info': return 'add_payment_info';
+            case 'purchase': return 'purchase';
+            case 'add_to_cart': return 'add_to_cart';
+            case 'remove_from_cart': return 'remove_from_cart';
+            case 'sign_up': return 'sign_up';
+            case 'select_promotion': return 'select_promotion';
+            case 'select_item': return 'select_item';
+            default: return null;
+        }
+    }
+    /**
+     * Evalua el evento y devuelve los datos de las funciones relacionadas.
+     * @param event_name Nombre del evento
+     * @param data Data extra para agregar al evento
+     * @returns 
+     */
+    evalEvent(event_name: AnalyticEventKey, data: any) {
+        switch (event_name) {
+            case 'view_item': return this.toViewItem(data);
+            case 'view_item_list': return this.toViewItemList(data);
+            case 'checkout_init': return this.toCheckoutInit(data);
+            case 'shipping_info': return this.toShippingInfo(data);
+            case 'add_payment_info': return this.toPaymentInfo(data);
+            case 'purchase': return this.toPurchase(data);
+            case 'add_to_cart': return this.toAddToCart(data);
+            case 'remove_from_cart': return this.toRemoveToCart(data);
+            case 'sign_up': return this.toSignUp(data);
+            case 'select_promotion': return this.toSelectPromotion(data);
+            case 'select_item': return this.toSelectItem(data);
+            default: return data;
+        }
+    }
+    /**
+     * Evento que se dispara cuando se quiere comprar un producto.
+     * @param data 
+     * @returns 
+     */
+    private toPurchase(data: any) {
+        return {
+            coupon: this.toCartDiscount(data),
+            currency: data.currency,
+            shipping: data.totals.shipping,
+            tax: data.totals.taxes,
+            value: data.totals.total,
+            transaction_id: data.number,
+            countItems: data.items?.length || 0,
+            items: data.items.map((item: any) => ({
+                item_id: item.product.id,
+                item_name: item.product.name,
+                //coupon:'',
+                discount: item.product.discount || 0,
+                //index:'',
+                item_brand: item.product.attributes?.length ? item.product.attributes[0].name : '',
+                item_category: item.product.category,
+                item_variant: item.product.variants[0]?.code || '',
+                //location_id: '',
+                price: item.product.variants[0]?.saleprice || item.product.variants[0]?.price,
+                quantity: item.quantity || 1,
+            }))
+        }
+    }
+    /**
+     * Evento que se dispara cuando se inicializa en checkout.
+     * @param data 
+     * @returns 
+     */
+    private toCheckoutInit(data: any) {
+        return {
+            coupon: this.toCartDiscount(data),
+            currency: data.currency || "USD",
+            items: data.items.map((item: any) => ({
+                item_id: item.product.id,
+                item_name: item.product.name,
+                //coupon:'',
+                discount: item.product.discount || 0,
+                //index:'',
+                item_brand: item.product.attributes?.length ? item.product.attributes[0].name : '',
+                item_category: item.product.category,
+                //item_list_id: '',
+                //item_list_name: '',
+                item_variant: item.product.variants[0]?.code || '',
+                //location_id: '',
+                price: item.product.variants[0]?.saleprice || item.product.variants[0]?.price,
+                quantity: item.quantity || 1,
+            })),
+            value: data.totals?.total || 0,
+        }
+    }
+    /**
+     * Evento que se dispara con los descuentos en el carrito.
+     * @param data 
+     * @returns 
+     */
+    private toCartDiscount(data: any) {
+        let strDiscount = ''
+        strDiscount = data.cartDiscounts.map((itemDiscount: any) => itemDiscount?.type).join()
+        return strDiscount == '' ? 'not-discount' : strDiscount
+    }
+    /**
+     * Evento que se dispara cuando se agrega un producto al carrito. 
+     * @param data 
+     * @returns 
+     */
+    private toAddToCart(data: any) {
+        let lastProduct = data.items?.length && data.items[data.items.length - 1]
+        return {
+            currency: data.currency || "USD",
+            items: [this.toItem({ quantity: lastProduct.quantity, ...lastProduct.product })],
+            value: lastProduct.total || 0,
+        }
+    }
+    /**
+     * Cambia la variable **enabled** a `false`
+     * @returns 
+     */
+    disable() { this.enabled = false }
+    /**
+     * Evento que se dispara cuando se interactua a las vista del producto.
+     * @param product 
+     * @returns 
+     */
+    private toViewItem(product: any) {
+        return {
+            currency: product.currency,
+            value: product.price,
+            items: [this.toItem(product)]
+
+        }
+    }
+    /**
+     * Evento que se dispara cuando se interactua con el listado de productos.
+     * @param data 
+     * @returns 
+     */
+    private toViewItemList(data: any) {
+        return {
+            items: data.products.map((product: any) => this.toItem(product)),
+            item_list_name: data.item_list_name || 'Collection',
+            item_list_id: data.item_list_id || 0
+        }
+
+
+    }
+    /**
+     * Evento que se dispara cuando se quita un item del carrito.
+     * @param product 
+     * @returns 
+     */
+    private toRemoveToCart(product: any) {
+        let productParam = product.product
+        return {
+            currency: product.currency || "USD",
+            items: [this.toItem({ quantity: product.quantity, ...productParam })],
+            value: (productParam.variants[0]?.saleprice || productParam.variants[0]?.price) * product.quantity || 1,
+        }
+    }
+
+    private toItem = (product: any) => ({
+        item_id: product.id,
+        item_name: product.name,
+        //coupon:'',
+        discount: product.discount || 0,
+        //index:'',
+        item_brand: product.attributes?.length ? product.attributes[0].name : '',
+        item_category: product.category,
+        //item_list_id: '',
+        //item_list_name: '',
+        item_variant: product.variants[0]?.code || '',
+        //location_id: '',
+        price: product.variants[0]?.saleprice || product.variants[0]?.price,
+        quantity: product.quantity || 1,
+    })
+    /**
+     * Evento que se dispara cuando se consulta la información de pago.
+     * @param data 
+     * @returns 
+     */
+    private toPaymentInfo(data: any) {
+        return {
+            coupon: this.toCartDiscount(data),
+            currency: data.currency || "USD",
+            payment_type: data.payments[0]?.method?.code || 'not-payments',
+            value: data.totals?.total || 0,
+            items: data.items.map((item: any) => ({
+                item_id: item.product.id,
+                item_name: item.product.name,
+                //coupon:'',
+                discount: item.product.discount || 0,
+                //index:'',
+                item_brand: item.product.attributes?.length ? item.product.attributes[0].name : '',
+                item_category: item.product.category,
+                //item_list_id: '',
+                //item_list_name: '',
+                item_variant: item.product.variants[0]?.code || '',
+                //location_id: '',
+                price: item.product.variants[0]?.saleprice || item.product.variants[0]?.price,
+                quantity: item.quantity || 1,
+            })),
+        }
+    }
+    /**
+     * Evento que se dispara cuando se interactua con los métodos de envío.
+     * @param data 
+     * @returns 
+     */
+    private toShippingInfo(data: any) {
+        return {
+            coupon: this.toCartDiscount(data),
+            currency: data.currency || "USD",
+            shipping_tier: data.shipments[0]?.method?.code || 'not-shipping',
+            value: data.totals?.total || 0,
+            items: data.items.map((item: any) => ({
+                item_id: item.product.id,
+                item_name: item.product.name,
+                //coupon:'',
+                discount: item.product.discount || 0,
+                //index:'',
+                item_brand: item.product.attributes?.length ? item.product.attributes[0].name : '',
+                item_category: item.product.category,
+                //item_list_id: '',
+                //item_list_name: '',
+                item_variant: item.product.variants[0]?.code || '',
+                //location_id: '',
+                price: item.product.variants[0]?.saleprice || item.product.variants[0]?.price,
+                quantity: item.quantity || 1,
+            })),
+        }
+    }
+
+    private toSignUp(data: any) {
+        return {
+            ...data
+        }
+    }
+    /**
+     * Evento que se dispara cuando se interactua con una promoción.
+     * @param data 
+     * @returns 
+     */
+    private toSelectPromotion(data: any) {
+        console.log(data);
+        return {
+            promotion_id: data.id || '',
+            promotion_name: data.code || data.name,
+            promotion_title: data.subtitle,
+            location_id: data.priority || 0
+        }
+    }
+    /**
+     * Evento que se disapra cuando se interactua al seleccionar un item.
+     * @param data 
+     * @returns 
+     */
+    private toSelectItem(data: any) {
+        console.log(data);
+        return {
+            items: this.toItem(data)
+        }
+    }
+}

package/projects/ng-easycommerce/src/lib/ec-services/analytics/index.ts

@@ -0,0 +1,6 @@
+export * from './facebook-pixel.service';
+export * from './analytics.service';
+export * from './doppler.service';
+export * from './metricool-pixel.service';
+export * from './google-analytics.service';
+export * from './gtm.service';