diff --git a/packages/plugin-analytic-google/src/GoogleAnalytics4.js b/packages/plugin-analytic-google/src/GoogleAnalytics4.js deleted file mode 100644 index 86b23485..00000000 --- a/packages/plugin-analytic-google/src/GoogleAnalytics4.js +++ /dev/null @@ -1,168 +0,0 @@ -import { AbstractAnalytic, defaultDependencies } from '@ima/plugin-analytic'; - -const GTAG_ROOT_VARIABLE = 'gtag'; - -/** - * Google analytic 4 class - */ -export default class GoogleAnalytics4 extends AbstractAnalytic { - /** @type {import('@ima/core').Dependencies} */ - static get $dependencies() { - return [...defaultDependencies, '$Settings.plugin.analytic.google4']; - } - - set _ga4Script(value) { - const clientWindow = this._window.getWindow(); - - clientWindow[GTAG_ROOT_VARIABLE] = value; - } - - get _ga4Script() { - const clientWindow = this._window.getWindow(); - - return clientWindow[GTAG_ROOT_VARIABLE]; - } - - /** - * Initializes the Google Analytics 4 plugin. - * - * @param {import('@ima/plugin-script-loader').ScriptLoaderPlugin} scriptLoader - * @param {import('@ima/core').Window} window - * @param {import('@ima/core').Dispatcher} dispatcher - * @param {Object} config - */ - constructor(scriptLoader, window, dispatcher, config) { - super(scriptLoader, window, dispatcher, config); - - this._analyticScriptName = 'google_analytics_4'; - - this._analyticScriptUrl = `https://www.googletagmanager.com/gtag/js?id=${this._config.service}`; - - this._consentSettings = this._config.consentSettings; - - /** - * Stores page location to serve as next page hit's referrer - * to compensate for SPA browsing. - */ - this._referrer = ''; - } - /** - * Hits custom event of given with given data - * - * @param {string} eventName custom event name - * @param {Object} eventData custom event data - */ - hit(eventName, eventData) { - if (!this.isEnabled()) { - return; - } - - this._ga4Script('event', eventName, eventData); - } - - /** - * Hit page view event to analytic with defined data. - * - * @override - * @param {Object} pageData - */ - hitPageView(pageData) { - if (!this.isEnabled()) { - return; - } - const pageViewData = this._getPageViewData(pageData); - this._ga4Script('event', 'page_view', pageViewData); - this._referrer = pageViewData.page_location; - } - - /** - * Updates user consents in Google Analytics script - * - * @param {Object} purposeConsents Purpose Consents of TCModel, see: https://www.npmjs.com/package/@iabtcf/core#tcmodel - */ - updateConsent(purposeConsents) { - this._applyPurposeConsents(purposeConsents); - - this._ga4Script('consent', 'update', { - ...this._consentSettings, - }); - } - - /** - * @override - * @inheritdoc - */ - _applyPurposeConsents(purposeConsents) { - if (purposeConsents && typeof purposeConsents === 'object') { - if (purposeConsents['1']) { - this._consentSettings.analytics_storage = 'granted'; - } else { - this._consentSettings.analytics_storage = 'denied'; - } - } - } - - /** - * @override - * @inheritdoc - */ - _configuration() { - if ( - this.isEnabled() || - !this._ga4Script || - typeof this._ga4Script !== 'function' - ) { - return; - } - - this._enable = true; - - this._ga4Script('consent', 'default', { - ...this._consentSettings, - wait_for_update: this._config.waitForUpdateTimeout, - }); - - this._ga4Script('js', new Date()); - - this._ga4Script('config', this._config.service, { - send_page_view: false, - }); - } - - /** - * Returns page view data derived from pageData param. - * - * @param {Object} pageData - * @returns {Object} pageViewData - */ - _getPageViewData(pageData) { - const page_location = this._window.getUrl(); - const clientDocument = this._window?.getDocument(); - const page_referrer = this._referrer || clientDocument?.referrer; - - return { - page_path: pageData.path, - page_location, - page_referrer, - page_route: pageData?.route?.getName() || '', - page_status: pageData?.response?.status, - page_title: clientDocument.title || '', - }; - } - - /** - * @override - * @inheritdoc - */ - _createGlobalDefinition() { - const clientWindow = this._window.getWindow(); - - clientWindow.dataLayer = clientWindow.dataLayer || []; - - this._ga4Script = function () { - clientWindow.dataLayer.push(arguments); - }; - - this._configuration(); - } -} diff --git a/packages/plugin-analytic-google/src/GoogleAnalytics4.ts b/packages/plugin-analytic-google/src/GoogleAnalytics4.ts index ff6e26b1..63eb58df 100644 --- a/packages/plugin-analytic-google/src/GoogleAnalytics4.ts +++ b/packages/plugin-analytic-google/src/GoogleAnalytics4.ts @@ -20,6 +20,7 @@ export type AnalyticGoogleSettings = { */ export class GoogleAnalytics4 extends AbstractAnalytic { #config: AnalyticGoogleSettings; + #referrer: string; _consentSettings?: ConsentSettings; static get $dependencies(): Dependencies { @@ -47,6 +48,8 @@ export class GoogleAnalytics4 extends AbstractAnalytic { /** * Initializes the Google Analytics 4 plugin. + * @param config + * @param {...any} rest */ constructor( config: AnalyticGoogleSettings, @@ -55,6 +58,7 @@ export class GoogleAnalytics4 extends AbstractAnalytic { super(...rest); this.#config = config; + this.#referrer = ''; this._analyticScriptName = 'google_analytics_4'; @@ -85,7 +89,9 @@ export class GoogleAnalytics4 extends AbstractAnalytic { return; } - this._ga4Script('event', 'page_view', this._getPageViewData(pageData)); + const pageViewData = this._getPageViewData(pageData); + this._ga4Script('event', 'page_view', pageViewData); + this.#referrer = pageViewData.page_location; } /** @@ -150,10 +156,17 @@ export class GoogleAnalytics4 extends AbstractAnalytic { * Returns page view data derived from pageData param. */ _getPageViewData(pageData: Record) { + const page_location = this._window.getUrl(); + const clientDocument = this._window?.getDocument(); + const page_referrer = this.#referrer || clientDocument?.referrer; + return { - page: pageData.path, - location: this._window.getUrl(), - title: document.title || '', + page_path: pageData.path, + page_location, + page_referrer, + page_route: pageData?.route?.getName() || '', + page_status: pageData?.response?.status, + page_title: clientDocument?.title || '', }; }