@recras/online-booking-js 1.10.2 → 2.0.0

package/src/eventHelper.js

@@ -48,54 +48,50 @@ class RecrasEventHelper {
         return this.eventsEnabled.includes(name);
     }
 
-    sendEvent(cat, action, label = undefined, value = undefined) {
-        let event;
-
-        try {
-            event = new Event(RecrasEventHelper.PREFIX_GLOBAL + ':' + cat + ':' + action);
-        } catch (e) {
-            // IE
-            event = document.createEvent('Event');
-            event.initEvent(action, true, true);
+    ga4EventMap(action) {
+        let map = {
+            [RecrasEventHelper.EVENT_BOOKING_PACKAGE_CHANGED]: 'select_content',
+            [RecrasEventHelper.EVENT_BOOKING_REDIRECT_PAYMENT]: 'begin_checkout',
+            [RecrasEventHelper.EVENT_VOUCHER_TEMPLATE_CHANGED]: 'select_content',
+            [RecrasEventHelper.EVENT_VOUCHER_REDIRECT_PAYMENT]: 'begin_checkout',
+        };
+
+        if (map[action] === undefined) {
+            return false;
+        }
+        return map[action];
+    }
+
+    sendAnalyticsEvent(cat, action, label = undefined, value = undefined, ga4Value = undefined) {
+        if (typeof window.gtag !== 'function') {
+            return;
+        }
+
+        if (this.ga4EventMap(action) && ga4Value) {
+            // v4
+            window.gtag('event', this.ga4EventMap(action), ga4Value);
+            return;
+        }
+
+        // Global Site Tag (v3)
+        let eventData = {
+            event_category: RecrasEventHelper.PREFIX_GLOBAL + ':' + cat,
+        };
+        if (label) {
+            eventData.event_label = label;
         }
+        if (value) {
+            eventData.value = value;
+        }
+        window.gtag('event', action, eventData);
+    }
 
+    sendEvent(cat, action, label = undefined, value = undefined, ga4Value = undefined) {
         if (this.analyticsEnabled && this.eventEnabled(action)) {
-            if (typeof window.gtag === 'function') {
-                // Global Site Tag - the more modern variant
-                let eventData = {
-                    event_category: RecrasEventHelper.PREFIX_GLOBAL + ':' + cat,
-                };
-                if (label) {
-                    eventData.event_label = label;
-                }
-                if (value) {
-                    eventData.value = value;
-                }
-                window.gtag('event', action, eventData);
-            } else if (typeof window.ga === 'function') {
-                // "Old" Google Analytics
-                let eventData = {
-                    hitType: 'event',
-                    eventCategory: RecrasEventHelper.PREFIX_GLOBAL + ':' + cat,
-                    eventAction: action,
-                };
-                if (label) {
-                    eventData.eventLabel = label;
-                }
-                if (value) {
-                    eventData.eventValue = value;
-                }
-                // Google Analytics via Google Tag Manager doesn't work without a prefix
-                window.ga(function() {
-                    let prefix = window.ga.getAll()[0].get('name');
-                    if (prefix) {
-                        prefix += '.';
-                    }
-                    window.ga(prefix + 'send', eventData);
-                })
-            }
+            this.sendAnalyticsEvent(cat, action, label, value, ga4Value);
         }
 
+        const event = new Event(RecrasEventHelper.PREFIX_GLOBAL + ':' + cat + ':' + action);
         return document.dispatchEvent(event);
     }
 

package/src/vouchers.js

@@ -43,6 +43,16 @@ class RecrasVoucher {
         this.element.insertAdjacentHTML('beforeend', msg);
     }
 
+    formatGA4Item() {
+        return [
+            {
+                item_name: this.selectedTemplate.name,
+                price: this.selectedTemplate.price,
+                quantity: parseInt(this.findElement('#number-of-vouchers').value),
+            }
+        ];
+    }
+
     buyTemplate() {
         let status = this.contactForm.checkRequiredCheckboxes();
         if (!status) {
@@ -53,7 +63,7 @@ class RecrasVoucher {
             RecrasEventHelper.PREFIX_VOUCHER,
             RecrasEventHelper.EVENT_VOUCHER_VOUCHER_SUBMITTED,
             this.selectedTemplate.name,
-            this.selectedTemplate.id
+            Math.round(this.totalPrice())
         );
         this.findElement('.buyTemplate').setAttribute('disabled', 'disabled');
 
@@ -72,7 +82,12 @@ class RecrasVoucher {
                         RecrasEventHelper.PREFIX_VOUCHER,
                         RecrasEventHelper.EVENT_VOUCHER_REDIRECT_PAYMENT,
                         null,
-                        Math.round(this.totalPrice())
+                        Math.round(this.totalPrice()),
+                        {
+                            currency: this.languageHelper.currency,
+                            value: this.totalPrice(),
+                            items: this.formatGA4Item(),
+                        }
                     );
                     window.top.location.href = json.payment_url;
                 } else {
@@ -94,7 +109,11 @@ class RecrasVoucher {
             RecrasEventHelper.PREFIX_VOUCHER,
             RecrasEventHelper.EVENT_VOUCHER_TEMPLATE_CHANGED,
             null,
-            templateID
+            templateID,
+            {
+                content_type: 'voucher',
+                item_id: templateID,
+            }
         );
     }
 

package/test/js-unit/recrasOptionsSpec.js

@@ -108,7 +108,6 @@ describe('RecrasOptions', () => {
             let options = new RecrasOptions({
                 element: document.createElement('div'),
                 recras_hostname: 'demo.recras.nl',
-                analytics: function() {},
                 analyticsEvents: 'foo',
             });
             expect(options.getAnalyticsEvents().length).toBeGreaterThan(0);
@@ -118,7 +117,6 @@ describe('RecrasOptions', () => {
             let options = new RecrasOptions({
                 element: document.createElement('div'),
                 recras_hostname: 'demo.recras.nl',
-                analytics: function() {},
                 analyticsEvents: [],
             });
             expect(options.getAnalyticsEvents().length).toBeGreaterThan(0);
@@ -128,7 +126,6 @@ describe('RecrasOptions', () => {
             let options = new RecrasOptions({
                 element: document.createElement('div'),
                 recras_hostname: 'demo.recras.nl',
-                analytics: function() {},
                 analyticsEvents: ['foo', RecrasEventHelper.EVENT_BOOKING_BOOKING_SUBMITTED],
             });
             expect(options.getAnalyticsEvents()).toEqual([RecrasEventHelper.EVENT_BOOKING_BOOKING_SUBMITTED]);

package/upgrading.md

@@ -1,3 +1,11 @@
+# 1.11.0 -> 2.0.0
+* Support for Google Analytics v2 has been dropped.
+* Support for Internet Explorer (all versions) and old Edge (12-15) has been removed.
+* Option `showSubmit` has been removed. It was renamed to `standalone` in version 1.3.0
+
+# 1.10.2 -> 1.10.3
+* The value of "BuyInProgress" events sent to Google Analytics was changed from package ID to total price. This is true for both bookings and vouchers. We consider this a bugfix and not a backwards-compatibility breaking change.
+
 # 1.2.0 -> 1.3.0
 * Option `showSubmit` for contact forms (only used internally) is now named `standalone`. The old option will remain as alias until the next major version.