Rename GA4EventTracker to Ga4EventTracker

- modules system expects camel case, so can't find a module starting with two upper case letters from the data-module attribute 'ga4-event-tracker'
alphagov · Aug 19, 2022 · 0b11814 · 0b11814
1 parent 40f560b
commit 0b11814
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Rename GA4EventTracker to Ga4EventTracker ([PR #2911](https://github.com/alphagov/govuk_publishing_components/pull/2911))
+
 ## 30.2.0
 
 * Allow accordion to accept custom data module ([PR #2908](https://github.com/alphagov/govuk_publishing_components/pull/2908))

diff --git a/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.js b/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.js
@@ -5,16 +5,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 (function (Modules) {
   'use strict'
 
-  function GA4EventTracker (module) {
+  function Ga4EventTracker (module) {
     this.module = module
     this.trackingTrigger = 'data-ga4' // elements with this attribute get tracked
   }
 
-  GA4EventTracker.prototype.init = function () {
+  Ga4EventTracker.prototype.init = function () {
     this.module.addEventListener('click', this.trackClick.bind(this), true) // useCapture must be true
   }
 
-  GA4EventTracker.prototype.trackClick = function (event) {
+  Ga4EventTracker.prototype.trackClick = function (event) {
     if (window.dataLayer) {
       var target = this.findTrackingAttributes(event.target)
       if (target) {
@@ -76,7 +76,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
-  GA4EventTracker.prototype.findTrackingAttributes = function (clicked) {
+  Ga4EventTracker.prototype.findTrackingAttributes = function (clicked) {
     if (clicked.hasAttribute('[' + this.trackingTrigger + ']')) {
       return clicked
     } else {
@@ -85,7 +85,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   // check if an attribute exists or contains the attribute
-  GA4EventTracker.prototype.getClosestAttribute = function (clicked, attribute) {
+  Ga4EventTracker.prototype.getClosestAttribute = function (clicked, attribute) {
     var isAttributeOnElement = clicked.getAttribute(attribute)
     var containsAttribute = clicked.querySelector('[' + attribute + ']')
 
@@ -96,5 +96,5 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
-  Modules.GA4EventTracker = GA4EventTracker
+  Modules.Ga4EventTracker = Ga4EventTracker
 })(window.GOVUK.Modules)
diff --git a/spec/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.spec.js b/spec/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.spec.js
@@ -18,7 +18,7 @@ describe('Google Analytics event tracking', function () {
     beforeEach(function () {
       element.setAttribute('data-ga4', '')
       document.body.appendChild(element)
-      new GOVUK.Modules.GA4EventTracker(element).init()
+      new GOVUK.Modules.Ga4EventTracker(element).init()
     })
 
     it('does not cause an error or fire an event', function () {
@@ -31,7 +31,7 @@ describe('Google Analytics event tracking', function () {
     beforeEach(function () {
       element.setAttribute('data-ga4', 'invalid json')
       document.body.appendChild(element)
-      new GOVUK.Modules.GA4EventTracker(element).init()
+      new GOVUK.Modules.Ga4EventTracker(element).init()
     })
 
     it('does not cause an error', function () {
@@ -54,7 +54,7 @@ describe('Google Analytics event tracking', function () {
       }
       element.setAttribute('data-ga4', JSON.stringify(attributes))
       document.body.appendChild(element)
-      new GOVUK.Modules.GA4EventTracker(element).init()
+      new GOVUK.Modules.Ga4EventTracker(element).init()
     })
 
     it('pushes gtm attributes to the dataLayer', function () {
@@ -98,7 +98,7 @@ describe('Google Analytics event tracking', function () {
           'class="clickme"' +
         '></div>'
       document.body.appendChild(element)
-      new GOVUK.Modules.GA4EventTracker(element).init()
+      new GOVUK.Modules.Ga4EventTracker(element).init()
     })
 
     it('pushes gtm attributes to the dataLayer', function () {
@@ -120,7 +120,7 @@ describe('Google Analytics event tracking', function () {
       element.setAttribute('data-ga4', JSON.stringify(attributes))
       element.setAttribute('aria-expanded', 'false')
       document.body.appendChild(element)
-      new GOVUK.Modules.GA4EventTracker(element).init()
+      new GOVUK.Modules.Ga4EventTracker(element).init()
     })
 
     it('includes the expanded state in the gtm attributes', function () {
@@ -156,7 +156,7 @@ describe('Google Analytics event tracking', function () {
         '>' +
         '</details>'
       document.body.appendChild(element)
-      new GOVUK.Modules.GA4EventTracker(element).init()
+      new GOVUK.Modules.Ga4EventTracker(element).init()
     })
 
     it('includes the open state in the gtm attributes', function () {
@@ -193,7 +193,7 @@ describe('Google Analytics event tracking', function () {
           '<button aria-expanded="false">Show</button>' +
         '</div>'
       document.body.appendChild(element)
-      new GOVUK.Modules.GA4EventTracker(element).init()
+      new GOVUK.Modules.Ga4EventTracker(element).init()
     })
 
     it('includes the expanded state in the gtm attributes', function () {
@@ -234,7 +234,7 @@ describe('Google Analytics event tracking', function () {
           '<summary class="nested">Example</summary>' +
         '</details>'
       document.body.appendChild(element)
-      new GOVUK.Modules.GA4EventTracker(element).init()
+      new GOVUK.Modules.Ga4EventTracker(element).init()
     })
 
     it('includes the open state in the gtm attributes', function () {
@@ -275,7 +275,7 @@ describe('Google Analytics event tracking', function () {
           '</div>' +
         '</div>'
       document.body.appendChild(element)
-      new GOVUK.Modules.GA4EventTracker(element).init()
+      new GOVUK.Modules.Ga4EventTracker(element).init()
     })
 
     it('should not track the aria-expanded state', function () {
@@ -298,7 +298,7 @@ describe('Google Analytics event tracking', function () {
           '</details>' +
         '</div>'
       document.body.appendChild(element)
-      new GOVUK.Modules.GA4EventTracker(element).init()
+      new GOVUK.Modules.Ga4EventTracker(element).init()
     })
 
     it('should not track the open/closed state', function () {
@@ -324,7 +324,7 @@ describe('Google Analytics event tracking', function () {
           '</div>' +
         '</div>'
       document.body.appendChild(element)
-      new GOVUK.Modules.GA4EventTracker(element).init()
+      new GOVUK.Modules.Ga4EventTracker(element).init()
     })
 
     it('should track tab click url locations', function () {