@@ -2,71 +2,82 @@ import Countly from 'countly-sdk-web'
22
33const metricsConsent = localStorage . getItem ( 'metrics_consent' )
44
5- const banner = document . querySelector ( '.js-metrics-notification' )
6- const declineWarning = document . querySelector ( '.js-metrics-notification-decline-warning' )
7- const acceptButton = document . querySelector ( '.js-metrics-notification-accept' )
8- const declineButton = document . querySelector ( '.js-metrics-notification-decline' )
9- const declineWarningClose = document . querySelector ( '.js-metrics-notification-warning-close' )
10- const bannerToggle = document . querySelector ( '.js-cookie-banner-toggle' )
5+ const metricsNotificationModal = document . querySelector ( '.js-metrics-notification-modal' )
6+ const metricsAgreementContent = document . querySelector ( '.js-metrics-agreement' )
7+ const metricsManagePreferencesContent = document . querySelector ( '.js-metrics-preferences' )
8+
9+ const closeNotificationModalX = document . querySelector ( '.js-modal-close' )
10+ const confirmMetricNoticeBtn = document . querySelector ( '.js-metrics-notification-confirm' )
11+
12+ const saveMetricPreferencesBtn = document . querySelector ( '.js-metrics-notification-preferences-save' )
13+
14+ const managePreferencesBtn = document . querySelector ( '.js-metrics-notification-manage' )
15+ const necessaryMetricsToggle = document . querySelector ( '.js-necessary-toggle' ) as HTMLInputElement
16+ const metricsModalToggle = document . querySelector ( '.js-metrics-modal-toggle' )
1117
1218function addConsent ( consent : string [ ] ) : void {
13- hideConsentBanner ( )
1419 Countly . add_consent ( consent )
1520
1621 if ( Array . isArray ( consent ) ) {
1722 localStorage . setItem ( 'metrics_consent' , JSON . stringify ( consent ) )
1823 } else {
19- localStorage . setItem ( 'metrics_consent' , JSON . stringify ( [ consent ] ) )
24+ localStorage . setItem (
25+ 'metrics_consent' ,
26+ JSON . stringify ( [ consent ] )
27+ )
2028 }
2129}
2230
2331function addConsentEventHandler ( ) : void {
24- acceptButton ?. removeEventListener ( 'click' , addConsentEventHandler )
32+ metricsNotificationModal ?. classList . add ( 'hidden' )
2533
26- addConsent ( [ 'all ' ] )
34+ addConsent ( [ 'minimal ' ] )
2735}
2836
29- function declineConsentEventHandler ( ) : void {
30- addConsent ( [ 'necessary' ] )
31- hideConsentBanner ( )
32- displayDeclineWarning ( )
33- }
37+ function updateNecessaryMetricPreferences ( ) : void {
38+ const necessaryMetricsAccepted = necessaryMetricsToggle . checked
3439
35- function displayDeclineWarning ( ) : void {
36- declineWarning ?. classList . remove ( 'hidden' )
37- bannerToggle ?. setAttribute ( 'disabled' , '' )
40+ if ( necessaryMetricsAccepted ) {
41+ addConsent ( [ 'minimal' ] )
42+ } else {
43+ Countly . remove_consent ( [ 'minimal' ] )
44+ localStorage . setItem ( 'metrics_consent' , JSON . stringify ( [ ] ) )
45+ }
3846}
3947
40- function declineWarningCloseEventHandler ( ) : void {
41- declineWarningClose ?. removeEventListener ( 'click' , declineWarningCloseEventHandler )
42- declineWarning ?. classList . add ( 'hidden' )
43- bannerToggle ?. removeAttribute ( 'disabled' )
48+ function initMetricsModal ( ) : void {
49+ metricsNotificationModal ?. classList . remove ( 'hidden' )
50+ confirmMetricNoticeBtn ?. classList . remove ( 'hidden' )
51+ managePreferencesBtn ?. classList . remove ( 'hidden' )
52+ metricsAgreementContent ?. classList . remove ( 'hidden' )
53+ closeNotificationModalX ?. addEventListener ( 'click' , hideMetricsModal )
54+ confirmMetricNoticeBtn ?. addEventListener ( 'click' , addConsentEventHandler )
55+ managePreferencesBtn ?. addEventListener ( 'click' , managePreferencesClicked )
4456}
4557
46- function hideConsentBanner ( ) : void {
47- acceptButton ?. removeEventListener ( 'click' , addConsentEventHandler )
48- declineButton ?. removeEventListener ( 'click' , declineConsentEventHandler )
49- banner ?. classList . add ( 'hidden' )
50- bannerToggle ?. removeAttribute ( 'disabled' )
58+ function hideMetricsModal ( ) : void {
59+ metricsNotificationModal ?. classList . add ( 'hidden' )
60+ metricsManagePreferencesContent ?. classList . add ( 'hidden' )
61+ metricsAgreementContent ?. classList . remove ( 'hidden' )
5162}
5263
53- /**
54- * Display the consent banner and handle the user's choice
55- */
56- function displayConsentBanner ( ) : void {
57- acceptButton ?. addEventListener ( 'click' , addConsentEventHandler )
58- declineButton ?. addEventListener ( 'click' , declineConsentEventHandler )
59- declineWarningClose ?. addEventListener ( 'click' , declineWarningCloseEventHandler )
60- banner ?. classList . remove ( 'hidden' )
61- bannerToggle ?. setAttribute ( 'disabled' , '' )
62- declineWarning ?. classList . add ( 'hidden' )
64+ function managePreferencesClicked ( ) : void {
65+ const metricsConsent = localStorage . getItem ( 'metrics_consent' )
66+ if ( metricsConsent != null ) necessaryMetricsToggle . checked = JSON . parse ( metricsConsent ) [ 0 ] === 'minimal'
67+ metricsAgreementContent ?. classList . add ( 'hidden' )
68+ saveMetricPreferencesBtn ?. classList . remove ( 'hidden' )
69+ metricsManagePreferencesContent ?. classList . remove ( 'hidden' )
70+
71+ necessaryMetricsToggle . addEventListener ( 'click' , updateNecessaryMetricPreferences )
72+ saveMetricPreferencesBtn ?. addEventListener ( 'click' , hideMetricsModal )
6373}
6474
65- function bannerToggleEventHandler ( ) : void {
66- displayConsentBanner ( )
75+ function metricsModalToggleEventHandler ( ) : void {
76+ initMetricsModal ( )
6777}
78+
6879function loadCountly ( ) : void {
69- bannerToggle ?. addEventListener ( 'click' , bannerToggleEventHandler )
80+ metricsModalToggle ?. addEventListener ( 'click' , metricsModalToggleEventHandler )
7081 Countly . init ( {
7182 app_key : '3c2c0819434074fc4d339ddd8e112a1e741ecb72' ,
7283 url : 'https://countly.ipfs.io' ,
@@ -75,17 +86,26 @@ function loadCountly (): void {
7586 /**
7687 * @see https://support.count.ly/hc/en-us/articles/360037441932-Web-analytics-JavaScript-#features-for-consent
7788 */
78- const necessaryFeatures = [ 'sessions' , 'views' ]
79- const marketingFeatures = [ 'attribution' , 'users' , 'location' ]
80- const performanceFeatures = [ 'events' , 'crashes' , 'apm' ]
81- const trackingFeatures = [ 'scrolls' , 'clicks' , 'forms' , 'star-rating' , 'feedback' ]
89+
90+ const minimalFeatures = [ 'sessions' , 'views' , 'events' ]
91+ const performanceFeatures = [ 'crashes' , 'apm' ]
92+ const uxFeatures = [ 'scrolls' , 'clicks' , 'forms' ]
93+ const feedbackFeatures = [ 'star-rating' , 'feedback' ]
94+ const locationFeatures = [ 'location' ]
8295
8396 Countly . group_features ( {
84- all : [ ...necessaryFeatures , ...marketingFeatures , ...performanceFeatures , ...trackingFeatures ] ,
85- necessary : necessaryFeatures ,
86- marketing : marketingFeatures ,
87- tracking : trackingFeatures ,
88- performance : performanceFeatures
97+ all : [
98+ ...minimalFeatures ,
99+ ...performanceFeatures ,
100+ ...uxFeatures ,
101+ ...feedbackFeatures ,
102+ ...locationFeatures
103+ ] ,
104+ minimal : minimalFeatures ,
105+ performance : performanceFeatures ,
106+ ux : uxFeatures ,
107+ feedback : feedbackFeatures ,
108+ location : locationFeatures
89109 } )
90110
91111 /**
@@ -102,17 +122,10 @@ function loadCountly (): void {
102122 Countly . track_view ( )
103123
104124 if ( metricsConsent != null ) {
105- try {
106- addConsent ( JSON . parse ( metricsConsent ) )
107- } catch {
108- displayConsentBanner ( )
109- }
125+ addConsent ( JSON . parse ( metricsConsent ) )
110126 } else {
111- displayConsentBanner ( )
127+ addConsent ( [ 'minimal' ] )
112128 }
113129}
114130
115- export {
116- loadCountly ,
117- Countly
118- }
131+ export { loadCountly , Countly }
0 commit comments