Allow opting into analytics

.circleci/config.yml

@@ -39,7 +39,7 @@ jobs:
     steps:
       - checkout
       - node/install:
-          node-version: lts
+          node-version: '14.18.1'
       - nodegit-workaround
       - set-up-packages
       - run: npm run lint
@@ -67,7 +67,7 @@ jobs:
             sudo apt-get update && sudo apt-get install libpng-dev
             sudo docker-php-ext-install mysqli gd
       - node/install:
-          node-version: lts
+          node-version: '14.18.1'
       - nodegit-workaround
       - run:
           name: Installing WordPress and setting up tests
@@ -94,7 +94,7 @@ jobs:
     steps:
       - checkout
       - node/install:
-          node-version: lts
+          node-version: '14.18.1'
       - nodegit-workaround
       - run: HUSKY_SKIP_INSTALL=1 npm ci && npm run test:js -- --maxWorkers=2
 
@@ -106,7 +106,7 @@ jobs:
       - run: sudo apt-get update && sudo apt-get install php php-xml
       - install-composer
       - node/install:
-          node-version: lts
+          node-version: '14.18.1'
       - nodegit-workaround
       - set-up-packages
       - run: npm run wp-env start && npm run test:e2e

.nvmrc

@@ -1 +1 @@
-lts/*
+14

js/src/block-editor/index.js

@@ -3,15 +3,23 @@
 /**
  * WordPress dependencies
  */
-import { setLocaleData } from '@wordpress/i18n';
 import { addFilter } from '@wordpress/hooks';
+import { setLocaleData } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { addControls, registerBlocks } from './helpers';
 import { Edit } from './components';
+import { GAClient } from '../common/classes';
 
 setLocaleData( { '': {} }, 'genesis-custom-blocks' );
 addFilter( 'genesisCustomBlocks.controls', 'genesisCustomBlocks/addControls', addControls );
+
+// @ts-ignore
 registerBlocks( genesisCustomBlocks, gcbBlocks, Edit );
+
+// @ts-ignore
+window.GcbAnalytics = {
+	GAClient: new GAClient(),
+};

js/src/common/classes/GAClient.js

@@ -0,0 +1,103 @@
+/**
+ * Internal dependencies
+ */
+import { debounce } from '../helpers';
+
+// @ts-ignore
+window.dataLayer = window.dataLayer || [];
+
+/**
+ * Genesis Analytics Client
+ *
+ * Forked from BMO's work in Genesis Blocks.
+ *
+ * Follows the singleton pattern to prevent multiple instances of the GA Client from being used.
+ * https://developers.google.com/analytics/devguides/collection/gtagjs
+ */
+export default class GAClient {
+	/**
+	 * Is Google Analytics enabled.
+	 *
+	 * @type {boolean}
+	 */
+	enabled = false;
+
+	/**
+	 * Google Analytics Client
+	 *
+	 * @type {Object}
+	 */
+	client;
+
+	/**
+	 * Google Analytics Measurment ID.
+	 *
+	 * Todo: update this for GCB.
+	 *
+	 * @type {string}
+	 */
+	GA_ID = 'UA-12345';
+
+	/**
+	 * Class constructor.
+	 */
+	constructor() {
+		this.client = function() {
+			// @ts-ignore
+			window.dataLayer.push( arguments );
+		};
+
+		// @ts-ignore
+		this.config = window.gcbAnalyticsConfig || {};
+		if ( this.config.ga_opt_in ) {
+			this.enableAnalytics( this.config.ga_opt_in );
+			this.initClient();
+		}
+	}
+
+	/**
+	 * Enables Google Analytics.
+	 * Setting this value allows the GA Client to respect any opt out configuration.
+	 *
+	 * https://developers.google.com/analytics/devguides/collection/gtagjs/user-opt-out
+	 *
+	 * @param {boolean | number | string} enable The value to be set.
+	 */
+	enableAnalytics( enable ) {
+		enable = !! +enable;
+
+		if ( enable ) {
+			// Remove ga-disable-GA_MEASUREMENT_ID property to enable GA.
+			delete window[ `ga-disable-${ this.GA_ID }` ];
+		} else {
+			// Set ga-disable-GA_MEASUREMENT_ID property to disable GA.
+			window[ `ga-disable-${ this.GA_ID }` ] = '1';
+		}
+		this.enabled = enable;
+	}
+
+	/**
+	 * Sets up the initial values of the Google Analytics client.
+	 */
+	initClient() {
+		this.client( 'js', new Date() );
+		this.client( 'config', this.GA_ID, { send_page_view: false } );
+	}
+
+	/**
+	 * Sends an event to Google Analytics.
+	 *
+	 * @param {string} action
+	 * @param {{event_category: string; event_label?: string;}} params
+	 */
+	send( action, params ) {
+		if ( this.enabled ) {
+			this.client( 'event', action, params );
+		}
+	}
+
+	/**
+	 * Creates a debounced copy of send method.
+	 */
+	sendDebounce = debounce( this.send.bind( this ), 500 );
+}

js/src/common/classes/index.js

@@ -0,0 +1 @@
+export { default as GAClient } from './GAClient';

js/src/common/helpers/debounce.js

@@ -0,0 +1,24 @@
+/**
+ * Ensures that the provided function isn't called multiple times in succession.
+ *
+ * Forked from BMO's work in Genesis Blocks.
+ *
+ * @param {() => any} func
+ * @param {number} wait
+ *
+ * @return {() => void} A debounced function.
+ */
+const debounce = ( func, wait ) => {
+	let timeout;
+	return function executedFunction( ...args ) {
+		const later = () => {
+			clearTimeout( timeout );
+			func( ...args );
+		};
+
+		clearTimeout( timeout );
+		timeout = setTimeout( later, wait );
+	};
+};
+
+export default debounce;

js/src/common/helpers/index.js

@@ -1,3 +1,4 @@
+export { default as debounce } from './debounce';
 export { default as getFieldsAsArray } from './getFieldsAsArray';
 export { default as getFieldsAsObject } from './getFieldsAsObject';
 export { default as getIconComponent } from './getIconComponent';

js/src/edit-block/index.js

@@ -11,6 +11,9 @@ import { addFilter } from '@wordpress/hooks';
  */
 import { initializeEditor } from './helpers';
 import { addControls } from '../block-editor/helpers';
+import { GAClient } from '../common/classes';
+
+addFilter( 'genesisCustomBlocks.controls', 'genesisCustomBlocks/addControls', addControls );
 
 // Renders the app in the container.
 domReady( () => {
@@ -23,4 +26,7 @@ domReady( () => {
 	initializeEditor( gcbEditor, container );
 } );
 
-addFilter( 'genesisCustomBlocks.controls', 'genesisCustomBlocks/addControls', addControls );
+// @ts-ignore
+window.GcbAnalytics = {
+	GAClient: new GAClient(),
+};

package.json

@@ -18,6 +18,9 @@
   "bugs": {
     "url": "https://github.com/studiopress/genesis-custom-blocks/issues"
   },
+  "engines": {
+    "node": "14"
+  },
   "devDependencies": {
     "@material-ui/core": "4.11.2",
     "@material-ui/icons": "4.11.2",

php/Admin/Admin.php

@@ -16,6 +16,13 @@
  */
 class Admin extends ComponentAbstract {
 
+	/**
+	 * Plugin settings.
+	 *
+	 * @var Settings
+	 */
+	public $settings;
+
 	/**
 	 * Plugin documentation.
 	 *
@@ -55,18 +62,21 @@ class Admin extends ComponentAbstract {
 	 * Initialise the Admin component.
 	 */
 	public function init() {
+		$this->settings = new Settings();
+		genesis_custom_blocks()->register_component( $this->settings );
+
 		$this->documentation = new Documentation();
 		genesis_custom_blocks()->register_component( $this->documentation );
 
+		$this->edit_block = new EditBlock();
+		genesis_custom_blocks()->register_component( $this->edit_block );
+
 		$this->onboarding = new Onboarding();
 		genesis_custom_blocks()->register_component( $this->onboarding );
 
 		$this->upgrade = new Upgrade();
 		genesis_custom_blocks()->register_component( $this->upgrade );
 
-		$this->edit_block = new EditBlock();
-		genesis_custom_blocks()->register_component( $this->edit_block );
-
 		if ( defined( 'WP_LOAD_IMPORTERS' ) && WP_LOAD_IMPORTERS ) {
 			$this->import = new Import();
 			genesis_custom_blocks()->register_component( $this->import );

php/Admin/Settings.php

@@ -0,0 +1,89 @@
+<?php
+/**
+ * Genesis Custom Blocks Settings.
+ *
+ * @package   Genesis\CustomBlocks
+ * @copyright Copyright(c) 2021, Genesis Custom Blocks
+ * @license   http://opensource.org/licenses/GPL-2.0 GNU General Public License, version 2 (GPL-2.0)
+ */
+
+namespace Genesis\CustomBlocks\Admin;
+
+use Genesis\CustomBlocks\ComponentAbstract;
+
+/**
+ * Class Settings
+ */
+class Settings extends ComponentAbstract {
+
+	/**
+	 * Option name for the notices.
+	 *
+	 * @var string
+	 */
+	const NOTICES_OPTION_NAME = 'genesis_custom_blocks_notices';
+
+	/**
+	 * Settings group to opt into analytics.
+	 *
+	 * @var string
+	 */
+	const SETTINGS_GROUP = 'genesis-custom-blocks-settings-page';
+
+	/**
+	 * Option name to opt into analytics.
+	 *
+	 * @var string
+	 */
+	const ANALYTICS_OPTION_NAME = 'genesis_custom_blocks_analytics_opt_in';
+
+	/**
+	 * The value when a user has opted into analytics.
+	 *
+	 * @var string
+	 */
+	const ANALYTICS_OPTED_IN_VALUE = 'genesis_custom_blocks_analytics_opt_in';
+
+	/**
+	 * Page slug.
+	 *
+	 * @var string
+	 */
+	const PAGE_SLUG = 'genesis-custom-blocks-settings';
+
+	/**
+	 * Register any hooks that this component needs.
+	 */
+	public function register_hooks() {
+		add_action( 'admin_menu', [ $this, 'add_submenu_pages' ] );
+		add_action( 'admin_init', [ $this, 'register_settings' ] );
+	}
+
+	/**
+	 * Add submenu pages to the Genesis Custom Blocks menu.
+	 */
+	public function add_submenu_pages() {
+		add_submenu_page(
+			'edit.php?post_type=' . genesis_custom_blocks()->get_post_type_slug(),
+			__( 'Genesis Custom Blocks Settings', 'genesis-custom-blocks' ),
+			__( 'Settings', 'genesis-custom-blocks' ),
+			'manage_options',
+			self::PAGE_SLUG,
+			[ $this, 'render_page' ]
+		);
+	}
+
+	/**
+	 * Renders the Settings page.
+	 */
+	public function render_page() {
+		include genesis_custom_blocks()->get_path() . 'php/Views/Settings.php';
+	}
+
+	/**
+	 * Register Genesis Custom Blocks settings.
+	 */
+	public function register_settings() {
+		register_setting( self::SETTINGS_GROUP, self::ANALYTICS_OPTION_NAME );
+	}
+}