From dc698a4bef0be9c0527be78fed3c7a753b5b96e1 Mon Sep 17 00:00:00 2001 From: jiroghianni Date: Mon, 18 Nov 2024 13:02:22 +0100 Subject: [PATCH 1/3] [#2870] Add cases events for Siteimprove --- .../js/components/form/FileInput.js | 8 +- .../js/components/siteimprove/tracking.js | 471 +++++++++++++++--- .../FilterBar/MultiSelectListbox.scss | 2 + 3 files changed, 408 insertions(+), 73 deletions(-) diff --git a/src/open_inwoner/js/components/form/FileInput.js b/src/open_inwoner/js/components/form/FileInput.js index 688ece6d37..6c8dafa7b1 100644 --- a/src/open_inwoner/js/components/form/FileInput.js +++ b/src/open_inwoner/js/components/form/FileInput.js @@ -301,7 +301,7 @@ export class FileInput extends Component {
${name} (${ext}, ${sizeMB}MB)
- + @@ -310,7 +310,7 @@ export class FileInput extends Component { ? `

- Dit type bestand (${ext}) is ongeldig en te groot. Geldige bestandstypen zijn: ${uploadFileTypes} + Dit type bestand (${ext}) is ongeldig en te groot. Geldige bestandstypen zijn: ${uploadFileTypes}

` : typeError || sizeError ? ` @@ -318,12 +318,12 @@ export class FileInput extends Component { ${ typeError - ? `Dit type bestand (${ext}) is ongeldig. Geldige bestandstypen zijn: ${uploadFileTypes}` + ? `Dit type bestand (${ext}) is ongeldig. Geldige bestandstypen zijn: ${uploadFileTypes}` : '' } ${ sizeError - ? 'Dit bestand is te groot' + ? 'Dit bestand is te groot' : '' }

` diff --git a/src/open_inwoner/js/components/siteimprove/tracking.js b/src/open_inwoner/js/components/siteimprove/tracking.js index 7df8ea8201..b775615d7c 100644 --- a/src/open_inwoner/js/components/siteimprove/tracking.js +++ b/src/open_inwoner/js/components/siteimprove/tracking.js @@ -1,11 +1,10 @@ -// // Mock _sz object for testing +// Mock _sz object for testing // if (typeof _sz === 'undefined') { // var _sz = { // push: function (data) { // try { // console.log('Event pushed to _sz:', data) // } catch (error) { -// // Log the error // console.error('Error occurred while pushing event data:', error) // } // }, @@ -34,18 +33,12 @@ let isEventTrackerInitialized = false trackEvents() { // Use a single event listener for each event type - document.body.addEventListener( - 'click', - this.handleEvent.bind(this, 'click') - ) - document.body.addEventListener( - 'change', - this.handleEvent.bind(this, 'change') - ) - document.body.addEventListener( - 'keydown', - this.handleEvent.bind(this, 'keydown') - ) + ;['click', 'change', 'keydown'].forEach((eventType) => { + document.body.addEventListener( + eventType, + this.handleEvent.bind(this, eventType) + ) + }) } handleEvent(eventType, event) { @@ -137,28 +130,36 @@ let isEventTrackerInitialized = false '.form#profile-edit a.button': [ 'event', 'Contactgegevens', - 'Click', + 'Change', 'No Save (terug naar mijn profiel)', ], '#profile-edit > .form__actions.form__actions--fullwidth > a > .material-icons-outlined': [ 'event', 'Contactgegevens', - 'Click', + 'Change', 'No Save (terug naar mijn profiel)', ], // Start Category events + '#content .plugin__categories .card .card__body--compact': [ + 'event', + 'Homepage', + 'Click', + 'Onderwerpen', + ], + '#content .plugin__categories .card .card__body--compact .card__heading-3': + ['event', 'Homepage', 'Click', 'Onderwerpen'], '#content .plugin__categories .card img': [ 'event', 'Homepage', 'Click', - 'Onderwerpen card image', + 'Onderwerpen', ], '#content .plugin__categories .card .link': [ 'event', 'Homepage', 'Click', - 'Onderwerpen card tekstlink', + 'Onderwerpen', ], '.header > .header__container > nav.primary-navigation.primary-navigation--open.primary-navigation__main > .primary-navigation__list > li > ul > li > a > .link__text': ['event', 'Dropdown Onderwerpen desktop', 'Click', 'Onderwerpen'], @@ -192,109 +193,308 @@ let isEventTrackerInitialized = false // Can get contaminated with uncheck changes '.form#change-notifications #id_messages_notifications': [ 'event', - 'Communicatievoorkeuren Berichtnotificaties', - 'UNCHECK', + 'Communicatievoorkeuren', + 'Click berichtnotificatie', 'Disable', ], '.form#change-notifications #id_plans_notifications': [ 'event', - 'Communicatievoorkeuren Samenwerkingnotificaties', - 'UNCHECK', + 'Communicatievoorkeuren', + 'Click samenwerkingnotificatie', 'Disable', ], '.form#change-notifications #id_cases_notifications': [ 'event', - 'Communicatievoorkeuren Zaaknotificaties', - 'UNCHECK', + 'Communicatievoorkeuren', + 'Click zaaknotificatie', 'Disable', ], '.form#change-notifications #id_cases_notifications:checked': [ 'event', - 'Communicatievoorkeuren Zaaknotificaties', - 'check', + 'Communicatievoorkeuren', + 'Click zaaknotificatie', 'Enable', ], '.form#change-notifications #id_messages_notifications:checked': [ 'event', - 'Communicatievoorkeuren Berichtnotificaties', - 'check', + 'Communicatievoorkeuren', + 'Click berichtnotificatie', 'Enable', ], '.form#change-notifications #id_plans_notifications:checked': [ 'event', - 'Communicatievoorkeuren Samenwerkingnotificaties', - 'check', + 'Communicatievoorkeuren', + 'Click samenwerkingnotificatie', 'Enable', ], '.form#change-notifications > .form__actions.form__actions--fullwidth > a.button': [ 'event', 'Communicatievoorkeuren', - 'Click', + 'Change', 'No Save (terug naar mijn profiel)', ], '.form#change-notifications > .form__actions.form__actions--fullwidth > a.button .material-icons-outlined': [ 'event', 'Communicatievoorkeuren', - 'Click', + 'Change', 'No Save (terug naar mijn profiel)', ], '.form#change-notifications button.button--primary': [ 'event', 'Communicatievoorkeuren', - 'Submit', + 'Change submit', 'Save', ], // End of Communicatievoorkeuren - // Start Header dropdown profiel - '.header > .header__container > nav.primary-navigation.primary-navigation__authenticated > .primary-navigation__list > .primary-navigation__list-item > ul > li:nth-child(1) > a': - ['event', 'Mijn Profiel', 'Click', 'Open mijn profiel'], - '.header > .header__container > nav.primary-navigation.primary-navigation--open.primary-navigation__authenticated > .primary-navigation__list > .primary-navigation__list-item > .subpage-list > li:nth-child(1) > a > .link__text': - ['event', 'Mijn Profiel', 'Click', 'Open mijn profiel'], - '.header > .header__container > nav.primary-navigation.primary-navigation__authenticated > .primary-navigation__list > .primary-navigation__list-item > ul > li:nth-child(1) > a > .material-icons-outlined': - ['event', 'Mijn Profiel', 'Click', 'Open mijn profiel'], - // End header dropdown profiel - '.header nav.primary-navigation.primary-navigation__authenticated > ul > li > ul > li.header__list-item > a': - ['event', 'Logout button', 'Click', 'Logout'], - '.header nav.primary-navigation.primary-navigation__authenticated > ul > li > ul > li.header__list-item > a .link__text': - ['event', 'Logout button', 'Click', 'Logout'], - '.header nav.primary-navigation.primary-navigation__authenticated > ul > li > ul > li.header__list-item > a > .material-icons': - ['event', 'Logout button', 'Click', 'Logout'], + // header mobile dropdown profiel + '.header > div > div.header--mobile.header__submenu > nav > ul > li > a[aria-label="Mijn profiel"]': + [ + 'event', + 'Mijn Profiel', + 'Click mijn profiel ', + 'Open Mijn profiel mobiel', + ], + '.header > div > div.header--mobile.header__submenu > nav > ul > li > a[aria-label="Mijn profiel"] .link__text': + [ + 'event', + 'Mijn Profiel', + 'Click mijn profiel ', + 'Open Mijn profiel mobiel', + ], + '.header > div > div.header--mobile.header__submenu > nav > ul > li > a[aria-label="Mijn profiel"] .material-icons-outlined': + [ + 'event', + 'Mijn Profiel', + 'Click mijn profiel ', + 'Open Mijn profiel mobiel', + ], + // Desktop authenticated menu + '.header > div > nav.primary-navigation.primary-navigation--desktop.primary-navigation__authenticated > ul > li > ul > li > a[aria-label="Mijn profiel"]': + ['event', 'Mijn Profiel', 'Click mijn Profiel', 'Open Mijn profiel'], + '.header > div > nav.primary-navigation.primary-navigation--desktop.primary-navigation__authenticated > ul > li > ul > li > a[aria-label="Mijn profiel"] span': + ['event', 'Mijn Profiel', 'Click mijn Profiel', 'Open Mijn profiel'], + '.header > div > nav.primary-navigation.primary-navigation--desktop.primary-navigation__authenticated > ul > li > ul > li > a[aria-label="Mijn aanvragen"]': + ['event', 'Header', 'Click', 'Open Mijn aanvragen'], + '.header > div > nav.primary-navigation.primary-navigation--desktop.primary-navigation__authenticated > ul > li > ul > li > a[aria-label="Mijn aanvragen"] span': + ['event', 'Header', 'Click', 'Open Mijn aanvragen'], + '.header > div > nav.primary-navigation.primary-navigation--desktop.primary-navigation__authenticated > ul > li > ul > li > a[aria-label="Uitloggen"]': + ['event', 'Logout button', 'Click on logout', 'Logout'], + '.header > div > nav.primary-navigation.primary-navigation--desktop.primary-navigation__authenticated > ul > li > ul > li > a[aria-label="Uitloggen"] span': + ['event', 'Logout button', 'Click on logout', 'Logout'], + // Header dropdown Aanvragen mobile + '.header .header--mobile.header__submenu > nav.primary-navigation--mobile > .primary-navigation__list > .primary-navigation__list-item > a[aria-label="Mijn aanvragen"]': + ['event', 'Mijn aanvragen', 'Click', 'Open Mijn aanvragen mobiel'], + '.header .header--mobile.header__submenu > nav.primary-navigation--mobile > .primary-navigation__list > .primary-navigation__list-item > a[aria-label="Mijn aanvragen"] .link__text': + ['event', 'Mijn aanvragen', 'Click', 'Open Mijn aanvragen mobiel'], + '.header .header--mobile.header__submenu > nav.primary-navigation--mobile > .primary-navigation__list > .primary-navigation__list-item > a[aria-label="Mijn aanvragen"] > .material-icons-outlined': + ['event', 'Mijn aanvragen', 'Click', 'Open Mijn aanvragen mobiel'], + // Open Aanvraag via cards + '#cases-content > .card__grid .column a.card div': [ + 'event', + 'Mijn aanvragen', + 'Click', + 'Open Aanvraag via tegel', + ], + '#cases-content > div.card__grid > div > div > a > div > div > span.card__status_indicator_text': + ['event', 'Mijn aanvragen', 'Click', 'Open Aanvraag via tegel'], + '#cases-content > div.card__grid > div > div > a > div > ul > li > p.utrecht-paragraph': + ['event', 'Mijn aanvragen', 'Click', 'Open Aanvraag via tegel'], + '#cases-content > div.card__grid > div > div > a > div > h2': [ + 'event', + 'Mijn aanvragen', + 'Click', + 'Open Aanvraag via tegel', + ], + '#cases-content > div.card__grid > div > div > a > div > ul > li': [ + 'event', + 'Mijn aanvragen', + 'Click', + 'Open Aanvraag via tegel', + ], + '#cases-content > div.card__grid > div > div > a > div > ul > li .utrecht-paragraph': + ['event', 'Mijn aanvragen', 'Click', 'Open Aanvraag via tegel'], + '#cases-content > div.card__grid > div > div > a > div > ul > li .card__caption span': + ['event', 'Mijn aanvragen', 'Click', 'Open Aanvraag via tegel'], + '#cases-content > div.card__grid > div > div > a > div > span > span': [ + 'event', + 'Mijn aanvragen', + 'Click', + "Open aanvraag via 'Bekijk aanvraag' link", + ], + '#cases-content > div.card__grid > div > div > a > div > span > span.link__text': + [ + 'event', + 'Mijn aanvragen overzicht', + 'Click', + "Open aanvraag via 'Bekijk aanvraag' link", + ], + // Detail Case view + '#statuses_component .status-list__notification-content > p.utrecht-paragraph.status-list__upload.status-list__upload--enabled > a': + ['event', 'Aanvraag detail', 'Scroll click', 'Scroll omlaag'], + '#cases-detail-content .column.column--start-4.column--span-6 > section.case-detail__documents > .file-list > ul > li > aside > div > div > a > span': + ['event', 'Aanvraag detail', 'Click', 'Download document'], + '#document-upload > div.form__control.file-input > div.card > div > label.button.button--primary.file-input__label-empty': + ['event', 'Aanvraag detail', 'Click', 'Selecteer bestanden'], + '#document-upload > div.form__control.file-input > div.form__actions.form__actions--fullwidth > button': + ['event', 'Aanvraag detail', 'Click', 'Upload documenten'], + '#document-upload > div.form__control.file-input > div.form__actions.form__actions--fullwidth > button span': + ['event', 'Aanvraag detail', 'Click', 'Upload documenten'], + // Detail case toggle statuses + '#statuses_component > aside > ul > li.status-list__list-item.status--current > div > h3 > button': + ['event', 'Mijn Aanvragen accordeon', 'Click', 'Open huidige status'], + '#statuses_component > aside > ul > li.status-list__list-item.status--current > div > h3 > button span': + ['event', 'Mijn Aanvragen accordeon', 'Click', 'Open huidige status'], + '#statuses_component > aside > ul > li.status--completed.status-list__list-item > div > h3 > button': + [ + 'event', + 'Mijn Aanvragen accordeon', + 'Click', + 'Open voltooide status', + ], + '#statuses_component > aside > ul > li.status--completed.status-list__list-item > div > h3 > button span': + [ + 'event', + 'Mijn Aanvragen accordeon', + 'Click', + 'Open voltooide status', + ], + '#statuses_component > aside > ul > li.status--active.status-list__list-item > div > h3 > button': + [ + 'event', + 'Mijn Aanvragen accordeon', + 'Click', + 'Open openstaande status', + ], + '#statuses_component > aside > ul > li.status--active.status-list__list-item > div > h3 > button span': + [ + 'event', + 'Mijn Aanvragen accordeon', + 'Click', + 'Open openstaande status', + ], + // Accessibility header + '.accessibility-header > ul > li > a[aria-label="Lees voor"] > .link__text': + ['event', 'Accessibility header', 'Click', 'Schakel voorlezen'], + '.accessibility-header > ul > li > a[aria-label="Lees voor"] > .material-icons': + ['event', 'Accessibility header', 'Click', 'Schakel voorlezen'], + '.accessibility-header > ul > li > a[aria-label="Pauzeer"] > .link__text': + ['event', 'Accessibility header', 'Click', 'Schakel pauzeren'], + '.accessibility-header > ul > li > a[aria-label="Pauzeer"] > .material-icons': + ['event', 'Accessibility header', 'Click', 'Schakel pauzeren'], + '.accessibility-header > ul > li > a[aria-label="Vergroten"] > .link__text': + ['event', 'Accessibility header', 'Click', 'Schakel vergroten'], + '.accessibility-header > ul > li > a[aria-label="Vergroten"] > .material-icons': + ['event', 'Accessibility header', 'Click', 'Schakel vergroten'], + '.accessibility-header > ul > li > a[aria-label="Verkleinen"] > .link__text': + ['event', 'Accessibility header', 'Click', 'Schakel verkleinen'], + '.accessibility-header > ul > li > a[aria-label="Verkleinen"] > .material-icons': + ['event', 'Accessibility header', 'Click', 'Schakel verkleinen'], + '.accessibility-header > ul > li > a[aria-label="Dyslexie"] > .link__text': + ['event', 'Accessibility header', 'Click', 'Schakel dyslexie'], + '.accessibility-header > ul > li > a[aria-label="Dyslexie"] > .material-icons': + ['event', 'Accessibility header', 'Click', 'Schakel dyslexie'], + '.accessibility-header > ul > li > a[aria-label="Help"] > .link__text': + ['event', 'Accessibility header', 'Click', 'Open help pop-up'], + '.accessibility-header > ul > li > a[aria-label="Help"] > .material-icons': + ['event', 'Accessibility header', 'Click', 'Open help pop-up'], + '.accessibility-header > ul > li > a[aria-label="Print pagina"] > .link__text': + ['event', 'Accessibility header', 'Click', 'Schakel Print pagina'], + '.accessibility-header > ul > li > a[aria-label="Print pagina"] > .material-icons': + ['event', 'Accessibility header', 'Click', 'Schakel Print pagina'], // Filters in Cases list + '#filterBar .filter-bar__mobile-button > button': [ + 'event', + 'Mijn aanvragen filters', + 'Click', + 'Filters pop-up mobiel', + ], + '#filterBar .filter-bar__mobile-button > button span': [ + 'event', + 'Mijn aanvragen filters', + 'Click', + 'Filters pop-up mobiel', + ], '.filter-bar #selectButton': [ 'event', - 'Status filter button', + 'Mijn aanvragen filters', 'Click', - 'Filter status', + 'Filter dropdown', ], - '.filter-bar input[type="checkbox"]': [ + '.filter-bar .multiselect-listbox #listboxDropdown input[type="checkbox"]': + [ + 'event', + 'Mijn aanvragen filters', + 'Click', + 'Checkbox status filter', + ], + '.filter-bar .multiselect-listbox #listboxDropdown .checkbox__label': [ 'event', - 'Status filter checkbox', + 'Mijn aanvragen filters', 'Click', - 'Check status filter option', + 'Checkbox status filter option', ], - '.filter-bar .checkbox__label': [ + // Track breadcrumbs + '.breadcrumbs .link': [ 'event', - 'Status filter checkbox', + 'Kruimelpad', 'Click', - 'Check status filter option', + 'Navigeren via kruimelpad', ], }, change: { - '.form#profile-edit input[name="phone"]': [ + '.form#profile-edit input[name="name"]': [ + 'event', + 'Contactgegevens', + 'name', + 'Change', + ], + '.form#profile-edit input[name="first_name"]': [ + 'event', + 'Contactgegevens', + 'Voornaam', + 'Change', + ], + '.form#profile-edit input[name="last_name"]': [ + 'event', + 'Contactgegevens', + 'Achternaam', + 'Change', + ], + '.form#profile-edit input[name="email"]': [ + 'event', + 'Contactgegevens', + 'E-mail', + 'Change', + ], + '.form#profile-edit input[name="phonenumber"]': [ 'event', 'Contactgegevens', - 'change', 'Telefoonnummer', + 'Change', + ], + '#id_query': ['event', 'Header', 'Zoeken', 'Enter click'], + '.form input[name="query"]': [ + 'event', + 'Header', + 'Zoeken', + 'Enter click', ], }, keydown: { - '.form#profile-edit input[name="phone"]': [ + '.form#profile-edit input[name="phonenumber"]': [ 'event', 'Contactgegevens', - 'change', 'Telefoonnummer', + 'Change', + ], + '#id_query': ['event', 'Header', 'Zoeken', 'Enter click'], + '.form input[name="query"]': [ + 'event', + 'Header', + 'Zoeken', + 'Enter click', ], }, } @@ -302,29 +502,162 @@ let isEventTrackerInitialized = false new EventTracker(selectorMap) } - // Poller function + document.addEventListener('DOMContentLoaded', function () { + // console.log('Static HTMX DOM fully loaded and parsed. Initializing tracker...') + + // Stable parent element for checking existence + const casesParentSelector = '#cases-detail-content' + + // Retry interval in milliseconds + const casesRetryInterval = 20 + + // Function to track delete links and spans + function trackDeleteEvents() { + const formUpload = document.querySelector('#form_upload') + + if (!formUpload) { + return false + } + + const fileList = formUpload.querySelector( + '.file-list .file-list__list .file-list__list-item' + ) + + if (!fileList) { + return false + } + + const links = formUpload.querySelectorAll( + '.file-list .file-list__list .file-list__list-item a' + ) + if (links.length) { + // console.log(`Found ${links.length} delete links. Adding click listeners...`) + links.forEach((link, index) => { + link.addEventListener('click', function () { + // console.log(`Link ${index + 1} clicked. Sending Siteimprove event.`) + if (typeof _sz !== 'undefined') { + _sz.push([ + 'event', + 'Aanvraag detail', + 'Click', + 'Verwijder document', + ]) + } + }) + }) + } + + const spans = formUpload.querySelectorAll( + '.file-list .file-list__list .file-list__list-item a span' + ) + if (spans.length) { + // console.log( `Found ${spans.length} delete spans. Adding click listeners...` ) + spans.forEach((span, index) => { + span.addEventListener('click', function () { + // console.log(`Span ${index + 1} clicked. Sending Siteimprove event.`) + if (typeof _sz !== 'undefined') { + _sz.push([ + 'event', + 'Aanvraag detail', + 'Click', + 'Verwijder document', + ]) + } + }) + }) + } // else { console.log('No delete spans found within the file list.') } + + return true // Successfully tracked + } + + function startPolling() { + // console.log('Starting polling for #form_upload...') + const pollingInterval = setInterval(() => { + const parent = document.querySelector(casesParentSelector) + + if (!parent) { + clearInterval(pollingInterval) + return + } + + if (trackDeleteEvents()) { + // console.log( 'Delete-file elements found and tracked. Stopping polling.' ) + clearInterval(pollingInterval) + } + }, casesRetryInterval) + } + + startPolling() + }) + function checkForSzObject() { - const intervalId = setInterval(function () { + const intervalId = setInterval(() => { if (typeof _sz !== 'undefined') { - clearInterval(intervalId) // Stop the interval once _sz is defined - initEventTracker() // Initialize EventTracker + clearInterval(intervalId) + initEventTracker() } else { console.log('-> SiteImprove _sz is not defined yet.') } - }, 1000) // Check every 1000 milliseconds (1 second) + }, 1000) } - // Start checking for _sz object checkForSzObject() - // MutationObserver to detect DOM changes - const observer = new MutationObserver(function () { + const observer = new MutationObserver(() => { if (typeof _sz !== 'undefined') { - observer.disconnect() // Stop observing once _sz is available + observer.disconnect() initEventTracker() } }) - // Observe DOM changes observer.observe(document, { childList: true, subtree: true }) })() + +function trackFileErrors() { + const fileErrorSize = document.querySelector('.file-error__size') + const fileErrorType = document.querySelector('.file-error__type') + const fileErrorTypeSize = document.querySelector('.file-error__type-size') + + if (typeof _sz !== 'undefined') { + const errors = [ + { condition: fileErrorSize, message: 'Error bestand te groot' }, + { condition: fileErrorType, message: 'Error verkeerd bestand type' }, + { + condition: fileErrorTypeSize, + message: 'Error bestand te groot en van verkeerde type', + }, + ] + + errors.forEach(({ condition, message }) => { + if (condition) { + _sz.push(['event', 'Mijn Aanvragen', 'Error', message]) + } + }) + } +} + +function observeDocumentUploadForm() { + const observer = new MutationObserver((mutationsList, observer) => { + for (const mutation of mutationsList) { + if (mutation.type === 'childList') { + const documentUploadForm = document.querySelector('#document-upload') + if (documentUploadForm) { + observer.disconnect() + observeFormErrors(documentUploadForm) + } + } + } + }) + + observer.observe(document.body, { childList: true, subtree: true }) +} + +function observeFormErrors(form) { + const observer = new MutationObserver(() => { + trackFileErrors() + }) + + observer.observe(form, { childList: true, subtree: true }) +} + +observeDocumentUploadForm() diff --git a/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss b/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss index a8a75c8f09..5eb65288ba 100644 --- a/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss +++ b/src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss @@ -163,6 +163,8 @@ } .multiselect-listbox__content { + z-index: 0; + .checkbox__label { display: flex; flex-direction: row; From e2b99b85dc788bee96bce1b994b756668d190d76 Mon Sep 17 00:00:00 2001 From: jiroghianni Date: Thu, 16 Jan 2025 16:04:18 +0100 Subject: [PATCH 2/3] [#2870] Remove buggy siteimprove MutationObserver, see [#2965] --- .../js/components/siteimprove/tracking.js | 151 ++---------------- 1 file changed, 9 insertions(+), 142 deletions(-) diff --git a/src/open_inwoner/js/components/siteimprove/tracking.js b/src/open_inwoner/js/components/siteimprove/tracking.js index b775615d7c..7686de23da 100644 --- a/src/open_inwoner/js/components/siteimprove/tracking.js +++ b/src/open_inwoner/js/components/siteimprove/tracking.js @@ -1,10 +1,11 @@ -// Mock _sz object for testing +// // Mock _sz object for testing // if (typeof _sz === 'undefined') { // var _sz = { // push: function (data) { // try { // console.log('Event pushed to _sz:', data) // } catch (error) { +// // Log the error // console.error('Error occurred while pushing event data:', error) // } // }, @@ -326,7 +327,7 @@ let isEventTrackerInitialized = false '#cases-content > div.card__grid > div > div > a > div > span > span.link__text': [ 'event', - 'Mijn aanvragen overzicht', + 'Mijn aanvragen', 'Click', "Open aanvraag via 'Bekijk aanvraag' link", ], @@ -502,162 +503,28 @@ let isEventTrackerInitialized = false new EventTracker(selectorMap) } - document.addEventListener('DOMContentLoaded', function () { - // console.log('Static HTMX DOM fully loaded and parsed. Initializing tracker...') - - // Stable parent element for checking existence - const casesParentSelector = '#cases-detail-content' - - // Retry interval in milliseconds - const casesRetryInterval = 20 - - // Function to track delete links and spans - function trackDeleteEvents() { - const formUpload = document.querySelector('#form_upload') - - if (!formUpload) { - return false - } - - const fileList = formUpload.querySelector( - '.file-list .file-list__list .file-list__list-item' - ) - - if (!fileList) { - return false - } - - const links = formUpload.querySelectorAll( - '.file-list .file-list__list .file-list__list-item a' - ) - if (links.length) { - // console.log(`Found ${links.length} delete links. Adding click listeners...`) - links.forEach((link, index) => { - link.addEventListener('click', function () { - // console.log(`Link ${index + 1} clicked. Sending Siteimprove event.`) - if (typeof _sz !== 'undefined') { - _sz.push([ - 'event', - 'Aanvraag detail', - 'Click', - 'Verwijder document', - ]) - } - }) - }) - } - - const spans = formUpload.querySelectorAll( - '.file-list .file-list__list .file-list__list-item a span' - ) - if (spans.length) { - // console.log( `Found ${spans.length} delete spans. Adding click listeners...` ) - spans.forEach((span, index) => { - span.addEventListener('click', function () { - // console.log(`Span ${index + 1} clicked. Sending Siteimprove event.`) - if (typeof _sz !== 'undefined') { - _sz.push([ - 'event', - 'Aanvraag detail', - 'Click', - 'Verwijder document', - ]) - } - }) - }) - } // else { console.log('No delete spans found within the file list.') } - - return true // Successfully tracked - } - - function startPolling() { - // console.log('Starting polling for #form_upload...') - const pollingInterval = setInterval(() => { - const parent = document.querySelector(casesParentSelector) - - if (!parent) { - clearInterval(pollingInterval) - return - } - - if (trackDeleteEvents()) { - // console.log( 'Delete-file elements found and tracked. Stopping polling.' ) - clearInterval(pollingInterval) - } - }, casesRetryInterval) - } - - startPolling() - }) - function checkForSzObject() { const intervalId = setInterval(() => { if (typeof _sz !== 'undefined') { - clearInterval(intervalId) - initEventTracker() + clearInterval(intervalId) // Stop the interval once _sz is defined + initEventTracker() // Initialize EventTracker } else { console.log('-> SiteImprove _sz is not defined yet.') } }, 1000) } + // Start checking for _sz object checkForSzObject() + // MutationObserver to detect DOM changes const observer = new MutationObserver(() => { if (typeof _sz !== 'undefined') { - observer.disconnect() + observer.disconnect() // Stop observing once _sz is available initEventTracker() } }) + // Observe DOM changes observer.observe(document, { childList: true, subtree: true }) })() - -function trackFileErrors() { - const fileErrorSize = document.querySelector('.file-error__size') - const fileErrorType = document.querySelector('.file-error__type') - const fileErrorTypeSize = document.querySelector('.file-error__type-size') - - if (typeof _sz !== 'undefined') { - const errors = [ - { condition: fileErrorSize, message: 'Error bestand te groot' }, - { condition: fileErrorType, message: 'Error verkeerd bestand type' }, - { - condition: fileErrorTypeSize, - message: 'Error bestand te groot en van verkeerde type', - }, - ] - - errors.forEach(({ condition, message }) => { - if (condition) { - _sz.push(['event', 'Mijn Aanvragen', 'Error', message]) - } - }) - } -} - -function observeDocumentUploadForm() { - const observer = new MutationObserver((mutationsList, observer) => { - for (const mutation of mutationsList) { - if (mutation.type === 'childList') { - const documentUploadForm = document.querySelector('#document-upload') - if (documentUploadForm) { - observer.disconnect() - observeFormErrors(documentUploadForm) - } - } - } - }) - - observer.observe(document.body, { childList: true, subtree: true }) -} - -function observeFormErrors(form) { - const observer = new MutationObserver(() => { - trackFileErrors() - }) - - observer.observe(form, { childList: true, subtree: true }) -} - -observeDocumentUploadForm() From d56f90f1969e18a5246fa8aa66784170263539cf Mon Sep 17 00:00:00 2001 From: jiroghianni Date: Tue, 21 Jan 2025 16:48:17 +0100 Subject: [PATCH 3/3] :construction: [#2870] Experimental general Siteimprove listeners --- .../js/components/siteimprove/tracking.js | 907 ++++++++---------- 1 file changed, 409 insertions(+), 498 deletions(-) diff --git a/src/open_inwoner/js/components/siteimprove/tracking.js b/src/open_inwoner/js/components/siteimprove/tracking.js index 7686de23da..ca6062ca16 100644 --- a/src/open_inwoner/js/components/siteimprove/tracking.js +++ b/src/open_inwoner/js/components/siteimprove/tracking.js @@ -1,530 +1,441 @@ -// // Mock _sz object for testing -// if (typeof _sz === 'undefined') { -// var _sz = { -// push: function (data) { -// try { -// console.log('Event pushed to _sz:', data) -// } catch (error) { -// // Log the error -// console.error('Error occurred while pushing event data:', error) -// } -// }, -// } -// } - -if (typeof _sz !== 'undefined') { - console.log('-> SiteImprove _sz object exists: ', _sz) -} else { - console.log('-> SiteImprove _sz is not defined yet.') +// Mock _sz object for testing +if (typeof _sz === 'undefined') { + var _sz = { + push: function (data) { + try { + console.log('Event pushed to _sz:', data) + } catch (error) { + console.error('Error occurred while pushing event data:', error) + } + }, + } } -// Ensure EventTracker is initialized only once -let isEventTrackerInitialized = false +// *** SELECTORS MUST BE DEFINED HERE (GLOBAL SCOPE) *** +const specificSelectors = { + // Full replacement for click events + // Open Aanvraag via cards + '#cases-content > .card__grid .column a.card div': [ + 'event', + 'Mijn aanvragen', + 'Click', + 'Open Aanvraag via tegel', + ], + '#cases-content > div.card__grid > div > div > a > div > div > span.card__status_indicator_text': + ['event', 'Mijn aanvragen', 'Click', 'Open Aanvraag via tegel'], + '#cases-content > div.card__grid > div > div > a > div > ul > li > p.utrecht-paragraph': + ['event', 'Mijn aanvragen', 'Click', 'Open Aanvraag via tegel'], + '#cases-content > div.card__grid > div > div > a > div > h2': [ + 'event', + 'Mijn aanvragen', + 'Click', + 'Open Aanvraag via tegel', + ], + '#cases-content > div.card__grid > div > div > a > div > ul > li': [ + 'event', + 'Mijn aanvragen', + 'Click', + 'Open Aanvraag via tegel', + ], + '#cases-content > div.card__grid > div > div > a > div > ul > li .utrecht-paragraph': + ['event', 'Mijn aanvragen', 'Click', 'Open Aanvraag via tegel'], + '#cases-content > div.card__grid > div > div > a > div > ul > li .card__caption span': + ['event', 'Mijn aanvragen', 'Click', 'Open Aanvraag via tegel'], + '#cases-content > div.card__grid > div > div > a > div > span > span': [ + 'event', + 'Mijn aanvragen', + 'Click', + "Open aanvraag via 'Bekijk aanvraag' link", + ], + '#cases-content > div.card__grid > div > div > a > div > span > span.link__text': + [ + 'event', + 'Mijn aanvragen', + 'Click', + "Open aanvraag via 'Bekijk aanvraag' link", + ], + '.header > .header__container > nav.primary-navigation.primary-navigation--open.primary-navigation__main > .primary-navigation__list > li > ul > li > a > .link__text': + ['event', 'Dropdown Onderwerpen desktop', 'Click', 'Onderwerpen'], + '.header .header__submenu > nav.primary-navigation > ul > li.primary-navigation__list-item.dropdown-nav__toggle.nav__list--open > ul > li > a > .link__text': + ['event', 'Dropdown Onderwerpen mobiel', 'Click', 'Onderwerpen'], + // End of category events + '.footer__logo .link img': ['event', 'Footer', 'Click', 'Footer logo'], + // Start Search submits + '#search-form-mobile-closed > .form__actions > button': [ + 'event', + 'Header mobiel Zoeken', + 'Zoeken', + 'Icon click', + ], + '#search-form-mobile-closed > .form__actions > button > .material-icons ': [ + 'event', + 'Header mobiel Zoeken', + 'Icon click', + 'Zoeken', + ], + '#search-form-desktop > .form__actions > button': [ + 'event', + 'Header desktop Zoeken', + 'Icon click', + 'Zoeken', + ], + '#search-form-desktop > .form__actions > button > .material-icons ': [ + 'event', + 'Header desktop Zoeken', + 'Icon click', + 'Zoeken', + ], + // End of search submits + // Start Communicatievoorkeuren + // Can get contaminated with uncheck changes + '.form#change-notifications #id_messages_notifications': [ + 'event', + 'Communicatievoorkeuren', + 'Click berichtnotificatie', + 'Disable', + ], + '.form#change-notifications #id_plans_notifications': [ + 'event', + 'Communicatievoorkeuren', + 'Click samenwerkingnotificatie', + 'Disable', + ], + '.form#change-notifications #id_cases_notifications': [ + 'event', + 'Communicatievoorkeuren', + 'Click zaaknotificatie', + 'Disable', + ], + '.form#change-notifications #id_cases_notifications:checked': [ + 'event', + 'Communicatievoorkeuren', + 'Click zaaknotificatie', + 'Enable', + ], + '.form#change-notifications #id_messages_notifications:checked': [ + 'event', + 'Communicatievoorkeuren', + 'Click berichtnotificatie', + 'Enable', + ], + '.form#change-notifications #id_plans_notifications:checked': [ + 'event', + 'Communicatievoorkeuren', + 'Click samenwerkingnotificatie', + 'Enable', + ], + '.form#change-notifications > .form__actions.form__actions--fullwidth > a.button': + [ + 'event', + 'Communicatievoorkeuren', + 'Change', + 'No Save (terug naar mijn profiel)', + ], + '.form#change-notifications > .form__actions.form__actions--fullwidth > a.button .material-icons-outlined': + [ + 'event', + 'Communicatievoorkeuren', + 'Change', + 'No Save (terug naar mijn profiel)', + ], + '.form#change-notifications button.button--primary': [ + 'event', + 'Communicatievoorkeuren', + 'Change submit', + 'Save', + ], + // End of Communicatievoorkeuren + // Detail Case view + '#statuses_component .status-list__notification-content > p.utrecht-paragraph.status-list__upload.status-list__upload--enabled > a': + ['event', 'Aanvraag detail', 'Scroll click', 'Scroll omlaag'], + '#cases-detail-content .column.column--start-4.column--span-6 > section.case-detail__documents > .file-list > ul > li > aside > div > div > a > span': + ['event', 'Aanvraag detail', 'Click', 'Download document'], + '#document-upload > div.form__control.file-input > div.card > div > label.button.button--primary.file-input__label-empty': + ['event', 'Aanvraag detail', 'Click', 'Selecteer bestanden'], + '#document-upload > div.form__control.file-input > div.form__actions.form__actions--fullwidth > button': + ['event', 'Aanvraag detail', 'Click', 'Upload documenten'], + '#document-upload > div.form__control.file-input > div.form__actions.form__actions--fullwidth > button span': + ['event', 'Aanvraag detail', 'Click', 'Upload documenten'], + // Detail case toggle statuses + '#statuses_component > aside > ul > li.status-list__list-item.status--current > div > h3 > button .material-icons-outlined ': + ['event', 'Mijn Aanvragen accordeon', 'Click', 'Open huidige status'], + '#statuses_component > aside > ul > li.status--completed.status-list__list-item > div > h3 > button .material-icons-outlined ': + ['event', 'Mijn Aanvragen accordeon', 'Click', 'Open voltooide status'], + '#statuses_component > aside > ul > li.status--active.status-list__list-item > div > h3 > button .material-icons-outlined ': + ['event', 'Mijn Aanvragen accordeon', 'Click', 'Open openstaande status'], + // Accessibility header + '.accessibility-header > ul > li > a[aria-label="Lees voor"] > .link__text': [ + 'event', + 'Accessibility header', + 'Click', + 'Schakel voorlezen', + ], + '.accessibility-header > ul > li > a[aria-label="Lees voor"] > .material-icons': + ['event', 'Accessibility header', 'Click', 'Schakel voorlezen'], + '.accessibility-header > ul > li > a[aria-label="Pauzeer"] > .link__text': [ + 'event', + 'Accessibility header', + 'Click', + 'Schakel pauzeren', + ], + '.accessibility-header > ul > li > a[aria-label="Pauzeer"] > .material-icons': + ['event', 'Accessibility header', 'Click', 'Schakel pauzeren'], + '.accessibility-header > ul > li > a[aria-label="Vergroten"] > .link__text': [ + 'event', + 'Accessibility header', + 'Click', + 'Schakel vergroten', + ], + '.accessibility-header > ul > li > a[aria-label="Vergroten"] > .material-icons': + ['event', 'Accessibility header', 'Click', 'Schakel vergroten'], + '.accessibility-header > ul > li > a[aria-label="Verkleinen"] > .link__text': + ['event', 'Accessibility header', 'Click', 'Schakel verkleinen'], + '.accessibility-header > ul > li > a[aria-label="Verkleinen"] > .material-icons': + ['event', 'Accessibility header', 'Click', 'Schakel verkleinen'], + '.accessibility-header > ul > li > a[aria-label="Dyslexie"] > .link__text': [ + 'event', + 'Accessibility header', + 'Click', + 'Schakel dyslexie', + ], + '.accessibility-header > ul > li > a[aria-label="Dyslexie"] > .material-icons': + ['event', 'Accessibility header', 'Click', 'Schakel dyslexie'], + '.accessibility-header > ul > li > a[aria-label="Help"] > .link__text': [ + 'event', + 'Accessibility header', + 'Click', + 'Open help pop-up', + ], + '.accessibility-header > ul > li > a[aria-label="Help"] > .material-icons': [ + 'event', + 'Accessibility header', + 'Click', + 'Open help pop-up', + ], + '.accessibility-header > ul > li > a[aria-label="Print pagina"] > .link__text': + ['event', 'Accessibility header', 'Click', 'Schakel Print pagina'], + '.accessibility-header > ul > li > a[aria-label="Print pagina"] > .material-icons': + ['event', 'Accessibility header', 'Click', 'Schakel Print pagina'], + // Filters in Cases list + '#filterBar .filter-bar__mobile-button > button': [ + 'event', + 'Mijn aanvragen filters', + 'Click', + 'Filters pop-up mobiel', + ], + '#filterBar .filter-bar__mobile-button > button span': [ + 'event', + 'Mijn aanvragen filters', + 'Click', + 'Filters pop-up mobiel', + ], + '.filter-bar #selectButton': [ + 'event', + 'Mijn aanvragen filters', + 'Click', + 'Filter dropdown', + ], + '.filter-bar .multiselect-listbox #listboxDropdown input[type="checkbox"]': [ + 'event', + 'Mijn aanvragen filters', + 'Click', + 'Checkbox status filter', + ], + '.filter-bar .multiselect-listbox #listboxDropdown .checkbox__label': [ + 'event', + 'Mijn aanvragen filters', + 'Click', + 'Checkbox status filter option', + ], + // Track breadcrumbs + '.breadcrumbs .link': [ + 'event', + 'Kruimelpad', + 'Click', + 'Navigeren via kruimelpad', + ], + // ... more click selectors +} -;(function () { - function initEventTracker() { - if (isEventTrackerInitialized) return // Prevent multiple initializations - isEventTrackerInitialized = true +const partialSelectors = { + // Partial replacement for click events + '.header > div > nav.primary-navigation.primary-navigation--desktop.primary-navigation__authenticated > ul > li > ul > li > a[aria-label="Mijn profiel"]': + { category: 'Mijn Profiel', action: 'Click mijn Profiel' }, + // ... more partial click selectors +} - class EventTracker { - constructor(selectorMap) { - this.selectorMap = selectorMap - this.trackEvents() - } +const changeSelectors = { + // Full replacement for change events + '.form#profile-edit input[name="name"]': [ + 'event', + 'Contactgegevens', + 'name', + 'Change', + ], - trackEvents() { - // Use a single event listener for each event type - ;['click', 'change', 'keydown'].forEach((eventType) => { - document.body.addEventListener( - eventType, - this.handleEvent.bind(this, eventType) - ) - }) - } + '.form#profile-edit input[name="first_name"]': [ + 'event', + 'Contactgegevens', + 'Voornaam', + 'Change', + ], - handleEvent(eventType, event) { - const target = event.target - const actionMap = this.selectorMap[eventType] + '.form#profile-edit input[name="last_name"]': [ + 'event', + 'Contactgegevens', + 'Achternaam', + 'Change', + ], - if (!actionMap) { - return - } + '.form#profile-edit input[name="email"]': [ + 'event', + 'Contactgegevens', + 'E-mail', + 'Change', + ], + '.form#profile-edit input[name="phonenumber"]': [ + 'event', + 'Contactgegevens', + 'Telefoonnummer', + 'Change', + ], + '#id_query': ['event', 'Header', 'Zoeken', 'Enter click'], + '.form input[name="query"]': ['event', 'Header', 'Zoeken', 'Enter click'], + // ... more change selectors +} - if (eventType === 'click') { - this.handleClickEvent(target) - } else if (eventType === 'change') { - this.handleChangeEvent(target) - } else if (eventType === 'keydown' && event.key === 'Enter') { - this.handleEnterKeyEvent(target) - } - } +const keydownSelectors = { + // Full replacement for keydown (Enter) events + '#id_query': ['event', 'Header', 'Zoeken', 'Enter click'], + '.form#profile-edit input[name="phonenumber"]': [ + 'event', + 'Contactgegevens', + 'Telefoonnummer', + 'Change', + ], + // ... more keydown selectors +} - handleClickEvent(target) { - const actionMap = this.selectorMap['click'] +;(function () { + let isEventTrackerInitialized = false - if (!actionMap) { - return - } + function initGeneralEventTracker() { + if (isEventTrackerInitialized) return + isEventTrackerInitialized = true - Object.keys(actionMap).forEach((selector) => { - if (target.matches(selector)) { - const eventData = actionMap[selector] - eventData.push(this.extractEventData(target)) - _sz.push(eventData) - } - }) - } + const eventTypes = ['click', 'change', 'keydown'] - handleChangeEvent(target) { - const actionMap = this.selectorMap['change'] + const selectorMaps = { + click: { full: specificSelectors, partial: partialSelectors }, + change: { full: changeSelectors }, + keydown: { full: keydownSelectors }, + } - if (!actionMap) { - return + function handleSelectors(eventType, target, selectors, isPartial = false) { + for (const [selector, data] of Object.entries(selectors)) { + if (target.matches(selector)) { + console.log( + `Specific event pushed (${ + isPartial ? 'partial' : 'full' + } - ${eventType}):`, + data + ) + return data } + } + return null + } - Object.keys(actionMap).forEach((selector) => { - if (target.matches(selector)) { - const eventData = actionMap[selector] - eventData.push(this.extractEventData(target)) - _sz.push(eventData) - } - }) + function getCategoryFromURL() { + const path = window.location.pathname + const parts = path.split('/') + if (parts.length > 1) { + return parts.slice(1).join('/') + } else { + return 'Home-page' } + } - handleEnterKeyEvent(target) { - const actionMap = this.selectorMap['keydown'] + function getLabelFromTarget(target) { + return ( + target.getAttribute('aria-label') || + target.value || + target.textContent.trim() || + 'Empty label' + ) + } - if (!actionMap) { - return - } + function handleEvent(event) { + const eventType = event.type + const target = event.target + let eventData = null - Object.keys(actionMap).forEach((selector) => { - if (target.matches(selector)) { - const eventData = actionMap[selector] - eventData.push(this.extractEventData(target)) - _sz.push(eventData) + if (!eventTypes.includes(eventType)) { + console.warn(`Unsupported event type: ${eventType}`) + return + } + + // Check if selectorMaps[eventType] exists BEFORE accessing its properties + if (selectorMaps.hasOwnProperty(eventType)) { + // This is the fix! + eventData = handleSelectors( + eventType, + target, + selectorMaps[eventType].full + ) + if (!eventData && selectorMaps[eventType].partial) { + let partialData = handleSelectors( + eventType, + target, + selectorMaps[eventType].partial, + true + ) + if (partialData) { + const category = partialData.category || getCategoryFromURL() + const label = partialData.label || getLabelFromTarget(target) + const action = partialData.action || eventType + eventData = ['event', category, action, label] } - }) + } } - extractEventData(target) { - if (!target || typeof target.getAttribute !== 'function') { - return target.textContent.trim() + if (eventType === 'click' && !eventData) { + let isInteractive = false + let currentElement = target + while (currentElement) { + if ( + ['a', 'button', 'label', 'input', 'select', 'textarea'].includes( + currentElement.tagName.toLowerCase() + ) + ) { + isInteractive = true + break + } + currentElement = currentElement.parentElement } - return ( - target.getAttribute('aria-label') || - target.value || - target.textContent.trim() - ) + if (isInteractive) { + const category = getCategoryFromURL() + const label = getLabelFromTarget(target) + eventData = ['event', category, eventType, label] + } } - } - const selectorMap = { - click: { - '.form#profile-edit button[type="submit"]': [ - 'event', - 'Contactgegevens', - 'Change', - 'Save (Profiel bewerkt)', - ], - '.form#profile-edit a.button': [ - 'event', - 'Contactgegevens', - 'Change', - 'No Save (terug naar mijn profiel)', - ], - '#profile-edit > .form__actions.form__actions--fullwidth > a > .material-icons-outlined': - [ - 'event', - 'Contactgegevens', - 'Change', - 'No Save (terug naar mijn profiel)', - ], - // Start Category events - '#content .plugin__categories .card .card__body--compact': [ - 'event', - 'Homepage', - 'Click', - 'Onderwerpen', - ], - '#content .plugin__categories .card .card__body--compact .card__heading-3': - ['event', 'Homepage', 'Click', 'Onderwerpen'], - '#content .plugin__categories .card img': [ - 'event', - 'Homepage', - 'Click', - 'Onderwerpen', - ], - '#content .plugin__categories .card .link': [ - 'event', - 'Homepage', - 'Click', - 'Onderwerpen', - ], - '.header > .header__container > nav.primary-navigation.primary-navigation--open.primary-navigation__main > .primary-navigation__list > li > ul > li > a > .link__text': - ['event', 'Dropdown Onderwerpen desktop', 'Click', 'Onderwerpen'], - '.header .header__submenu > nav.primary-navigation > ul > li.primary-navigation__list-item.dropdown-nav__toggle.nav__list--open > ul > li > a > .link__text': - ['event', 'Dropdown Onderwerpen mobiel', 'Click', 'Onderwerpen'], - // End of category events - '.footer__logo .link img': ['event', 'Footer', 'Click', 'Footer logo'], - // Start Search submits - '#search-form-mobile-closed > .form__actions > button': [ - 'event', - 'Header mobiel Zoeken', - 'Zoeken', - 'Icon click', - ], - '#search-form-mobile-closed > .form__actions > button > .material-icons ': - ['event', 'Header mobiel Zoeken', 'Icon click', 'Zoeken'], - '#search-form-desktop > .form__actions > button': [ - 'event', - 'Header desktop Zoeken', - 'Icon click', - 'Zoeken', - ], - '#search-form-desktop > .form__actions > button > .material-icons ': [ - 'event', - 'Header desktop Zoeken', - 'Icon click', - 'Zoeken', - ], - // End of search submits - // Start Communicatievoorkeuren - // Can get contaminated with uncheck changes - '.form#change-notifications #id_messages_notifications': [ - 'event', - 'Communicatievoorkeuren', - 'Click berichtnotificatie', - 'Disable', - ], - '.form#change-notifications #id_plans_notifications': [ - 'event', - 'Communicatievoorkeuren', - 'Click samenwerkingnotificatie', - 'Disable', - ], - '.form#change-notifications #id_cases_notifications': [ - 'event', - 'Communicatievoorkeuren', - 'Click zaaknotificatie', - 'Disable', - ], - '.form#change-notifications #id_cases_notifications:checked': [ - 'event', - 'Communicatievoorkeuren', - 'Click zaaknotificatie', - 'Enable', - ], - '.form#change-notifications #id_messages_notifications:checked': [ - 'event', - 'Communicatievoorkeuren', - 'Click berichtnotificatie', - 'Enable', - ], - '.form#change-notifications #id_plans_notifications:checked': [ - 'event', - 'Communicatievoorkeuren', - 'Click samenwerkingnotificatie', - 'Enable', - ], - '.form#change-notifications > .form__actions.form__actions--fullwidth > a.button': - [ - 'event', - 'Communicatievoorkeuren', - 'Change', - 'No Save (terug naar mijn profiel)', - ], - '.form#change-notifications > .form__actions.form__actions--fullwidth > a.button .material-icons-outlined': - [ - 'event', - 'Communicatievoorkeuren', - 'Change', - 'No Save (terug naar mijn profiel)', - ], - '.form#change-notifications button.button--primary': [ - 'event', - 'Communicatievoorkeuren', - 'Change submit', - 'Save', - ], - // End of Communicatievoorkeuren - // header mobile dropdown profiel - '.header > div > div.header--mobile.header__submenu > nav > ul > li > a[aria-label="Mijn profiel"]': - [ - 'event', - 'Mijn Profiel', - 'Click mijn profiel ', - 'Open Mijn profiel mobiel', - ], - '.header > div > div.header--mobile.header__submenu > nav > ul > li > a[aria-label="Mijn profiel"] .link__text': - [ - 'event', - 'Mijn Profiel', - 'Click mijn profiel ', - 'Open Mijn profiel mobiel', - ], - '.header > div > div.header--mobile.header__submenu > nav > ul > li > a[aria-label="Mijn profiel"] .material-icons-outlined': - [ - 'event', - 'Mijn Profiel', - 'Click mijn profiel ', - 'Open Mijn profiel mobiel', - ], - // Desktop authenticated menu - '.header > div > nav.primary-navigation.primary-navigation--desktop.primary-navigation__authenticated > ul > li > ul > li > a[aria-label="Mijn profiel"]': - ['event', 'Mijn Profiel', 'Click mijn Profiel', 'Open Mijn profiel'], - '.header > div > nav.primary-navigation.primary-navigation--desktop.primary-navigation__authenticated > ul > li > ul > li > a[aria-label="Mijn profiel"] span': - ['event', 'Mijn Profiel', 'Click mijn Profiel', 'Open Mijn profiel'], - '.header > div > nav.primary-navigation.primary-navigation--desktop.primary-navigation__authenticated > ul > li > ul > li > a[aria-label="Mijn aanvragen"]': - ['event', 'Header', 'Click', 'Open Mijn aanvragen'], - '.header > div > nav.primary-navigation.primary-navigation--desktop.primary-navigation__authenticated > ul > li > ul > li > a[aria-label="Mijn aanvragen"] span': - ['event', 'Header', 'Click', 'Open Mijn aanvragen'], - '.header > div > nav.primary-navigation.primary-navigation--desktop.primary-navigation__authenticated > ul > li > ul > li > a[aria-label="Uitloggen"]': - ['event', 'Logout button', 'Click on logout', 'Logout'], - '.header > div > nav.primary-navigation.primary-navigation--desktop.primary-navigation__authenticated > ul > li > ul > li > a[aria-label="Uitloggen"] span': - ['event', 'Logout button', 'Click on logout', 'Logout'], - // Header dropdown Aanvragen mobile - '.header .header--mobile.header__submenu > nav.primary-navigation--mobile > .primary-navigation__list > .primary-navigation__list-item > a[aria-label="Mijn aanvragen"]': - ['event', 'Mijn aanvragen', 'Click', 'Open Mijn aanvragen mobiel'], - '.header .header--mobile.header__submenu > nav.primary-navigation--mobile > .primary-navigation__list > .primary-navigation__list-item > a[aria-label="Mijn aanvragen"] .link__text': - ['event', 'Mijn aanvragen', 'Click', 'Open Mijn aanvragen mobiel'], - '.header .header--mobile.header__submenu > nav.primary-navigation--mobile > .primary-navigation__list > .primary-navigation__list-item > a[aria-label="Mijn aanvragen"] > .material-icons-outlined': - ['event', 'Mijn aanvragen', 'Click', 'Open Mijn aanvragen mobiel'], - // Open Aanvraag via cards - '#cases-content > .card__grid .column a.card div': [ - 'event', - 'Mijn aanvragen', - 'Click', - 'Open Aanvraag via tegel', - ], - '#cases-content > div.card__grid > div > div > a > div > div > span.card__status_indicator_text': - ['event', 'Mijn aanvragen', 'Click', 'Open Aanvraag via tegel'], - '#cases-content > div.card__grid > div > div > a > div > ul > li > p.utrecht-paragraph': - ['event', 'Mijn aanvragen', 'Click', 'Open Aanvraag via tegel'], - '#cases-content > div.card__grid > div > div > a > div > h2': [ - 'event', - 'Mijn aanvragen', - 'Click', - 'Open Aanvraag via tegel', - ], - '#cases-content > div.card__grid > div > div > a > div > ul > li': [ - 'event', - 'Mijn aanvragen', - 'Click', - 'Open Aanvraag via tegel', - ], - '#cases-content > div.card__grid > div > div > a > div > ul > li .utrecht-paragraph': - ['event', 'Mijn aanvragen', 'Click', 'Open Aanvraag via tegel'], - '#cases-content > div.card__grid > div > div > a > div > ul > li .card__caption span': - ['event', 'Mijn aanvragen', 'Click', 'Open Aanvraag via tegel'], - '#cases-content > div.card__grid > div > div > a > div > span > span': [ - 'event', - 'Mijn aanvragen', - 'Click', - "Open aanvraag via 'Bekijk aanvraag' link", - ], - '#cases-content > div.card__grid > div > div > a > div > span > span.link__text': - [ - 'event', - 'Mijn aanvragen', - 'Click', - "Open aanvraag via 'Bekijk aanvraag' link", - ], - // Detail Case view - '#statuses_component .status-list__notification-content > p.utrecht-paragraph.status-list__upload.status-list__upload--enabled > a': - ['event', 'Aanvraag detail', 'Scroll click', 'Scroll omlaag'], - '#cases-detail-content .column.column--start-4.column--span-6 > section.case-detail__documents > .file-list > ul > li > aside > div > div > a > span': - ['event', 'Aanvraag detail', 'Click', 'Download document'], - '#document-upload > div.form__control.file-input > div.card > div > label.button.button--primary.file-input__label-empty': - ['event', 'Aanvraag detail', 'Click', 'Selecteer bestanden'], - '#document-upload > div.form__control.file-input > div.form__actions.form__actions--fullwidth > button': - ['event', 'Aanvraag detail', 'Click', 'Upload documenten'], - '#document-upload > div.form__control.file-input > div.form__actions.form__actions--fullwidth > button span': - ['event', 'Aanvraag detail', 'Click', 'Upload documenten'], - // Detail case toggle statuses - '#statuses_component > aside > ul > li.status-list__list-item.status--current > div > h3 > button': - ['event', 'Mijn Aanvragen accordeon', 'Click', 'Open huidige status'], - '#statuses_component > aside > ul > li.status-list__list-item.status--current > div > h3 > button span': - ['event', 'Mijn Aanvragen accordeon', 'Click', 'Open huidige status'], - '#statuses_component > aside > ul > li.status--completed.status-list__list-item > div > h3 > button': - [ - 'event', - 'Mijn Aanvragen accordeon', - 'Click', - 'Open voltooide status', - ], - '#statuses_component > aside > ul > li.status--completed.status-list__list-item > div > h3 > button span': - [ - 'event', - 'Mijn Aanvragen accordeon', - 'Click', - 'Open voltooide status', - ], - '#statuses_component > aside > ul > li.status--active.status-list__list-item > div > h3 > button': - [ - 'event', - 'Mijn Aanvragen accordeon', - 'Click', - 'Open openstaande status', - ], - '#statuses_component > aside > ul > li.status--active.status-list__list-item > div > h3 > button span': - [ - 'event', - 'Mijn Aanvragen accordeon', - 'Click', - 'Open openstaande status', - ], - // Accessibility header - '.accessibility-header > ul > li > a[aria-label="Lees voor"] > .link__text': - ['event', 'Accessibility header', 'Click', 'Schakel voorlezen'], - '.accessibility-header > ul > li > a[aria-label="Lees voor"] > .material-icons': - ['event', 'Accessibility header', 'Click', 'Schakel voorlezen'], - '.accessibility-header > ul > li > a[aria-label="Pauzeer"] > .link__text': - ['event', 'Accessibility header', 'Click', 'Schakel pauzeren'], - '.accessibility-header > ul > li > a[aria-label="Pauzeer"] > .material-icons': - ['event', 'Accessibility header', 'Click', 'Schakel pauzeren'], - '.accessibility-header > ul > li > a[aria-label="Vergroten"] > .link__text': - ['event', 'Accessibility header', 'Click', 'Schakel vergroten'], - '.accessibility-header > ul > li > a[aria-label="Vergroten"] > .material-icons': - ['event', 'Accessibility header', 'Click', 'Schakel vergroten'], - '.accessibility-header > ul > li > a[aria-label="Verkleinen"] > .link__text': - ['event', 'Accessibility header', 'Click', 'Schakel verkleinen'], - '.accessibility-header > ul > li > a[aria-label="Verkleinen"] > .material-icons': - ['event', 'Accessibility header', 'Click', 'Schakel verkleinen'], - '.accessibility-header > ul > li > a[aria-label="Dyslexie"] > .link__text': - ['event', 'Accessibility header', 'Click', 'Schakel dyslexie'], - '.accessibility-header > ul > li > a[aria-label="Dyslexie"] > .material-icons': - ['event', 'Accessibility header', 'Click', 'Schakel dyslexie'], - '.accessibility-header > ul > li > a[aria-label="Help"] > .link__text': - ['event', 'Accessibility header', 'Click', 'Open help pop-up'], - '.accessibility-header > ul > li > a[aria-label="Help"] > .material-icons': - ['event', 'Accessibility header', 'Click', 'Open help pop-up'], - '.accessibility-header > ul > li > a[aria-label="Print pagina"] > .link__text': - ['event', 'Accessibility header', 'Click', 'Schakel Print pagina'], - '.accessibility-header > ul > li > a[aria-label="Print pagina"] > .material-icons': - ['event', 'Accessibility header', 'Click', 'Schakel Print pagina'], - // Filters in Cases list - '#filterBar .filter-bar__mobile-button > button': [ - 'event', - 'Mijn aanvragen filters', - 'Click', - 'Filters pop-up mobiel', - ], - '#filterBar .filter-bar__mobile-button > button span': [ - 'event', - 'Mijn aanvragen filters', - 'Click', - 'Filters pop-up mobiel', - ], - '.filter-bar #selectButton': [ - 'event', - 'Mijn aanvragen filters', - 'Click', - 'Filter dropdown', - ], - '.filter-bar .multiselect-listbox #listboxDropdown input[type="checkbox"]': - [ - 'event', - 'Mijn aanvragen filters', - 'Click', - 'Checkbox status filter', - ], - '.filter-bar .multiselect-listbox #listboxDropdown .checkbox__label': [ - 'event', - 'Mijn aanvragen filters', - 'Click', - 'Checkbox status filter option', - ], - // Track breadcrumbs - '.breadcrumbs .link': [ - 'event', - 'Kruimelpad', - 'Click', - 'Navigeren via kruimelpad', - ], - }, - change: { - '.form#profile-edit input[name="name"]': [ - 'event', - 'Contactgegevens', - 'name', - 'Change', - ], - '.form#profile-edit input[name="first_name"]': [ - 'event', - 'Contactgegevens', - 'Voornaam', - 'Change', - ], - '.form#profile-edit input[name="last_name"]': [ - 'event', - 'Contactgegevens', - 'Achternaam', - 'Change', - ], - '.form#profile-edit input[name="email"]': [ - 'event', - 'Contactgegevens', - 'E-mail', - 'Change', - ], - '.form#profile-edit input[name="phonenumber"]': [ - 'event', - 'Contactgegevens', - 'Telefoonnummer', - 'Change', - ], - '#id_query': ['event', 'Header', 'Zoeken', 'Enter click'], - '.form input[name="query"]': [ - 'event', - 'Header', - 'Zoeken', - 'Enter click', - ], - }, - keydown: { - '.form#profile-edit input[name="phonenumber"]': [ - 'event', - 'Contactgegevens', - 'Telefoonnummer', - 'Change', - ], - '#id_query': ['event', 'Header', 'Zoeken', 'Enter click'], - '.form input[name="query"]': [ - 'event', - 'Header', - 'Zoeken', - 'Enter click', - ], - }, + if (eventData && typeof _sz !== 'undefined') { + _sz.push(eventData) + } else if (eventData) { + console.warn('_sz is not defined') + } } - new EventTracker(selectorMap) - } - - function checkForSzObject() { - const intervalId = setInterval(() => { - if (typeof _sz !== 'undefined') { - clearInterval(intervalId) // Stop the interval once _sz is defined - initEventTracker() // Initialize EventTracker - } else { - console.log('-> SiteImprove _sz is not defined yet.') + window.addEventListener('click', handleEvent) + window.addEventListener('change', handleEvent) + window.addEventListener('keydown', (event) => { + if (event.key === 'Enter') { + handleEvent(event) } - }, 1000) + }) } - // Start checking for _sz object - checkForSzObject() - - // MutationObserver to detect DOM changes - const observer = new MutationObserver(() => { - if (typeof _sz !== 'undefined') { - observer.disconnect() // Stop observing once _sz is available - initEventTracker() - } - }) - - // Observe DOM changes - observer.observe(document, { childList: true, subtree: true }) + initGeneralEventTracker() })()