Allow a UTM code to be passed in the quick editor

Author: johngodley

web/packages/quick-editor/README.md

@@ -128,6 +128,9 @@ type QuickEditorOptions = {
 - **`avatarRefreshDelay: number`**:
   The delay in milliseconds before the avatar image is refreshed after an update. This can help ensure any cache can be busted before the new image is displayed.
 
+- **`utm: string`**:
+  A code used to determine where the Quick Editor is being used.
+
 
 > While updating the avatar image, to bypass the browser's cache, the Quick Editor will add a `t` parameter with the current timestamp to the avatar URL.
 

web/packages/quick-editor/playground/index.ts

@@ -22,6 +22,7 @@ document.addEventListener( 'DOMContentLoaded', () => {
 		email: 'joao.heringer@automattic.com',
 		scope: [ 'avatars', 'about' ],
 		locale: 'es',
+		utm: 'jetpack-comments',
 		onProfileUpdated: ( type: ProfileUpdatedType ) => {
 			// eslint-disable-next-line
 			console.log( type );

web/packages/quick-editor/src/quick-editor-core.ts

@@ -33,6 +33,7 @@ export type QuickEditorCoreOptions = Partial< {
 	onProfileUpdated: OnProfileUpdated;
 	onOpened: OnOpened;
 	onClosed: OnClosed;
+	utm?: string;
 } >;
 
 export class GravatarQuickEditorCore {
@@ -43,16 +44,18 @@ export class GravatarQuickEditorCore {
 	_onProfileUpdated: OnProfileUpdated;
 	_onOpened: OnOpened;
 	_onClosed: OnClosed;
+	_utm: string;
 	_window: Window | null = null;
 
-	constructor( { email, scope = [], locale, onProfileUpdated, onOpened, onClosed }: QuickEditorCoreOptions ) {
+	constructor( { email, scope = [], locale, onProfileUpdated, onOpened, onClosed, utm }: QuickEditorCoreOptions ) {
 		this._name = this._getName();
 		this._email = email;
 		this._scope = scope;
 		this._locale = locale;
 		this._onProfileUpdated = onProfileUpdated;
 		this._onOpened = onOpened;
 		this._onClosed = onClosed;
+		this._utm = utm;
 
 		if ( ! this._scope.every( ( s ) => ScopeList.includes( s ) ) ) {
 			// eslint-disable-next-line
@@ -83,7 +86,8 @@ export class GravatarQuickEditorCore {
 		const top = window.screenTop + ( window.outerHeight - height ) / 2;
 		const options = `popup,width=${ width },height=${ height },top=${ top },left=${ left }`;
 		const host = this._locale ? `https://${ this._locale }.gravatar.com` : 'https://gravatar.com';
-		const url = `${ host }/profile?email=${ email }&scope=${ scope }&is_quick_editor=true`;
+		const utm = this._utm ? `&utm=${ encodeURIComponent( this._utm ) }` : '';
+		const url = `${ host }/profile?email=${ email }&scope=${ scope }&is_quick_editor=true${ utm }`;
 
 		this._window = window.open( url, this._name, options );