@recras/online-booking-js 1.10.1 → 1.11.0

package/dist/onlinebooking.js

@@ -46,11 +46,11 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
 /*******************************
 *  Recras integration library  *
-*  v 1.10.1                    *
+*  v 1.11.0                    *
 *******************************/
 var RecrasBooking = /*#__PURE__*/function () {
   function RecrasBooking() {
@@ -438,7 +438,10 @@ var RecrasBooking = /*#__PURE__*/function () {
         return Promise.resolve(false);
       } else {
         this.clearAllExceptPackageSelection();
-        this.eventHelper.sendEvent(RecrasEventHelper.PREFIX_BOOKING, RecrasEventHelper.EVENT_BOOKING_PACKAGE_CHANGED, selectedPackage[0].arrangement, selectedPackage[0].id);
+        this.eventHelper.sendEvent(RecrasEventHelper.PREFIX_BOOKING, RecrasEventHelper.EVENT_BOOKING_PACKAGE_CHANGED, selectedPackage[0].arrangement, selectedPackage[0].id, {
+          content_type: 'package',
+          item_id: selectedPackage[0].id
+        });
       }
 
       this.selectedPackage = selectedPackage[0];
@@ -1666,10 +1669,52 @@ var RecrasBooking = /*#__PURE__*/function () {
       });
       return attachments;
     }
+  }, {
+    key: "formatGA4Items",
+    value: function formatGA4Items() {
+      var _this28 = this;
+
+      var items = [];
+
+      if (this.bookingSize() > 0) {
+        var pck = this.selectedPackage;
+        items.push({
+          item_name: pck.weergavenaam || pck.arrangement,
+          price: this.bookingSizePrice(pck),
+          quantity: this.bookingSize()
+        });
+      }
+
+      var linesNoBookingSize = this.getLinesNoBookingSize(this.selectedPackage);
+      linesNoBookingSize = linesNoBookingSize.filter(function (line) {
+        var lineEl = _this28.findElement("[data-package-id=\"".concat(line.id, "\"]"));
+
+        if (!lineEl) {
+          return false;
+        }
+
+        if (isNaN(parseInt(lineEl.value))) {
+          return false;
+        }
+
+        return parseInt(lineEl.value) > 0;
+      });
+      linesNoBookingSize = linesNoBookingSize.map(function (line) {
+        var lineEl = _this28.findElement("[data-package-id=\"".concat(line.id, "\"]"));
+
+        return {
+          item_name: line.beschrijving_templated,
+          price: line.product.verkoop,
+          quantity: parseInt(lineEl.value)
+        };
+      });
+      items.push.apply(items, _toConsumableArray(linesNoBookingSize));
+      return items;
+    }
   }, {
     key: "submitBooking",
     value: function submitBooking() {
-      var _this28 = this;
+      var _this29 = this;
 
       var productCounts = this.productCounts().map(function (line) {
         return line.aantal;
@@ -1689,7 +1734,7 @@ var RecrasBooking = /*#__PURE__*/function () {
         return false;
       }
 
-      this.eventHelper.sendEvent(RecrasEventHelper.PREFIX_BOOKING, RecrasEventHelper.EVENT_BOOKING_BOOKING_SUBMITTED, this.selectedPackage.arrangement, this.selectedPackage.id);
+      this.eventHelper.sendEvent(RecrasEventHelper.PREFIX_BOOKING, RecrasEventHelper.EVENT_BOOKING_BOOKING_SUBMITTED, this.selectedPackage.arrangement, Math.round(this.getTotalPrice()));
       var paymentMethod = this.paymentMethods(this.selectedPackage)[0];
       var paymentMethodEl = this.findElement('[name="paymentMethod"]:checked');
 
@@ -1728,30 +1773,34 @@ var RecrasBooking = /*#__PURE__*/function () {
 
       return this.postJson('onlineboeking/reserveer', bookingParams).then(function (json) {
         if (json.payment_url) {
-          _this28.eventHelper.sendEvent(RecrasEventHelper.PREFIX_BOOKING, RecrasEventHelper.EVENT_BOOKING_REDIRECT_PAYMENT, null, Math.round(_this28.getTotalPrice()));
+          _this29.eventHelper.sendEvent(RecrasEventHelper.PREFIX_BOOKING, RecrasEventHelper.EVENT_BOOKING_REDIRECT_PAYMENT, null, Math.round(_this29.getTotalPrice()), {
+            currency: _this29.languageHelper.currency,
+            value: _this29.getTotalPrice(),
+            items: _this29.formatGA4Items()
+          });
 
           window.top.location.href = json.payment_url;
         } else if (json.redirect) {
           window.top.location.href = json.redirect;
         } else if (json.message && json.status) {
-          _this28.findElement('.recras-amountsform').reset();
+          _this29.findElement('.recras-amountsform').reset();
 
-          _this28.findElement('.recras-datetime').reset();
+          _this29.findElement('.recras-datetime').reset();
 
-          _this28.findElement('.recras-contactform').reset();
+          _this29.findElement('.recras-contactform').reset();
 
-          _this28.element.scrollIntoView({
+          _this29.element.scrollIntoView({
             behavior: 'smooth'
           });
 
-          _this28.element.insertAdjacentHTML('afterbegin', "<p class=\"recras-success\">".concat(json.message, "</p>"));
+          _this29.element.insertAdjacentHTML('afterbegin', "<p class=\"recras-success\">".concat(json.message, "</p>"));
         } else {
           console.log(json);
         }
 
-        _this28.loadingIndicatorHide();
+        _this29.loadingIndicatorHide();
 
-        _this28.findElement('.bookPackage').removeAttribute('disabled');
+        _this29.findElement('.bookPackage').removeAttribute('disabled');
       });
     }
   }, {
@@ -1787,7 +1836,7 @@ var RecrasBooking = /*#__PURE__*/function () {
   }, {
     key: "updateProductAmounts",
     value: function updateProductAmounts() {
-      var _this29 = this;
+      var _this30 = this;
 
       this.loadingIndicatorHide();
       this.availableDays = [];
@@ -1797,7 +1846,7 @@ var RecrasBooking = /*#__PURE__*/function () {
       var maxPromise = this.checkMaximumForPackage();
       this.checkBookingSize(this.selectedPackage);
       this.recheckVouchers().then(function () {
-        _this29.showTotalPrice();
+        _this30.showTotalPrice();
       });
       this.showStandardAttachments();
       var datePickerEl = this.findElement('.recras-onlinebooking-date');
@@ -1845,16 +1894,16 @@ var RecrasBooking = /*#__PURE__*/function () {
   }, {
     key: "getAvailableDaysInPeriod",
     value: function getAvailableDaysInPeriod(packageId, startDate, endDate) {
-      var _this30 = this;
+      var _this31 = this;
 
       var datePickerEl = this.findElement('.recras-onlinebooking-date');
       this.getAvailableDays(packageId, startDate, endDate).then(function (availableDays) {
-        _this30.loadingIndicatorHide();
+        _this31.loadingIndicatorHide();
 
         if (datePickerEl.value && availableDays.indexOf(datePickerEl.value) === -1) {
           datePickerEl.value = '';
 
-          _this30.clearTimes();
+          _this31.clearTimes();
         } else {
           datePickerEl.removeAttribute('disabled');
         }
@@ -1949,7 +1998,7 @@ var RecrasCalendarHelper = /*#__PURE__*/function () {
 
 var RecrasContactForm = /*#__PURE__*/function () {
   function RecrasContactForm() {
-    var _this31 = this;
+    var _this32 = this;
 
     var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
@@ -1967,6 +2016,7 @@ var RecrasContactForm = /*#__PURE__*/function () {
       throw new Error(this.languageHelper.translate('ERR_NO_FORM'));
     }
 
+    this.checkboxEventListeners = [];
     this.eventHelper = new RecrasEventHelper();
     this.eventHelper.setEvents(this.options.getAnalyticsEvents());
     this.element = this.options.getElement();
@@ -1978,11 +2028,11 @@ var RecrasContactForm = /*#__PURE__*/function () {
     }
 
     this.fetchJson = function (url) {
-      return RecrasHttpHelper.fetchJson(url, _this31.error.bind(_this31));
+      return RecrasHttpHelper.fetchJson(url, _this32.error.bind(_this32));
     };
 
     this.postJson = function (url, data) {
-      return RecrasHttpHelper.postJson(_this31.options.getApiBase() + url, data, _this31.error.bind(_this31));
+      return RecrasHttpHelper.postJson(_this32.options.getApiBase() + url, data, _this32.error.bind(_this32));
     };
 
     RecrasCSSHelper.loadCSS('global');
@@ -2006,7 +2056,7 @@ var RecrasContactForm = /*#__PURE__*/function () {
   _createClass(RecrasContactForm, [{
     key: "checkRequiredCheckboxes",
     value: function checkRequiredCheckboxes() {
-      var _this32 = this;
+      var _this33 = this;
 
       this.removeWarnings();
       var isOkay = true;
@@ -2015,13 +2065,9 @@ var RecrasContactForm = /*#__PURE__*/function () {
         var checked = group.querySelectorAll('input:checked');
 
         if (checked.length === 0) {
-          group.parentNode.querySelector('label').insertAdjacentHTML('beforeend', "<div class=\"recrasError\">".concat(_this32.languageHelper.translate('CONTACT_FORM_CHECKBOX_REQUIRED'), "</div>"));
+          group.parentNode.querySelector('label').insertAdjacentHTML('beforeend', "<div class=\"recrasError\">".concat(_this33.languageHelper.translate('CONTACT_FORM_CHECKBOX_REQUIRED'), "</div>"));
           isOkay = false;
         }
-
-        _toConsumableArray(group.querySelectorAll('input')).forEach(function (el) {
-          el.addEventListener('change', _this32.checkRequiredCheckboxes.bind(_this32));
-        });
       });
 
       return isOkay;
@@ -2060,7 +2106,7 @@ var RecrasContactForm = /*#__PURE__*/function () {
   }, {
     key: "generateForm",
     value: function generateForm() {
-      var _this33 = this;
+      var _this34 = this;
 
       var extraOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var waitFor = [];
@@ -2075,21 +2121,21 @@ var RecrasContactForm = /*#__PURE__*/function () {
       }
 
       return Promise.all(waitFor).then(function () {
-        var standalone = _this33.isStandalone(extraOptions);
+        var standalone = _this34.isStandalone(extraOptions);
 
         var validateText = standalone ? 'novalidate' : '';
         var html = "<form class=\"recras-contactform\" ".concat(validateText, ">");
 
         if (extraOptions.voucherQuantitySelector) {
-          html += _this33.quantitySelector(extraOptions.quantityTerm);
+          html += _this34.quantitySelector(extraOptions.quantityTerm);
         }
 
-        _this33.contactFormFields.forEach(function (field, idx) {
-          html += '<div>' + _this33.showField(field, idx) + '</div>';
+        _this34.contactFormFields.forEach(function (field, idx) {
+          html += '<div>' + _this34.showField(field, idx) + '</div>';
         });
 
         if (standalone) {
-          html += _this33.submitButtonHtml();
+          html += _this34.submitButtonHtml();
         }
 
         html += '</form>';
@@ -2124,22 +2170,22 @@ var RecrasContactForm = /*#__PURE__*/function () {
   }, {
     key: "getContactFormFields",
     value: function getContactFormFields() {
-      var _this34 = this;
+      var _this35 = this;
 
       return this.fetchJson(this.options.getApiBase() + 'contactformulieren/' + this.options.getFormId() + '?embed=Velden').then(function (form) {
-        _this34.contactFormFields = form.Velden;
-        _this34.packages = _this34.sortPackages(form.Arrangementen);
-        return _this34.contactFormFields;
+        _this35.contactFormFields = form.Velden;
+        _this35.packages = _this35.sortPackages(form.Arrangementen);
+        return _this35.contactFormFields;
       });
     }
   }, {
     key: "getCountryList",
     value: function getCountryList() {
-      var _this35 = this;
+      var _this36 = this;
 
       return this.fetchJson('https://cdn.rawgit.com/umpirsky/country-list/ddabf3a8/data/' + this.languageHelper.locale + '/country.json').then(function (json) {
-        _this35.countries = json;
-        return _this35.countries;
+        _this36.countries = json;
+        return _this36.countries;
       });
     }
   }, {
@@ -2306,7 +2352,7 @@ var RecrasContactForm = /*#__PURE__*/function () {
   }, {
     key: "showField",
     value: function showField(field, idx) {
-      var _this36 = this;
+      var _this37 = this;
 
       if (field.soort_invoer === 'header') {
         return "<h3>".concat(field.naam, "</h3>");
@@ -2325,7 +2371,7 @@ var RecrasContactForm = /*#__PURE__*/function () {
         case 'contactpersoon.geslacht':
           html = "<select ".concat(fixedAttributes, " autocomplete=\"sex\">");
           Object.keys(this.GENDERS).forEach(function (key) {
-            html += "<option value=\"".concat(key, "\">").concat(_this36.languageHelper.translate(_this36.GENDERS[key]));
+            html += "<option value=\"".concat(key, "\">").concat(_this37.languageHelper.translate(_this37.GENDERS[key]));
           });
           html += '</select>';
           return label + html;
@@ -2381,8 +2427,8 @@ var RecrasContactForm = /*#__PURE__*/function () {
         case 'contact.landcode':
           html = "<select ".concat(fixedAttributes, " autocomplete=\"country\">");
           Object.keys(this.countries).forEach(function (code) {
-            var selectedText = code.toUpperCase() === _this36.options.getDefaultCountry() ? 'selected' : '';
-            html += "<option value=\"".concat(code, "\" ").concat(selectedText, ">").concat(_this36.countries[code]);
+            var selectedText = code.toUpperCase() === _this37.options.getDefaultCountry() ? 'selected' : '';
+            html += "<option value=\"".concat(code, "\" ").concat(selectedText, ">").concat(_this37.countries[code]);
           });
           html += '</select>';
           return label + html;
@@ -2462,35 +2508,41 @@ var RecrasContactForm = /*#__PURE__*/function () {
   }, {
     key: "showForm",
     value: function showForm() {
-      var _this37 = this;
+      var _this38 = this;
 
       this.loadingIndicatorShow(this.element);
       return this.getContactFormFields().then(function () {
-        return _this37.generateForm({
+        return _this38.generateForm({
           standalone: true
         });
       }).then(function (html) {
-        _this37.appendHtml(html);
+        _this38.appendHtml(html);
 
-        _this37.findElement('.recras-contactform').addEventListener('submit', _this37.submitForm.bind(_this37));
+        _toConsumableArray(_this38.findElements('.checkboxGroupRequired')).forEach(function (group) {
+          _toConsumableArray(group.querySelectorAll('input')).forEach(function (el) {
+            el.addEventListener('change', _this38.checkRequiredCheckboxes.bind(_this38));
+          });
+        });
 
-        if (_this37.hasBookingDateField()) {
+        _this38.findElement('.recras-contactform').addEventListener('submit', _this38.submitForm.bind(_this38));
+
+        if (_this38.hasBookingDateField()) {
           var pikadayOptions = _extends(RecrasCalendarHelper.defaultOptions(), {
-            field: _this37.findElement('[data-identifier="boeking.datum"]'),
-            i18n: RecrasCalendarHelper.i18n(_this37.languageHelper),
+            field: _this38.findElement('[data-identifier="boeking.datum"]'),
+            i18n: RecrasCalendarHelper.i18n(_this38.languageHelper),
             numberOfMonths: 1
           });
 
           new Pikaday(pikadayOptions);
         }
 
-        if (_this37.hasRelationDateField()) {
-          var fields = _this37.getRelationExtraDateFields();
+        if (_this38.hasRelationDateField()) {
+          var fields = _this38.getRelationExtraDateFields();
 
           var thisYear = new Date().getFullYear();
 
           var _pikadayOptions = _extends(RecrasCalendarHelper.defaultOptions(), {
-            i18n: RecrasCalendarHelper.i18n(_this37.languageHelper),
+            i18n: RecrasCalendarHelper.i18n(_this38.languageHelper),
             numberOfMonths: 1,
             yearRange: [thisYear - 90, thisYear + 10]
           });
@@ -2499,12 +2551,12 @@ var RecrasContactForm = /*#__PURE__*/function () {
 
           for (var _i18 = 0; _i18 < fields.length; _i18++) {
             var field = fields[_i18];
-            _pikadayOptions.field = _this37.findElement("[data-identifier=\"".concat(field.field_identifier, "\"]"));
+            _pikadayOptions.field = _this38.findElement("[data-identifier=\"".concat(field.field_identifier, "\"]"));
             new Pikaday(_pikadayOptions);
           }
         }
 
-        _this37.loadingIndicatorHide();
+        _this38.loadingIndicatorHide();
       });
     }
   }, {
@@ -2554,7 +2606,7 @@ var RecrasContactForm = /*#__PURE__*/function () {
   }, {
     key: "submitForm",
     value: function submitForm(e) {
-      var _this38 = this;
+      var _this39 = this;
 
       e.preventDefault();
       var submitButton = this.findElement('.submitForm');
@@ -2578,24 +2630,24 @@ var RecrasContactForm = /*#__PURE__*/function () {
       submitButton.setAttribute('disabled', 'disabled');
       this.postJson('contactformulieren/' + this.options.getFormId() + '/opslaan', this.generateJson()).then(function (json) {
         if (json.success) {
-          if (_this38.options.getRedirectUrl()) {
-            window.top.location.href = _this38.options.getRedirectUrl();
+          if (_this39.options.getRedirectUrl()) {
+            window.top.location.href = _this39.options.getRedirectUrl();
           } else {
-            _this38.element.scrollIntoView({
+            _this39.element.scrollIntoView({
               behavior: 'smooth'
             });
 
-            _this38.element.insertAdjacentHTML('afterbegin', "<p class=\"recras-success\">".concat(_this38.languageHelper.translate('CONTACT_FORM_SUBMIT_SUCCESS'), "</p>"));
+            _this39.element.insertAdjacentHTML('afterbegin', "<p class=\"recras-success\">".concat(_this39.languageHelper.translate('CONTACT_FORM_SUBMIT_SUCCESS'), "</p>"));
 
             submitButton.parentNode.reset();
           }
         } else {
-          _this38.error(_this38.languageHelper.translate('CONTACT_FORM_SUBMIT_FAILED'));
+          _this39.error(_this39.languageHelper.translate('CONTACT_FORM_SUBMIT_FAILED'));
         }
 
         submitButton.removeAttribute('disabled');
 
-        _this38.loadingIndicatorHide();
+        _this39.loadingIndicatorHide();
       });
       return false;
     }
@@ -2751,11 +2803,31 @@ var RecrasEventHelper = /*#__PURE__*/function () {
     value: function eventEnabled(name) {
       return this.eventsEnabled.includes(name);
     }
+  }, {
+    key: "ga4EventMap",
+    value: function ga4EventMap(action) {
+      var _map;
+
+      var map = (_map = {}, _defineProperty(_map, RecrasEventHelper.EVENT_BOOKING_PACKAGE_CHANGED, 'select_content'), _defineProperty(_map, RecrasEventHelper.EVENT_BOOKING_REDIRECT_PAYMENT, 'begin_checkout'), _defineProperty(_map, RecrasEventHelper.EVENT_VOUCHER_TEMPLATE_CHANGED, 'select_content'), _defineProperty(_map, RecrasEventHelper.EVENT_VOUCHER_REDIRECT_PAYMENT, 'begin_checkout'), _map);
+
+      if (map[action] === undefined) {
+        return false;
+      }
+
+      return map[action];
+    }
+  }, {
+    key: "isGA4",
+    value: function isGA4() {
+      var fn = window[window.GoogleAnalyticsObject || 'ga'];
+      return fn && fn.h && fn.h.gtm4;
+    }
   }, {
     key: "sendEvent",
     value: function sendEvent(cat, action) {
       var label = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
       var value = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
+      var ga4Value = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : undefined;
       var event;
 
       try {
@@ -2767,8 +2839,11 @@ var RecrasEventHelper = /*#__PURE__*/function () {
       }
 
       if (this.analyticsEnabled && this.eventEnabled(action)) {
-        if (typeof window.gtag === 'function') {
-          // Global Site Tag - the more modern variant
+        if (this.isGA4() && this.ga4EventMap(action) && ga4Value) {
+          // v4
+          this.sendGA4Event(this.ga4EventMap(action), ga4Value);
+        } else if (typeof window.gtag === 'function') {
+          // Global Site Tag (v3)
           var eventData = {
             event_category: RecrasEventHelper.PREFIX_GLOBAL + ':' + cat
           };
@@ -2783,7 +2858,7 @@ var RecrasEventHelper = /*#__PURE__*/function () {
 
           window.gtag('event', action, eventData);
         } else if (typeof window.ga === 'function') {
-          // "Old" Google Analytics
+          // "Old" Google Analytics (v2) and Tag Manager
           var _eventData = {
             hitType: 'event',
             eventCategory: RecrasEventHelper.PREFIX_GLOBAL + ':' + cat,
@@ -2813,6 +2888,12 @@ var RecrasEventHelper = /*#__PURE__*/function () {
 
       return document.dispatchEvent(event);
     }
+  }, {
+    key: "sendGA4Event",
+    value: function sendGA4Event(action, data) {
+      var fn = window[window.GoogleAnalyticsObject || 'ga'];
+      fn('event', action, data);
+    }
   }, {
     key: "setAnalytics",
     value: function setAnalytics(bool) {
@@ -3345,16 +3426,16 @@ var RecrasLanguageHelper = /*#__PURE__*/function () {
   }, {
     key: "setCurrency",
     value: function setCurrency() {
-      var _this39 = this;
+      var _this40 = this;
 
       var errorHandler = function errorHandler(err) {
-        _this39.currency = 'eur';
+        _this40.currency = 'eur';
 
-        _this39.error(err);
+        _this40.error(err);
       };
 
       return RecrasHttpHelper.fetchJson(this.options.getApiBase() + 'instellingen/currency', errorHandler).then(function (setting) {
-        _this39.currency = setting.waarde;
+        _this40.currency = setting.waarde;
       });
     }
   }, {
@@ -3578,7 +3659,7 @@ _defineProperty(RecrasOptions, "hostnamesDebug", ['nginx:8886', // Local develop
 
 var RecrasVoucher = /*#__PURE__*/function () {
   function RecrasVoucher() {
-    var _this40 = this;
+    var _this41 = this;
 
     var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
@@ -3597,11 +3678,11 @@ var RecrasVoucher = /*#__PURE__*/function () {
     this.element.classList.add('recras-buy-voucher');
 
     this.fetchJson = function (url) {
-      return RecrasHttpHelper.fetchJson(url, _this40.error);
+      return RecrasHttpHelper.fetchJson(url, _this41.error);
     };
 
     this.postJson = function (url, data) {
-      return RecrasHttpHelper.postJson(_this40.options.getApiBase() + url, data, _this40.error);
+      return RecrasHttpHelper.postJson(_this41.options.getApiBase() + url, data, _this41.error);
     };
 
     RecrasCSSHelper.loadCSS('global');
@@ -3617,12 +3698,12 @@ var RecrasVoucher = /*#__PURE__*/function () {
     }
 
     this.languageHelper.setOptions(options).then(function () {
-      return _this40.getVoucherTemplates();
+      return _this41.getVoucherTemplates();
     }).then(function (templates) {
-      if (_this40.options.getVoucherTemplateId()) {
-        _this40.changeTemplate(_this40.options.getVoucherTemplateId());
+      if (_this41.options.getVoucherTemplateId()) {
+        _this41.changeTemplate(_this41.options.getVoucherTemplateId());
       } else {
-        _this40.showTemplates(templates);
+        _this41.showTemplates(templates);
       }
     });
   }
@@ -3632,10 +3713,19 @@ var RecrasVoucher = /*#__PURE__*/function () {
     value: function appendHtml(msg) {
       this.element.insertAdjacentHTML('beforeend', msg);
     }
+  }, {
+    key: "formatGA4Item",
+    value: function formatGA4Item() {
+      return [{
+        item_name: this.selectedTemplate.name,
+        price: this.selectedTemplate.price,
+        quantity: parseInt(this.findElement('#number-of-vouchers').value)
+      }];
+    }
   }, {
     key: "buyTemplate",
     value: function buyTemplate() {
-      var _this41 = this;
+      var _this42 = this;
 
       var status = this.contactForm.checkRequiredCheckboxes();
 
@@ -3643,7 +3733,7 @@ var RecrasVoucher = /*#__PURE__*/function () {
         return false;
       }
 
-      this.eventHelper.sendEvent(RecrasEventHelper.PREFIX_VOUCHER, RecrasEventHelper.EVENT_VOUCHER_VOUCHER_SUBMITTED, this.selectedTemplate.name, this.selectedTemplate.id);
+      this.eventHelper.sendEvent(RecrasEventHelper.PREFIX_VOUCHER, RecrasEventHelper.EVENT_VOUCHER_VOUCHER_SUBMITTED, this.selectedTemplate.name, Math.round(this.totalPrice()));
       this.findElement('.buyTemplate').setAttribute('disabled', 'disabled');
       var payload = {
         voucher_template_id: this.selectedTemplate.id,
@@ -3657,14 +3747,18 @@ var RecrasVoucher = /*#__PURE__*/function () {
 
       this.postJson('vouchers/buy', payload).then(function (json) {
         if (json.payment_url) {
-          _this41.eventHelper.sendEvent(RecrasEventHelper.PREFIX_VOUCHER, RecrasEventHelper.EVENT_VOUCHER_REDIRECT_PAYMENT, null, Math.round(_this41.totalPrice()));
+          _this42.eventHelper.sendEvent(RecrasEventHelper.PREFIX_VOUCHER, RecrasEventHelper.EVENT_VOUCHER_REDIRECT_PAYMENT, null, Math.round(_this42.totalPrice()), {
+            currency: _this42.languageHelper.currency,
+            value: _this42.totalPrice(),
+            items: _this42.formatGA4Item()
+          });
 
           window.top.location.href = json.payment_url;
         } else {
           console.log(json);
         }
 
-        _this41.findElement('.buyTemplate').removeAttribute('disabled');
+        _this42.findElement('.buyTemplate').removeAttribute('disabled');
       });
     }
   }, {
@@ -3675,7 +3769,10 @@ var RecrasVoucher = /*#__PURE__*/function () {
       })[0];
       this.clearAllExceptTemplateSelection();
       this.showContactForm(this.selectedTemplate);
-      this.eventHelper.sendEvent(RecrasEventHelper.PREFIX_VOUCHER, RecrasEventHelper.EVENT_VOUCHER_TEMPLATE_CHANGED, null, templateID);
+      this.eventHelper.sendEvent(RecrasEventHelper.PREFIX_VOUCHER, RecrasEventHelper.EVENT_VOUCHER_TEMPLATE_CHANGED, null, templateID, {
+        content_type: 'voucher',
+        item_id: templateID
+      });
     }
   }, {
     key: "clearAll",
@@ -3721,25 +3818,25 @@ var RecrasVoucher = /*#__PURE__*/function () {
   }, {
     key: "getContactForm",
     value: function getContactForm(template) {
-      var _this42 = this;
+      var _this43 = this;
 
       this.options.setOption('form_id', template.contactform_id);
       var contactForm = new RecrasContactForm(this.options);
       return contactForm.getContactFormFields().then(function () {
-        _this42.contactForm = contactForm;
+        _this43.contactForm = contactForm;
         return contactForm;
       });
     }
   }, {
     key: "getVoucherTemplates",
     value: function getVoucherTemplates() {
-      var _this43 = this;
+      var _this44 = this;
 
       return this.fetchJson(this.options.getApiBase() + 'voucher_templates').then(function (templates) {
         templates = templates.filter(function (template) {
           return !!template.contactform_id;
         });
-        _this43.templates = templates;
+        _this44.templates = templates;
         return templates;
       });
     }
@@ -3785,30 +3882,30 @@ var RecrasVoucher = /*#__PURE__*/function () {
   }, {
     key: "showContactForm",
     value: function showContactForm(template) {
-      var _this44 = this;
+      var _this45 = this;
 
       return this.getContactForm(template).then(function (form) {
         return form.generateForm({
           voucherQuantitySelector: true,
-          quantityTerm: _this44.selectedTemplate.quantity_term
+          quantityTerm: _this45.selectedTemplate.quantity_term
         });
       }).then(function (html) {
-        _this44.appendHtml(html);
+        _this45.appendHtml(html);
 
-        _this44.showBuyButton();
+        _this45.showBuyButton();
 
-        _toConsumableArray(_this44.findElements('#number-of-vouchers, [name^="contactformulier"]')).forEach(function (el) {
-          el.addEventListener('change', _this44.maybeDisableBuyButton.bind(_this44));
+        _toConsumableArray(_this45.findElements('#number-of-vouchers, [name^="contactformulier"]')).forEach(function (el) {
+          el.addEventListener('change', _this45.maybeDisableBuyButton.bind(_this45));
         });
       });
     }
   }, {
     key: "showTemplates",
     value: function showTemplates(templates) {
-      var _this45 = this;
+      var _this46 = this;
 
       var templateOptions = templates.map(function (template) {
-        return "<option value=\"".concat(template.id, "\">").concat(template.name, " (").concat(_this45.formatPrice(template.price), ")");
+        return "<option value=\"".concat(template.id, "\">").concat(template.name, " (").concat(_this46.formatPrice(template.price), ")");
       });
       var html = "<select class=\"recrasVoucherTemplates\"><option>".concat(templateOptions.join(''), "</select>");
       this.appendHtml("<div class=\"recras-voucher-templates\">".concat(html, "</div>"));
@@ -3816,7 +3913,7 @@ var RecrasVoucher = /*#__PURE__*/function () {
       voucherSelectEl.addEventListener('change', function () {
         var selectedTemplateId = parseInt(voucherSelectEl.value, 10);
 
-        _this45.changeTemplate(selectedTemplateId);
+        _this46.changeTemplate(selectedTemplateId);
       });
     }
   }, {