Skip to content

Commit 0713084

Browse files
felixarntzfelixarntz
authored
Merge pull request #691 from google/feat/673-tracking
feat: Add opt-in checkbox to setup process
2 parents 99c07d0 + ee51d75 commit 0713084

14 files changed

+211
-99
lines changed

‎.storybook/storybook-data.js‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -580,19 +580,6 @@ module.exports = [
580580
},
581581
},
582582
},
583-
{
584-
id: 'wordpress--wordpress-activation',
585-
kind: 'WordPress',
586-
name: 'WordPress Activation',
587-
story: 'WordPress Activation',
588-
parameters: {
589-
fileName: './stories/wp-activation.stories.js',
590-
options: {
591-
hierarchyRootSeparator: '|',
592-
hierarchySeparator: {},
593-
},
594-
},
595-
},
596583
{
597584
id: 'wordpress--wordpress-dashboard',
598585
kind: 'WordPress',

‎assets/js/components/optin.js‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@ class Optin extends Component {
3030
super( props );
3131

3232
this.state = {
33-
optIn: googlesitekit.admin.trackingOptin || false,
33+
scriptOnPage: !! googlesitekit.admin.trackingOptin,
34+
optIn: !! googlesitekit.admin.trackingOptin,
3435
error: false,
3536
};
3637

@@ -52,9 +53,32 @@ class Optin extends Component {
5253
method: 'POST',
5354
} )
5455
.then( () => {
56+
if ( !! checked && ! this.state.scriptOnPage ) {
57+
const { document } = window;
58+
59+
if ( ! document ) {
60+
return;
61+
}
62+
63+
window.googlesitekitTrackingEnabled = !! checked;
64+
65+
document.body.insertAdjacentHTML( 'beforeend', `
66+
<script async src="https://www.googletagmanager.com/gtag/js?id=${ googlesitekit.admin.trackingID }"></script>
67+
` );
68+
document.body.insertAdjacentHTML( 'beforeend', `
69+
<script>
70+
window.dataLayer = window.dataLayer || [];
71+
function gtag(){dataLayer.push(arguments);}
72+
gtag('js', new Date());
73+
gtag('config', '${ googlesitekit.admin.trackingID }');
74+
</script>
75+
` );
76+
}
77+
5578
this.setState( {
5679
optIn: !! checked,
5780
error: false,
81+
scriptOnPage: true,
5882
} );
5983
} )
6084
.catch( ( err ) => {
@@ -107,7 +131,7 @@ Optin.propTypes = {
107131
};
108132

109133
Optin.defaultProps = {
110-
id: 'opt-in',
134+
id: 'googlesitekit-opt-in',
111135
name: 'optIn',
112136
};
113137

‎assets/js/components/settings/settings-admin.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -190,10 +190,7 @@ class SettingsAdmin extends Component {
190190
googlesitekit-settings-module__meta-item
191191
googlesitekit-settings-module__meta-item--nomargin
192192
">
193-
<Optin
194-
id="opt-in"
195-
name="optin"
196-
/>
193+
<Optin />
197194
</div>
198195
</div>
199196
</div>

‎assets/js/components/setup-wizard/wizard-step-authentication.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,10 +84,7 @@ class WizardStepAuthentication extends Component {
8484
}
8585
</p>
8686
<div className="googlesitekit-wizard-step__action googlesitekit-wizard-step__action--justify">
87-
<Optin
88-
id="opt-in"
89-
name="optin"
90-
/>
87+
<Optin />
9188
<HelpLink />
9289
</div>
9390
</div>

‎assets/js/components/setup/setup-proxy.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
import Header from 'GoogleComponents/header';
2323
import Button from 'GoogleComponents/button';
2424
import Layout from 'GoogleComponents/layout/layout';
25+
import Optin from 'GoogleComponents/optin';
2526
import { sendAnalyticsTrackingEvent } from 'GoogleUtil';
2627
import { getSiteKitAdminURL } from 'SiteKitCore/util';
2728

@@ -103,6 +104,7 @@ class SetupUsingProxy extends Component {
103104
>
104105
{ __( 'Start setup', 'google-site-kit' ) }
105106
</Button>
107+
<Optin />
106108
</div>
107109
</div>
108110
</div>

‎assets/sass/components/activation/_googlesitekit-activation.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,12 @@
2525
.googlesitekit-activation__text {
2626
margin: 0;
2727
}
28+
29+
.googlesitekit-activation__button {
30+
margin-top: 12px;
31+
}
32+
33+
.googlesitekit-activation__opt-in {
34+
margin-top: 8px;
35+
}
2836
}

‎assets/sass/components/setup/_googlesitekit-setup.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,3 +108,10 @@
108108
border-top: 1px solid $c-border-light;
109109
}
110110
}
111+
112+
.googlesitekit-wizard {
113+
114+
.googlesitekit-opt-in {
115+
margin-top: 10px;
116+
}
117+
}

‎includes/Core/Util/Activation.php‎

Lines changed: 114 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -155,17 +155,88 @@ private function get_activation_notice() {
155155
ob_start();
156156
?>
157157
<script type="text/javascript">
158-
if( 'undefined' !== typeof sendAnalyticsTrackingEvent ) {
159-
sendAnalyticsTrackingEvent( 'plugin_setup', 'plugin_activated' );
160-
}
158+
document.addEventListener( 'DOMContentLoaded' , function() {
159+
if ( 'undefined' !== typeof sendAnalyticsTrackingEvent ) {
160+
sendAnalyticsTrackingEvent( 'plugin_setup', 'plugin_activated' );
161+
}
162+
163+
var trackingScriptPresent = !! googlesitekit.admin.trackingOptIn;
164+
165+
var optInCheckbox = document.getElementById( 'googlesitekit-opt-in' );
166+
var startSetupLink = document.getElementById( 'start-setup-link' );
167+
168+
if ( ! optInCheckbox ) {
169+
console.error( "Expected element #googlesitekit-opt-in to be found on page, but it wasn't. Tracking may not work." );
170+
return;
171+
}
172+
173+
if ( ! startSetupLink ) {
174+
console.error( "Expected element #start-setup-link to be found on page, but it wasn't. Tracking may not work." );
175+
return;
176+
}
177+
178+
if ( googlesitekit.admin.trackingOptIn ) {
179+
optInCheckbox.checked = googlesitekit.admin.trackingOptIn;
180+
}
181+
if ( googlesitekit.admin.proxySetupURL ) {
182+
startSetupLink.href = googlesitekit.admin.proxySetupURL;
183+
}
184+
185+
startSetupLink.addEventListener( 'click' , function() {
186+
if ( 'undefined' !== typeof sendAnalyticsTrackingEvent ) {
187+
sendAnalyticsTrackingEvent( 'plugin_setup', googlesitekit.admin.proxySetupURL ? 'proxy_start_setup_banner' : 'goto_sitekit' );
188+
}
189+
} );
190+
191+
optInCheckbox.addEventListener( 'change' , function( event ) {
192+
if ( event.target.disabled ) {
193+
event.preventDefault();
194+
return;
195+
}
196+
197+
var checked = event.target.checked;
198+
199+
var body = {
200+
googlesitekit_tracking_optin: checked,
201+
};
202+
var self = this;
203+
204+
event.target.disabled = true;
205+
206+
wp.apiFetch( {
207+
path: '/wp/v2/settings',
208+
headers: {
209+
'Content-Type': 'application/json; charset=UTF-8',
210+
},
211+
body: JSON.stringify( body ),
212+
method: 'POST',
213+
} )
214+
.then( function() {
215+
event.target.disabled = null;
216+
window.googlesitekitTrackingEnabled = !! checked;
217+
218+
var trackingId = googlesitekit.admin.trackingID;
219+
var trackingScriptPresent = document.querySelector( 'script[src="https://www.googletagmanager.com/gtag/js?id=' + trackingId + '"]' );
220+
221+
if ( ! trackingScriptPresent ) {
222+
document.body.insertAdjacentHTML( 'beforeend', '\<script async src="https://www.googletagmanager.com/gtag/js?id=' + trackingId + '"\>\</script\>' );<?php // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript ?>
223+
document.body.insertAdjacentHTML( 'beforeend', "\<script\>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', '" + trackingId + "');\</script\>" );
224+
}
225+
} )
226+
.catch( function( err ) {
227+
event.target.checked = ! checked;
228+
event.target.disabled = false;
229+
} );
230+
} );
231+
} );
161232
</script>
162233
<div class="googlesitekit-plugin">
163234
<div class="googlesitekit-activation">
164235
<div class="mdc-layout-grid">
165236
<div class="mdc-layout-grid__inner">
166237
<div class="
167238
mdc-layout-grid__cell
168-
mdc-layout-grid__cell--span-7
239+
mdc-layout-grid__cell--span-12
169240
">
170241
<div class="googlesitekit-logo">
171242
<?php
@@ -186,20 +257,49 @@ private function get_activation_notice() {
186257
); // phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped
187258
?>
188259
</div>
189-
<h3 class="googlesitekit-heading-1 googlesitekit-activation__title">
260+
<h3 class="googlesitekit-heading-3 googlesitekit-activation__title">
190261
<?php esc_html_e( 'Congratulations, the Site Kit plugin is now activated.', 'google-site-kit' ); ?>
191262
</h3>
192-
</div>
193-
<div class="
194-
mdc-layout-grid__cell
195-
mdc-layout-grid__cell--start-8-desktop
196-
mdc-layout-grid__cell--offset-1-desktop
197-
mdc-layout-grid__cell--align-middle
198-
">
199-
<a href="#" onClick="javascript:if( 'undefined' !== typeof sendAnalyticsTrackingEvent ) { sendAnalyticsTrackingEvent( 'plugin_setup', 'goto_sitekit' ) };document.location='<?php echo esc_url( $sitekit_splash_url ); ?>';"
200-
class="googlesitekit-activation__button mdc-button mdc-button--raised">
263+
264+
<a id="start-setup-link" href="<?php echo esc_url( $sitekit_splash_url ); ?>" class="googlesitekit-activation__button googlesitekit-activation__start-setup mdc-button mdc-button--raised">
201265
<?php esc_html_e( 'Start Setup', 'google-site-kit' ); ?>
202266
</a>
267+
268+
<div class="googlesitekit-opt-in googlesitekit-activation__opt-in">
269+
<div class="mdc-form-field">
270+
<div class="mdc-checkbox mdc-checkbox--upgraded mdc-ripple-upgraded mdc-ripple-upgraded--unbounded">
271+
<input class="mdc-checkbox__native-control" type="checkbox" id="googlesitekit-opt-in" value="1" />
272+
<div class="mdc-checkbox__background">
273+
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
274+
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
275+
</svg>
276+
<div class="mdc-checkbox__mixedmark">
277+
</div>
278+
</div>
279+
</div>
280+
<label for="googlesitekit-opt-in">
281+
<?php
282+
$locale = str_replace( '_', '-', get_locale() );
283+
echo wp_kses(
284+
sprintf(
285+
// translators: %s: https://policies.google.com/privacy?hl=LOCALE (where LOCALE is the current WordPress locale, translating the privacy policy if a translation exists).
286+
__(
287+
'Help us improve the Site Kit plugin by allowing tracking of anonymous usage stats. All data are treated in accordance with <a href="%s" rel="noopener noreferrer">Google Privacy Policy</a>.',
288+
'google-site-kit'
289+
),
290+
"https://policies.google.com/privacy?hl=${locale}"
291+
),
292+
array(
293+
'a' => array(
294+
'href' => array(),
295+
'rel' => array(),
296+
),
297+
)
298+
)
299+
?>
300+
</label>
301+
</div>
302+
</div>
203303
</div>
204304
</div>
205305
</div>

‎includes/Core/Util/Tracking.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ function () {
118118
* @return bool True if tracking enabled, and False if not.
119119
*/
120120
public function is_active() {
121-
return (bool) get_option( self::TRACKING_OPTIN_KEY, true );
121+
return (bool) get_option( self::TRACKING_OPTIN_KEY, false );
122122
}
123123

124124
/**
@@ -196,7 +196,7 @@ private function register_settings() {
196196
$args = array(
197197
'type' => 'boolean',
198198
'description' => __( 'Allowing tracking of anonymous usage stats.', 'google-site-kit' ),
199-
'default' => true,
199+
'default' => false,
200200
'show_in_rest' => true,
201201
);
202202
register_setting( 'google-site-kit', self::TRACKING_OPTIN_KEY, $args );

‎stories/wp-activation.stories.js‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

0 commit comments

Comments
 (0)