PluginProbe ʕ •ᴥ•ʔ
ShareThis Dashboard for Google Analytics / 3.1.3
ShareThis Dashboard for Google Analytics v3.1.3
3.3.2 trunk 1.0.7 2.0.0 2.0.1 2.0.2 2.0.3 2.0.4 2.0.5 2.1 2.1.2 2.1.3 2.1.4 2.1.5 2.2.5 2.3.5 2.3.6 2.3.7 2.3.8 2.4.0 2.4.1 2.5.0 2.5.1 2.5.2 2.5.3 2.5.4 2.5.5 3.0.0 3.1.0 3.1.1 3.1.2 3.1.3 3.1.4 3.1.5 3.1.6 3.1.7 3.2.0 3.2.1 3.2.2 3.2.3 3.2.4 3.3.0 3.3.1
googleanalytics / js / googleanalytics_page.js
googleanalytics / js Last commit date
googleanalytics.js 4 years ago googleanalytics_createprop.js 4 years ago googleanalytics_dashboard.js 3 years ago googleanalytics_page.js 3 years ago
googleanalytics_page.js
1173 lines
1 /**
2 * Google Analytics Page script.
3 *
4 * @package GoogleAnalytics
5 */
6
7 const GA_ACCESS_CODE_MODAL_ID = "ga_access_code_modal";
8 const GA_DEBUG_MODAL_ID = "ga_debug_modal";
9 const GA_DEBUG_MODAL_CONTENT_ID = "ga_debug_modal_content";
10 const GA_DEBUG_EMAIL = "ga_debug_email";
11 const GA_DEBUG_DESCRIPTION = "ga_debug_description";
12 const GA_ACCESS_CODE_TMP_ID = "ga_access_code_tmp";
13 const GA_ACCESS_CODE_ID = "ga_access_code";
14 const GA_FORM_ID = "ga_form";
15 const GA_MODAL_CLOSE_ID = 'ga_close';
16 const GA_MODAL_BTN_CLOSE_ID = 'ga_btn_close';
17 const GA_GOOGLE_AUTH_BTN_ID = 'ga_authorize_with_google_button';
18 const GA_SAVE_ACCESS_CODE_BTN_ID = 'ga_save_access_code';
19 const GA_AUTHENTICATION_CODE_ERROR = 'That looks like your Google Analytics Tracking ID. Please enter the authentication token in this space. See here for <a href="https://cl.ly/1y1N1A3h0s1t" target="_blank">a walkthrough</a> of how to do it.';
20
21 ( function( $ ) {
22 ga_popup = {
23 url: '',
24 authorize: function( e, url ) {
25 e.preventDefault();
26 ga_popup.url = url;
27 $( '#' + GA_ACCESS_CODE_MODAL_ID ).appendTo( "body" ).show();
28 ga_popup.open();
29 },
30 open: function() {
31 const p_width = Math.round( screen.width / 2 );
32 const p_height = Math.round( screen.height / 2 );
33 const p_left = Math.round( p_width / 2 );
34 const p_top = 300;
35 window.open(
36 ga_popup.url,
37 'ga_auth_popup',
38 'width=' + p_width + ',height='
39 + p_height + ',top=' + p_top + ',left=' + p_left,
40 );
41 },
42 saveAccessCode: function( e ) {
43 e.preventDefault();
44 e.target.disabled = 'disabled';
45 ga_loader.show();
46 const ac_tmp = $( '#' + GA_ACCESS_CODE_TMP_ID ).val();
47 if ( ga_popup.validateCode( e, ac_tmp ) ) {
48 $( '#' + GA_ACCESS_CODE_ID ).val( ac_tmp );
49 $( '#' + GA_FORM_ID ).submit();
50 }
51 },
52 validateCode: function( e, code ) {
53 if ( ! code ) {
54 ga_loader.hide();
55 $( '#' + GA_SAVE_ACCESS_CODE_BTN_ID ).removeAttr( 'disabled' );
56 return false;
57 } else if ( code.substring( 0, 2 ) == 'UA' ) {
58 $( '#ga_code_error' ).show().html( GA_AUTHENTICATION_CODE_ERROR );
59 ga_loader.hide();
60 $( '#' + GA_SAVE_ACCESS_CODE_BTN_ID ).removeAttr( 'disabled' );
61 return false;
62 }
63 return true;
64 },
65 };
66
67 ga_modal = {
68 hide: function() {
69 $( '#' + GA_ACCESS_CODE_MODAL_ID ).hide();
70 $( '#' + GA_DEBUG_MODAL_ID ).hide();
71 ga_loader.hide();
72 $( '#' + GA_SAVE_ACCESS_CODE_BTN_ID ).removeAttr( 'disabled' );
73 },
74 };
75
76 ga_events = {
77 /**
78 * Tab logic.
79 */
80 tabLogic: function() {
81 const tabs = document.querySelectorAll( '.setting-tabs__tab');
82 const self = this;
83
84 // Setup button in ua.
85 const ga4SetupButton = document.querySelector( '.open-ga4' );
86
87 if ( ga4SetupButton ) {
88 ga4SetupButton.addEventListener( 'click', () => {
89 const ga4Tab = document.querySelector( '.setting-tabs__tab.ga4' );
90 const ga4Settings = document.querySelector( '.ga4-settings-wrap' );
91 const currentSelected = document.querySelector( '.setting-tabs__tab.engage' );
92 const currentSelectedContent = document.querySelector( '.setting-tab-content.engage' );
93
94 if ( currentSelected && currentSelectedContent ) {
95 currentSelected.classList.remove( 'engage' );
96 currentSelectedContent.classList.remove( 'engage' );
97 }
98
99 if ( ga4Settings && ga4Tab ) {
100 ga4Settings.classList.add( 'engage' );
101 ga4Tab.classList.add( 'engage' );
102 }
103 } );
104 }
105
106 if ( tabs ) {
107 tabs.forEach( settingTab => {
108 settingTab.addEventListener( 'click', () => {
109 const currentSelected = document.querySelector( '.setting-tabs__tab.engage' );
110 const currentSelectedContent = document.querySelector( '.setting-tab-content.engage' );
111
112 if ( currentSelected && currentSelectedContent ) {
113 currentSelected.classList.remove( 'engage' );
114 currentSelectedContent.classList.remove( 'engage' );
115 }
116
117 settingTab.classList.add( 'engage' );
118
119 if ( settingTab.classList.contains( 'ga4' ) ) {
120 const ga4Settings = document.querySelector( '.ga4-settings-wrap' );
121
122 if ( ga4Settings ) {
123 ga4Settings.classList.add( 'engage' );
124 }
125 }
126
127 if ( settingTab.classList.contains( 'ua' ) ) {
128 const uaSettings = document.querySelector( '.ua-settings-wrap' );
129
130 if ( uaSettings ) {
131 uaSettings.classList.add( 'engage' );
132 }
133 }
134 } );
135 } );
136 }
137
138 // Google auto popup.
139 const googleAuthLink = document.getElementById( 'google-auth-link' );
140 const theURL = btoa( window.location.href );
141
142 if ( googleAuthLink ) {
143 const theHref = btoa( googleAuthLink.getAttribute( 'href' ) );
144
145 googleAuthLink.addEventListener( 'click', ( e ) => {
146 e.preventDefault();
147 e.stopPropagation();
148
149 window.location.href = 'https://sharethis.com/google-analytics-setup/?rfrurlga=' + theURL + '&rfgurlga=' + theHref;
150 } );
151 }
152
153 // To step 3.
154 const nextButton = document.getElementById( 'to-step-3' );
155
156 if ( nextButton ) {
157 nextButton.addEventListener( 'click', () => {
158 const propertySelection = document.getElementById( 'ga4-property' );
159 const propError = document.querySelector( '.error.prop-error' );
160
161 if ( propError ) {
162 propError.remove();
163 }
164
165 if ( propertySelection ) {
166 if ( 'Choose Property' === propertySelection.value ) {
167 const propErrorMessage = document.createElement( 'small' );
168 propErrorMessage.className = 'error prop-error';
169 propErrorMessage.textContent = '*You must select a property to continue';
170
171 propertySelection.parentNode.parentNode.insertBefore( propErrorMessage, propertySelection.parentNode.nextSibling );
172 } else {
173 var dataObj = {};
174 dataObj['action'] = "save_ga4_property_selection";
175 dataObj['property'] = propertySelection.value;
176
177 $.ajax(
178 {
179 type: "post",
180 dataType: "json",
181 url: ajaxurl,
182 data: dataObj,
183 success: function ( response ) {
184 const step2 = document.querySelector( '.ga-step-2' );
185 const step3 = document.querySelector( '.ga-step-3' );
186
187 if ( step2 ) {
188 step2.classList.remove( 'engage' );
189 }
190
191 if ( step3 ) {
192 step3.classList.add( 'engage' );
193 }
194 },
195 },
196 );
197 }
198 }
199 } );
200 }
201
202 const enableGdpr = document.getElementById( 'ga4-enable-gdpr' );
203
204 // Final setup.
205 const ga4FinalSetup = document.getElementById( 'complete-ga4-setup' );
206
207 if ( enableGdpr ) {
208 enableGdpr.addEventListener( 'change', (theCheck) => {
209 if (theCheck.target.checked) {
210 if (ga4FinalSetup) {
211 ga4FinalSetup.textContent = 'Complete and go to GDPR configuration';
212 }
213 } else {
214 if (ga4FinalSetup) {
215 ga4FinalSetup.textContent = 'Complete and go to dashboard';
216 }
217 }
218 } );
219 }
220
221 if ( ga4FinalSetup ) {
222 ga4FinalSetup.addEventListener( 'click', ( e ) => {
223 e.stopPropagation();
224 e.preventDefault();
225
226 const finalDataObj = {};
227 const optimize = document.getElementById( 'ga4-google-optimize' );
228 const excludeRoles = document.querySelectorAll( '.ga-exclude-roles input' );
229 const enableDemo = document.getElementById( 'ga4-enable-demo' );
230 const ipAnon = document.getElementById( 'ga4-enable-ip-anon' );
231 const enableGdpr = document.getElementById( 'ga4-enable-gdpr' );
232 let linkUrl = e.target.getAttribute( 'href' );
233 let excludeSelections = '';
234
235 if ( excludeRoles ) {
236 excludeRoles.forEach( ( excludeRole, i ) => {
237 if ( excludeRole.checked ) {
238 excludeSelections += excludeRole.value + ',';
239 }
240 } );
241 }
242
243 finalDataObj['action'] = "save_ga4_final_setup";
244 finalDataObj['optimize'] = optimize ? optimize.value : false;
245 finalDataObj['exclude_roles'] = excludeSelections;
246 finalDataObj['enable_demo'] = enableDemo ? enableDemo.checked : false;
247 finalDataObj['ip_anon'] = ipAnon ? ipAnon.checked : false;
248 finalDataObj['enable_gdpr'] = enableGdpr ? enableGdpr.checked : false;
249
250 $.ajax(
251 {
252 type: "post",
253 dataType: "json",
254 url: ajaxurl,
255 data: finalDataObj,
256 success: function ( response ) {
257
258 if ( enableGdpr.checked ) {
259 self.manualEnableGdpr();
260 }
261
262 if ( enableDemo.checked ) {
263 linkUrl = linkUrl + '&ga_action=demo-ad';
264 }
265
266 window.location.href = linkUrl;
267 },
268 },
269 );
270 } );
271 }
272 },
273
274 /**
275 * Send Demographic data.
276 *
277 * @param data
278 */
279 sendDemoData: function( demoData ) {
280 // Send demographic data.
281 $.ajax(
282 {
283 url: 'https://platform-api.sharethis.com/v1.0/property?id=' + ga_property_id + '&secret=' + ga_secret_id,
284 method: 'PUT',
285 async: false,
286 contentType: 'application/json; charset=utf-8',
287 data: JSON.stringify(
288 {
289 "demographics": demoData,
290 },
291 ),
292 },
293 );
294 },
295 /**
296 * Returns gdpr onboarding config values.
297 */
298 setGDPRConfig: function( isGDPR ) {
299
300 /**
301 * Check if ad blocker exists and notify if so.
302 */
303 $( document ).ready(
304 function() {
305 if ( $( "#detectadblock" ).height() > 0 ) {
306 } else {
307 $( '#adblocker-notice' ).show();
308 }
309 },
310 );
311
312 if ( ! isGDPR || undefined === gaGdprConfig ) {
313 return;
314 }
315
316 var config = JSON.parse( gaGdprConfig );
317
318 $( '.gdpr-platform input[name="gdpr-enable"]' ).prop( 'checked', config['enabled'] === 'true' );
319 $( '#sharethis-publisher-name' ).val( config['publisher_name'] );
320 $( '#sharethis-user-type option[value="' + config['display'] + '"]' ).attr( 'selected', true );
321 $( '#sharethis-consent-type option[value="' + config['scope'] + '"]' ).attr( 'selected', true );
322 $( '#sharethis-form-color .color[data-value="' + config['color'] + '"]' ).addClass( 'selected' );
323 $( '#st-language option[value="' + config['language'] + '"]' ).attr( 'selected', true );
324
325 if ( undefined !== config['publisher_purposes'] ) {
326 $( "#publisher-purpose .purpose-item input" ).prop( 'checked', false );
327
328 config['publisher_purposes'].map(
329 ( purpVal ) =>
330 {
331 var legit = 'true' === purpVal['legitimate_interest'] || true === purpVal['legitimate_interest'];
332 var consent = 'false' === purpVal['legitimate_interest'] || false === purpVal['legitimate_interest'];
333
334 $( '#publisher-purpose .purpose-item input[name="purposes[' + purpVal.id + ']"][value="legitimate"]' ).prop( 'checked', legit );
335 $( '#publisher-purpose .purpose-item input[name="purposes[' + purpVal.id + ']"][value="consent"]' ).prop( 'checked', consent );
336 }
337 );
338 }
339
340 if ( undefined !== config['publisher_restrictions'] ) {
341 $( ".vendor-table-cell-wrapper input" ).prop( 'checked', false );
342
343 $.map(
344 config['publisher_restrictions'],
345 function( id, venVal ) {
346 if ( id ) {
347 $( 'input[type="checkbox"][data-id="' + venVal + '"]' ).prop( 'checked', true );
348 }
349 },
350 );
351 }
352 },
353 scrollToAnchor: function( aid ) {
354 var aTag = $( "a[id='" + aid.toLowerCase() + "']" );
355
356 $( '.vendor-table-body' ).animate(
357 {
358 scrollTop: 0,
359 },
360 0,
361 ).animate(
362 {
363 scrollTop: aTag.offset().top - 740,
364 },
365 0,
366 );
367 },
368
369 click: function( selector, callback ) {
370 $( selector ).live( 'click', callback );
371 },
372 codeManuallyCallback: function( features_enabled ) {
373 var checkbox = $( '#ga_enter_code_manually' );
374 if ( features_enabled ) {
375 if ( checkbox.is( ':checked' ) ) {
376 if ( confirm( 'Warning: If you enter your Tracking ID manually, Analytics statistics will not be shown.' ) ) {
377 setTimeout(
378 function() {
379 $( '#ga_authorize_with_google_button' ).attr( 'disabled', 'disabled' ).next().show();
380 $( '#ga_account_selector' ).attr( 'disabled', 'disabled' );
381 $( '#ga_manually_wrapper' ).show();
382 },
383 350,
384 );
385
386 } else {
387 setTimeout(
388 function() {
389 checkbox.removeProp( 'checked' );
390 },
391 350,
392 );
393 }
394 } else {
395 setTimeout(
396 function() {
397 $( '#ga_authorize_with_google_button' ).removeAttr( 'disabled' ).next().hide();
398 $( '#ga_account_selector' ).removeAttr( 'disabled' );
399 $( '#ga_manually_wrapper' ).hide();
400 },
401 350,
402 );
403 }
404 }
405 },
406 initModalEvents: function() {
407 $( 'body' ).on(
408 'click',
409 '#close-review-us',
410 function() {
411 var dataObj = {},
412 self = this;
413 dataObj['action'] = "ga_ajax_hide_review";
414 dataObj[GA_NONCE_FIELD] = GA_NONCE;
415
416 $.ajax(
417 {
418 type: "post",
419 dataType: "json",
420 url: ajaxurl,
421 data: dataObj,
422 success: function( response ) {
423 $( '.ga-review-us' ).fadeOut();
424 },
425 },
426 );
427 },
428 );
429
430 $( '#' + GA_GOOGLE_AUTH_BTN_ID ).on(
431 'click',
432 function() {
433 $( '#' + GA_ACCESS_CODE_TMP_ID ).focus();
434 },
435 );
436
437 $( '#' + GA_MODAL_CLOSE_ID + ', #' + GA_MODAL_BTN_CLOSE_ID + ', #' + GA_DEBUG_MODAL_ID ).on(
438 'click',
439 function() {
440 ga_modal.hide();
441 },
442 );
443
444 $( '#copy-debug' ).on(
445 'click',
446 function() {
447 var copiedText = $( '#ga_debug_info' );
448
449 copiedText.select();
450 document.execCommand( 'copy' );
451 },
452 );
453
454 $( '#' + GA_DEBUG_MODAL_CONTENT_ID ).click(
455 function( event ) {
456 event.stopPropagation();
457 },
458 );
459 },
460
461 getConfig: function() {
462 var config,
463 enabled = $( 'input[name="gdpr-enable"]' ).is( ':checked' ),
464 publisherPurposes = [],
465 display = $( '#sharethis-user-type option:selected' ).val(),
466 name = $( '#sharethis-publisher-name' ).val(),
467 scope = 'publisher',
468 color = $( '#sharethis-form-color .color.selected' ).attr( 'data-value' ),
469 publisherRestrictions = {},
470 language = $( '#st-language' ).val();
471
472 $( '#publisher-purpose input:checked' ).each(
473 function( index, value ) {
474 var theId = $( value ).attr( 'data-id' ),
475 legit = 'consent' !== $( value ).val();
476
477 publisherPurposes.push( { 'id': theId, 'legitimate_interest': legit } );
478 },
479 );
480
481 $( '.vendor-table-cell-wrapper label input:checked' ).each(
482 function( index, value ) {
483 var vendorId = $( value ).attr( 'data-id' );
484 if ( vendorId ) {
485 publisherRestrictions[vendorId] = true;
486 }
487 },
488 );
489
490 config = {
491 enabled: enabled,
492 display: display,
493 publisher_name: name,
494 publisher_purposes: publisherPurposes,
495 publisher_restrictions: publisherRestrictions,
496 language: language,
497 color: color,
498 scope: scope,
499 };
500
501 return config;
502 },
503 manualEnableGdpr: function() {
504 var dataObj = {},
505 self = this,
506 config = ga_events.getConfig();
507
508 if ( $( 'body' ).hasClass( 'google-analytics_page_googleanalytics-settings' ) ) {
509 config = {
510 enabled: true,
511 display: 'eu',
512 publisher_name: '',
513 publisher_purposes: [],
514 language: 'en',
515 color: '',
516 scope: 'global',
517 };
518 }
519
520 theData = JSON.stringify(
521 {
522 'secret': ga_secret_id,
523 'id': ga_property_id,
524 'product': 'gdpr-compliance-tool-v2',
525 'config': config,
526 },
527 );
528
529 // Send new button status value.
530 $.ajax(
531 {
532 url: 'https://platform-api.sharethis.com/v1.0/property/product',
533 method: 'POST',
534 async: false,
535 contentType: 'application/json; charset=utf-8',
536 data: theData,
537 success: function( results ) {
538 },
539 },
540 );
541
542 dataObj['action'] = "ga_ajax_enable_gdpr";
543 dataObj['nonce'] = 'true';
544 dataObj['config'] = config;
545
546 $.ajax(
547 {
548 type: "post",
549 dataType: "json",
550 url: ajaxurl,
551 data: dataObj,
552 success: function( response ) {
553 window.location.href = siteAdminUrl + 'admin.php?page=googleanalytics%2Fgdpr';
554 },
555 },
556 );
557 },
558
559 enableGdpr: function() {
560 var timer = '';
561 const self = this;
562 this.$gdprContainer = $( '.gdpr-platform' );
563
564 // New color select.
565 this.$gdprContainer.on(
566 'click',
567 "#sharethis-form-color .color",
568 function() {
569 $( '#sharethis-form-color .color' ).removeClass( 'selected' );
570 $( this ).addClass( 'selected' );
571 }
572 );
573
574 // clear or show choices.
575 this.$gdprContainer.on(
576 'click',
577 '#clear-choices',
578 function( e ) {
579 e.preventDefault();
580 e.stopPropagation();
581
582 $( '.purpose-item input' ).prop( 'checked', false );
583 },
584 );
585
586 // clear or show choices.
587 this.$gdprContainer.on(
588 'click',
589 '#see-st-choices',
590 function( e ) {
591 e.preventDefault();
592 e.stopPropagation();
593 $( '.purpose-item input[name="purposes[1]"]' ).prop( 'checked', true );
594 $( '.purpose-item input[name="purposes[3]"][value="consent"]' ).prop( 'checked', true );
595 $( '.purpose-item input[name="purposes[5]"][value="consent"]' ).prop( 'checked', true );
596 $( '.purpose-item input[name="purposes[6]"][value="consent"]' ).prop( 'checked', true );
597 $( '.purpose-item input[name="purposes[9]"][value="legitimate"]' ).prop( 'checked', true );
598 $( '.purpose-item input[name="purposes[10]"][value="legitimate"]' ).prop( 'checked', true );
599 },
600 );
601
602 // Uncheck radio if click on selected box.
603 this.$gdprContainer.on(
604 'click',
605 '.lever',
606 ( e ) =>
607 {
608 e.preventDefault();
609 e.stopPropagation();
610
611 const theInput = $( e.currentTarget ).siblings( 'input' );
612
613 if ( theInput.is( ':checked' ) ) {
614 $( 'input[name="' + theInput.attr( 'name' ) + '"]' ).prop( 'checked', false );
615 } else {
616 theInput.prop( 'checked', true );
617 }
618 },
619 );
620
621 // Toggle button menus when arrows are clicked.
622 $( 'body' ).on(
623 'click',
624 '.accor-wrap .accor-tab',
625 function() {
626 var type = $( this ).find( 'span.accor-arrow' );
627
628 var closestButton = $( type ).parent( '.accor-tab' ).parent( '.accor-wrap' );
629
630 if ( '' === type.html() ) {
631
632 // Show the button configs.
633 closestButton.find( '.accor-content' ).slideDown();
634
635 // Change the icon next to title.
636 closestButton.find( '.accor-arrow' ).html( '&#9660;' );
637 } else {
638
639 // Show the button configs.
640 closestButton.find( '.accor-content' ).slideUp();
641
642 // Change the icon next to title.
643 closestButton.find( '.accor-arrow' ).html( '&#9658;' );
644 }
645 },
646 );
647
648 $( 'body' ).on(
649 'click',
650 '.demo-enable-popup .close-demo-modal',
651 function( e ) {
652 e.preventDefault();
653 e.stopPropagation();
654 $( '.demo-enable-popup' ).removeClass( 'engage' );
655 },
656 );
657
658 $( 'body' ).on(
659 'click',
660 '#demographic-popup',
661 function( e ) {
662 e.preventDefault();
663 e.stopPropagation();
664 $( '.demo-enable-popup' ).addClass( 'engage' );
665 },
666 );
667
668 $( 'body' ).on(
669 'click',
670 '#enable-demographic, #Enable-demographic',
671 function( e ) {
672 e.preventDefault();
673 e.stopPropagation();
674 ga_events.enableDemographic( 'enable' );
675 },
676 );
677
678 $( 'body' ).on(
679 'click',
680 '#Disable-demographic',
681 function( e ) {
682 e.preventDefault();
683 e.stopPropagation();
684 ga_events.enableDemographic( 'disable' );
685 },
686 );
687
688 // Handle account sign-out via Ajax.
689 $( 'body' ).on(
690 'click',
691 '#ga_sign_out',
692 function ( e ) {
693 e.preventDefault();
694 e.stopPropagation();
695
696 $.ajax(
697 {
698 type: 'post',
699 dataType: 'json',
700 url: googleAnalyticsPage.ajaxurl,
701 data: {
702 action: 'ga_ajax_sign_out',
703 nonce: googleAnalyticsPage.nonce,
704 },
705 success: function ( response ) {
706 window.location.href = encodeURI( googleAnalyticsPage.settingsURL )
707 },
708 },
709 );
710 },
711 );
712
713 $( 'body' ).on(
714 'click',
715 '#ga4_sign_out',
716 function ( e ) {
717 e.preventDefault();
718 e.stopPropagation();
719
720 $.ajax(
721 {
722 type: 'post',
723 dataType: 'json',
724 url: googleAnalyticsPage.ajaxurl,
725 data: {
726 action: 'ga4_ajax_sign_out',
727 nonce: googleAnalyticsPage.nonce,
728 },
729 success: function ( response ) {
730 window.location.href = encodeURI( googleAnalyticsPage.settingsURL + '&ga4=1' )
731 },
732 },
733 );
734 },
735 );
736
737 // Enable GDPR tool.
738 $( 'body' ).on(
739 'click',
740 '.gdpr-submit',
741 function( e ) {
742 e.preventDefault();
743 e.stopPropagation();
744
745 self.manualEnableGdpr();
746 },
747 );
748
749 // Enable GDPR tool.
750 $( 'body' ).on(
751 'click',
752 '.gdpr-enable',
753 function( e ) {
754 e.preventDefault();
755 e.stopPropagation();
756
757 self.manualEnableGdpr();
758 },
759 );
760
761 // Scroll to anchor in vendor list.
762 // Send user input to category search AFTER they stop typing.
763 $( 'body' ).on(
764 'keyup',
765 '.vendor-search input',
766 function( e ) {
767 clearTimeout( timer );
768
769 timer = setTimeout(
770 function() {
771 ga_events.scrollToAnchor( $( this ).val() );
772 }
773 .bind( this, ga_events ),
774 500,
775 );
776 },
777 );
778 },
779
780 enableDemographic: function( disable ) {
781 var dataObj = {};
782
783 dataObj['action'] = "ga_ajax_enable_demographic";
784 dataObj['nonce'] = ga_demo_nonce;
785 dataObj['enabled'] = 'disable' === disable ? 'false' : 'true';
786
787 $.ajax(
788 {
789 type: "post",
790 dataType: "json",
791 url: ajaxurl,
792 data: dataObj,
793 success: function( response ) {
794 window.location.href = siteAdminUrl + 'admin.php?page=googleanalytics&ga_action=demo-ad';
795 },
796 },
797 );
798 },
799 };
800
801 /**
802 * Handles "disable all features" switch button
803 *
804 * @type {{init: ga_switcher.init}}
805 */
806 ga_switcher = {
807 init: function( state ) {
808 var checkbox = $( "#ga-disable" );
809
810 if ( state ) {
811 checkbox.prop( 'checked', 'checked' );
812 } else {
813 checkbox.removeProp( 'checked' );
814 }
815 },
816 };
817
818 $( document ).ready(
819 function() {
820 const scrollData = $( '#ga-stats-container' ).attr( 'data-scroll' );
821 const scrollEl = '' !== scrollData ? $( '.' + scrollData ) : '';
822 const theBody = $( 'body' );
823
824 ga_events.initModalEvents();
825 ga_events.enableGdpr();
826 ga_events.tabLogic();
827 ga_events.setGDPRConfig( theBody.hasClass( 'google-analytics_page_googleanalytics-gdpr' ) );
828
829 if ( '' !== scrollData && theBody.hasClass( 'toplevel_page_googleanalytics' ) ) {
830 $( [ document.documentElement, document.body ] ).animate(
831 {
832 scrollTop: scrollEl.offset().top + 450,
833 },
834 500,
835 );
836 }
837 },
838 );
839
840 const offset = 50;
841 const minWidth = 350;
842 const wrapperSelector = '#ga-stats-container';
843 const chartContainer = 'chart_div';
844 const demoChartDeviceContainer = 'demo_chart_device_div';
845 const demoGa4ChartDeviceContainer = 'demo_ga4_chart_device_div';
846 const demoChartGenderContainer = 'demo_chart_gender_div';
847 const demoChartAgeContainer = 'demo_chart_age_div';
848 const demoChartAgeGa4Container = 'ga4_demo_chart_age_div';
849 const demoChartGenderGa4Container = 'ga4_demo_chart_gender_div';
850 const pageSessionChartContainer = 'page_session_chart_div';
851 const userChartContainer = 'user_chart_div';
852
853 ga_charts = {
854 init: function( callback ) {
855 $( document ).ready(
856 function() {
857 google.charts.load(
858 'current',
859 {
860 'packages': [ 'corechart' ],
861 },
862 );
863 ga_loader.show();
864 google.charts.setOnLoadCallback( callback );
865 },
866 );
867 },
868 createTooltip: function( day, pageviews ) {
869 return '<div style="padding:10px;width:100px;"><strong>' + day
870 + '</strong><br>Pageviews:<strong> ' + pageviews
871 + '</strong></div>';
872 },
873 createPageTooltip: function( day, pageviews ) {
874 return '<div style="padding:10px;width:100px;"><strong>' + day
875 + '</strong><br>Page Views:<strong> ' + pageviews
876 + '</strong></div>';
877 },
878 createUserTooltip: function( day, pageviews ) {
879 return '<div style="padding:10px;width:100px;"><strong>' + day
880 + '</strong><br>New Users:<strong> ' + pageviews
881 + '</strong></div>';
882 },
883 events: function( data ) {
884 $( window ).on(
885 'resize',
886 function() {
887 ga_charts.drawChart( data, ga_tools.recomputeChartWidth( minWidth, offset, wrapperSelector ) );
888 },
889 );
890 },
891 drawChart: function( data, chartWidth ) {
892
893 if ( typeof chartWidth == 'undefined' ) {
894 chartWidth = ga_tools.recomputeChartWidth( minWidth, offset, wrapperSelector );
895 }
896
897 const options = {
898 lineWidth: 5,
899 pointSize: 10,
900 tooltip: {
901 isHtml: true,
902 },
903 legend: {
904 position: ( ga_tools.getCurrentWidth( wrapperSelector ) <= minWidth ? 'top' : 'top' ),
905 maxLines: 5,
906 alignment: 'start',
907 textStyle: {
908 color: '#000',
909 fontSize: 12,
910 },
911 },
912 colors: [ '#4285f4' ],
913 hAxis: {
914 title: 'Day',
915 titleTextStyle: {
916 color: '#333',
917 },
918 },
919 vAxis: {
920 minValue: 0,
921 },
922 width: chartWidth,
923 height: 500,
924 chartArea: {
925 top: 50,
926 left: 50,
927 right: 30,
928 bottom: 100,
929 },
930 };
931
932 var chart = new google.visualization.AreaChart(
933 document.getElementById( chartContainer )
934 );
935 chart.draw( data, options );
936 },
937 drawPageSessionChart: function( data, chartWidth ) {
938 if ( typeof chartWidth == 'undefined' ) {
939 chartWidth = ga_tools.recomputeChartWidth( minWidth, offset, wrapperSelector );
940 }
941
942 const options = {
943 lineWidth: 5,
944 pointSize: 10,
945 tooltip: {
946 isHtml: true,
947 },
948 legend: {
949 position: ( ga_tools.getCurrentWidth( wrapperSelector ) <= minWidth ? 'top' : 'top' ),
950 maxLines: 5,
951 alignment: 'start',
952 textStyle: {
953 color: '#000',
954 fontSize: 12,
955 },
956 },
957 colors: [ '#4285f4' ],
958 hAxis: {
959 title: 'Day',
960 titleTextStyle: {
961 color: '#333',
962 },
963 },
964 vAxis: {
965 minValue: 0,
966 },
967 width: chartWidth,
968 height: 500,
969 chartArea: {
970 top: 50,
971 left: 50,
972 right: 30,
973 bottom: 100,
974 },
975 };
976
977 var chart = new google.visualization.AreaChart(
978 document.getElementById( pageSessionChartContainer )
979 );
980 chart.draw( data, options );
981 },
982 drawUserChart: function( data, chartWidth ) {
983 if ( typeof chartWidth == 'undefined' ) {
984 chartWidth = ga_tools.recomputeChartWidth( minWidth, offset, wrapperSelector );
985 }
986
987 const options = {
988 lineWidth: 5,
989 pointSize: 10,
990 tooltip: {
991 isHtml: true,
992 },
993 legend: {
994 position: ( ga_tools.getCurrentWidth( wrapperSelector ) <= minWidth ? 'top' : 'top' ),
995 maxLines: 5,
996 alignment: 'start',
997 textStyle: {
998 color: '#000',
999 fontSize: 12,
1000 },
1001 },
1002 colors: [ '#4285f4' ],
1003 hAxis: {
1004 title: 'Day',
1005 titleTextStyle: {
1006 color: '#333',
1007 },
1008 },
1009 vAxis: {
1010 minValue: 0,
1011 },
1012 width: chartWidth,
1013 height: 500,
1014 chartArea: {
1015 top: 50,
1016 left: 50,
1017 right: 30,
1018 bottom: 100,
1019 },
1020 };
1021
1022 var chart = new google.visualization.AreaChart(
1023 document.getElementById( userChartContainer )
1024 );
1025 chart.draw( data, options );
1026 },
1027 drawDemoGenderChart: function( data, chartWidth ) {
1028 if ( typeof chartWidth == 'undefined' ) {
1029 chartWidth = ga_tools.recomputeChartWidth( minWidth, offset, wrapperSelector );
1030 }
1031
1032 data = google.visualization.arrayToDataTable( data );
1033
1034 if ( document.getElementById( demoChartGenderContainer ) ) {
1035 var chart = new google.visualization.PieChart( document.getElementById( demoChartGenderContainer ) );
1036 var options = {
1037 title: 'Gender',
1038 };
1039
1040 chart.draw( data, options );
1041 }
1042 },
1043 drawDemoDeviceChart: function( data, chartWidth ) {
1044 if ( typeof chartWidth == 'undefined' ) {
1045 chartWidth = ga_tools.recomputeChartWidth( minWidth, offset, wrapperSelector );
1046 }
1047
1048 data = google.visualization.arrayToDataTable( data );
1049
1050 if ( document.getElementById( demoChartDeviceContainer ) ) {
1051 var chart = new google.visualization.PieChart( document.getElementById( demoChartDeviceContainer ) );
1052 var options = {
1053 title: 'Device Breakdown',
1054 };
1055
1056 chart.draw( data, options );
1057 }
1058 },
1059
1060 drawGa4DemoDeviceChart: function( data, chartWidth ) {
1061 if ( typeof chartWidth == 'undefined' ) {
1062 chartWidth = ga_tools.recomputeChartWidth( minWidth, offset, wrapperSelector );
1063 }
1064
1065 data = google.visualization.arrayToDataTable( data );
1066
1067 if ( document.getElementById( demoGa4ChartDeviceContainer ) ) {
1068 var chart = new google.visualization.PieChart( document.getElementById( demoGa4ChartDeviceContainer ) );
1069 var options = {
1070 title: 'Device Breakdown',
1071 };
1072
1073 chart.draw( data, options );
1074 }
1075 },
1076
1077 drawDemoAgeChart: function( data, chartWidth ) {
1078 if ( typeof chartWidth == 'undefined' ) {
1079 chartWidth = ga_tools.recomputeChartWidth( minWidth, offset, wrapperSelector );
1080 }
1081
1082 data = google.visualization.arrayToDataTable( data );
1083
1084 var options = {
1085 title: 'Age',
1086 chartArea: { width: '50%' },
1087 hAxis: {
1088 minValue: 0,
1089 },
1090 };
1091
1092 if ( document.getElementById( demoChartAgeContainer ) ) {
1093 var chart = new google.visualization.BarChart( document.getElementById( demoChartAgeContainer ) );
1094
1095 chart.draw( data, options );
1096 }
1097 },
1098 drawDemoGenderGa4Chart: function( data, chartWidth ) {
1099 if ( typeof chartWidth == 'undefined' ) {
1100 chartWidth = ga_tools.recomputeChartWidth( minWidth, offset, wrapperSelector );
1101 }
1102
1103 data = google.visualization.arrayToDataTable( data );
1104
1105 if ( document.getElementById( demoChartGenderGa4Container ) ) {
1106 var chart = new google.visualization.PieChart( document.getElementById( demoChartGenderGa4Container ) );
1107 var options = {
1108 title: 'Gender',
1109 };
1110
1111 chart.draw( data, options );
1112 }
1113 },
1114 drawDemoAgeGa4Chart: function( data, chartWidth ) {
1115 if ( typeof chartWidth == 'undefined' ) {
1116 chartWidth = ga_tools.recomputeChartWidth( minWidth, offset, wrapperSelector );
1117 }
1118
1119 data = google.visualization.arrayToDataTable( data );
1120
1121 var options = {
1122 title: 'Age',
1123 chartArea: { width: '50%' },
1124 hAxis: {
1125 minValue: 0,
1126 },
1127 };
1128
1129 if ( document.getElementById( demoChartAgeGa4Container ) ) {
1130 var chart = new google.visualization.BarChart( document.getElementById( demoChartAgeGa4Container ) );
1131
1132 chart.draw( data, options );
1133 }
1134 },
1135 };
1136 ga_debug = {
1137 url: '',
1138 open_modal: function( e ) {
1139 e.preventDefault();
1140 $( '#' + GA_DEBUG_MODAL_ID ).appendTo( "body" ).show();
1141 $( '#ga-send-debug-email' ).removeAttr( 'disabled' );
1142 $( '#ga_debug_error' ).hide();
1143 $( '#ga_debug_success' ).hide();
1144 },
1145 send_email: function( e ) {
1146 e.preventDefault();
1147 ga_loader.show();
1148 var dataObj = {};
1149 dataObj['action'] = "googleanalytics_send_debug_email";
1150 dataObj['email'] = $( '#' + GA_DEBUG_EMAIL ).val();
1151 dataObj['description'] = $( '#' + GA_DEBUG_DESCRIPTION ).val();
1152 $.ajax(
1153 {
1154 type: "post",
1155 dataType: "json",
1156 url: ajaxurl,
1157 data: dataObj,
1158 success: function( response ) {
1159 ga_loader.hide();
1160 if ( typeof response.error !== "undefined" ) {
1161 $( '#ga_debug_error' ).show().html( response.error );
1162 } else if ( typeof response.success !== "undefined" ) {
1163 $( '#ga_debug_error' ).hide();
1164 $( '#ga-send-debug-email' ).attr( 'disabled', 'disabled' );
1165 $( '#ga_debug_success' ).show().html( response.success );
1166 }
1167 },
1168 },
1169 );
1170 },
1171 };
1172 } )( jQuery );
1173