From 53c703913740390c12ebabe52b869916fe66032f Mon Sep 17 00:00:00 2001 From: James Chan Date: Tue, 25 Oct 2022 11:21:27 +0100 Subject: [PATCH] Address PR comments --- CHANGELOG.md | 2 +- .../analytics-ga4/ga4-ecommerce-tracker.js | 4 ++-- docs/analytics-ga4/ga4-ecommerce-tracker.md | 19 +++++++++++++++---- 3 files changed, 18 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0676968f54..79ad3be726 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ ## Unreleased -* **BREAKING:** Fix referrer bug ([PR #2906](https://github.com/alphagov/finder-frontend/pull/2906)) +* **BREAKING:** Fix referrer bug ([PR #3032](https://github.com/alphagov/govuk_publishing_components/pull/3032)) ## 31.2.0 diff --git a/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-ecommerce-tracker.js b/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-ecommerce-tracker.js index 93e187fc05..65f1d0c93e 100644 --- a/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-ecommerce-tracker.js +++ b/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-ecommerce-tracker.js @@ -13,8 +13,8 @@ if (window.dataLayer) { /* The dynamicPageViewData object is only passed to the init() function as a result of an AJAX request (in live_search.js in the finder-frontend repository). Otherwise it will not be available and this indicates a fresh page load. - This is needed to trigger a fresh pageViewTracker push to the dataLayer on dynamic page updates (line 30) and to prevent multiple - click listeners from being applied (line 42). */ + This is needed to trigger a fresh pageViewTracker push to the dataLayer on dynamic page updates and to prevent multiple + click listeners from being applied on this.searchResultsBlocks elements. */ var isNewPageLoad = !dynamicPageViewData /* The data-ga4-ecommerce attribute may be present on several DOM elements e.g. search results and spelling diff --git a/docs/analytics-ga4/ga4-ecommerce-tracker.md b/docs/analytics-ga4/ga4-ecommerce-tracker.md index 29ccbaa280..05aa172185 100644 --- a/docs/analytics-ga4/ga4-ecommerce-tracker.md +++ b/docs/analytics-ga4/ga4-ecommerce-tracker.md @@ -18,15 +18,26 @@ In `live_search.js` in the `finder-frontend` repository (https://github.com/alph ```JavaScript GOVUK.analyticsGa4.Ga4EcommerceTracker.init(dynamicPageViewData) - -/* The init() function takes an object (dynamicPageViewData) as an optional parameter to detect whether dynamic updates have been made to the page via AJAX requests. The values in the object are then used to determine what is pushed to the dataLayer. If a parameter is not passed, this indicates a fresh page load (e.g. by refreshing the page or using the pagination) and that the page has not been dynamically updated via JS. */ ``` +The init() function takes an object (`dynamicPageViewData`) as an optional parameter to detect whether dynamic updates have been made to the page via AJAX requests. The values in the object are then used to determine what is pushed to the dataLayer. If a parameter is not passed, this indicates a fresh page load (e.g. by refreshing the page or using the pagination) and that the page has not been dynamically updated via JS. + Unlike the other GA4 tracking scripts in this repository, ecommerce tracking is not initialised by `init-ga4.js`. Instead, it is initialised by the JS that runs on finder pages (specifically, the `LiveSearch.prototype.Ga4EcommerceTracking()` function). It is called: -On page load (where no parameters are passed) - https://github.com/alphagov/finder-frontend/blob/main/app/assets/javascripts/live_search.js#L55 +On page load (where no parameters are passed) e.g. + +``` +this.Ga4EcommerceTracking() +``` + +And whenever search results are updated (where an object parameter is passed) e.g. -And whenever search results are updated (where an object parameter is passed) - https://github.com/alphagov/finder-frontend/blob/main/app/assets/javascripts/live_search.js#L121 +``` +this.Ga4EcommerceTracking({ + dynamic: 'true', + referrer: this.referrer +}) +``` Note: ecommerce tracking will only run if there is an element which has the `data-ga4-ecommerce` attribute. If the script can't find an element with this attribute, it will stop running.