ng-easycommerce-v18 0.0.1 → 0.0.3

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

@@ -1,284 +0,0 @@
-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

@@ -1,413 +0,0 @@
-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)
-        }
-    }
-}