Instant Search: Add TrainTracks analytics (#13730)

This change adds TrainTracks analytics to Jetpack Instant Search.

modules/search/class.jetpack-search.php

@@ -204,6 +204,7 @@ public function load_assets() {
 				$script_version = self::get_asset_version( $script_relative_path );
 				$script_path    = plugins_url( $script_relative_path, JETPACK__PLUGIN_FILE );
 				wp_enqueue_script( 'jetpack-instant-search', $script_path, array(), $script_version, true );
+				$this->load_and_initialize_tracks();
 
 				$widget_options = Jetpack_Search_Helpers::get_widgets_from_option();
 				if ( is_array( $widget_options ) ) {
@@ -232,13 +233,13 @@ public function load_assets() {
 				}
 				// This is probably a temporary filter for testing the prototype.
 				$options = array(
-					'postTypes' => $post_type_labels,
-					'siteId'    => Jetpack::get_option( 'id' ),
-					'widgets'   => array_values( $widgets ),
-					'sort'      => $widget_options['sort'],
-					'postTypeFilters' => $widget_options['post_types'],
 					'enableLoadOnScroll' => false,
-					'locale'    => str_replace( '_', '-', get_locale() ),
+					'locale'             => str_replace( '_', '-', get_locale() ),
+					'postTypeFilters'    => $widget_options['post_types'],
+					'postTypes'          => $post_type_labels,
+					'siteId'             => Jetpack::get_option( 'id' ),
+					'sort'               => $widget_options['sort'],
+					'widgets'            => array_values( $widgets ),
 				);
 				/**
 				 * Customize Instant Search Options.
@@ -265,6 +266,10 @@ public function load_assets() {
 		}
 	}
 
+	public function load_and_initialize_tracks() {
+		wp_enqueue_script( 'jp-tracks', '//stats.wp.com/w.js', array(), null, true ); 
+	}
+
 	/**
 	 * Get the version number to use when loading the file. Allows us to bypass cache when developing.
 	 *

modules/search/instant-search/components/search-result-minimal.jsx

@@ -9,6 +9,8 @@ import { h, Component } from 'preact';
  * Internal dependencies
  */
 import Gridicon from './gridicon';
+import arrayOverlap from '../lib/array-overlap';
+import { recordTrainTracksRender, recordTrainTracksInteract } from '../lib/tracks';
 
 const ShortcodeTypes = {
 	video: [
@@ -29,14 +31,28 @@ const ShortcodeTypes = {
 };
 
 class SearchResultMinimal extends Component {
-	arrayOverlap( a1, a2 ) {
-		if ( ! Array.isArray( a1 ) ) {
-			a1 = [ a1 ];
-		}
-		const intersection = a1.filter( value => a2.includes( value ) );
-		return intersection.length !== 0;
+	componentDidMount() {
+		recordTrainTracksRender( this.getCommonTrainTracksProps() );
+	}
+
+	getCommonTrainTracksProps() {
+		return {
+			fetch_algo: this.props.result.railcar.fetch_algo,
+			fetch_position: this.props.result.railcar.fetch_position,
+			fetch_query: this.props.result.railcar.fetch_query,
+			railcar: this.props.result.railcar.railcar,
+			rec_blog_id: this.props.result.railcar.rec_blog_id,
+			rec_post_id: this.props.result.railcar.rec_post_id,
+			ui_algo: 'jetpack-instant-search-ui/v1',
+			ui_position: this.props.index,
+		};
 	}
 
+	onClick = () => {
+		// Send out analytics call
+		recordTrainTracksInteract( { ...this.getCommonTrainTracksProps(), action: 'click' } );
+	};
+
 	render() {
 		const { result_type, fields, highlight } = this.props.result;
 		const { locale = 'en-US' } = this.props;
@@ -65,9 +81,9 @@ class SearchResultMinimal extends Component {
 		}
 		const noTags = tags.length === 0 && cats.length === 0;
 
-		const hasVideo = this.arrayOverlap( fields.shortcode_types, ShortcodeTypes.video );
-		const hasAudio = this.arrayOverlap( fields.shortcode_types, ShortcodeTypes.audio );
-		const hasGallery = this.arrayOverlap( fields.shortcode_types, ShortcodeTypes.gallery );
+		const hasVideo = arrayOverlap( fields.shortcode_types, ShortcodeTypes.video );
+		const hasAudio = arrayOverlap( fields.shortcode_types, ShortcodeTypes.audio );
+		const hasGallery = arrayOverlap( fields.shortcode_types, ShortcodeTypes.gallery );
 
 		let postTypeIcon = null;
 		switch ( fields.post_type ) {
@@ -114,11 +130,10 @@ class SearchResultMinimal extends Component {
 					{ postTypeIcon }
 					<a
 						href={ `//${ fields[ 'permalink.url.raw' ] }` }
-						target="_blank"
-						rel="noopener noreferrer"
 						className="jetpack-instant-search__result-minimal-title"
 						//eslint-disable-next-line react/no-danger
 						dangerouslySetInnerHTML={ { __html: highlight.title } }
+						onClick={ this.onClick }
 					/>
 				</h3>
 

modules/search/instant-search/components/search-results.jsx

@@ -14,15 +14,22 @@ import { hasFilter } from '../lib/query-string';
 import ScrollButton from './scroll-button';
 
 class SearchResults extends Component {
-	render_result( result ) {
+	renderResult = ( result, index ) => {
 		switch ( this.props.resultFormat ) {
 			case 'engagement':
 			case 'product':
 			case 'minimal':
 			default:
-				return <SearchResultMinimal result={ result } locale={ this.props.locale } />;
+				return (
+					<SearchResultMinimal
+						index={ index }
+						locale={ this.props.locale }
+						query={ this.props.query }
+						result={ result }
+					/>
+				);
 		}
-	}
+	};
 
 	render() {
 		const { query } = this.props;
@@ -63,7 +70,7 @@ class SearchResults extends Component {
 		return (
 			<div
 				className={ `jetpack-instant-search__search-results ${
-					this.state.isLoading === true ? ' jetpack-instant-search__is-loading' : ''
+					this.props.isLoading === true ? ' jetpack-instant-search__is-loading' : ''
 				}` }
 			>
 				<p className="jetpack-instant-search__search-results-real-query">{ headerText }</p>
@@ -72,7 +79,7 @@ class SearchResults extends Component {
 						{ sprintf( __( 'No results for "%s"', 'jetpack' ), query ) }
 					</p>
 				) }
-				{ results.map( result => this.render_result( result ) ) }
+				{ results.map( this.renderResult ) }
 				{ this.props.hasNextPage && (
 					<ScrollButton
 						enableLoadOnScroll={ this.props.enableLoadOnScroll }

modules/search/instant-search/index.jsx

@@ -12,6 +12,7 @@ import SearchApp from './components/search-app';
 import { getSearchQuery, getFilterQuery, determineDefaultSort } from './lib/query-string';
 import { getThemeOptions } from './lib/dom';
 import { SERVER_OBJECT_NAME } from './lib/constants';
+import { initializeTracks, identifySite } from './lib/tracks';
 
 const injectSearchApp = grabFocus => {
 	render(
@@ -29,6 +30,8 @@ const injectSearchApp = grabFocus => {
 
 document.addEventListener( 'DOMContentLoaded', function() {
 	if ( !! window[ SERVER_OBJECT_NAME ] && 'siteId' in window[ SERVER_OBJECT_NAME ] ) {
+		initializeTracks();
+		identifySite( window[ SERVER_OBJECT_NAME ].siteId );
 		injectSearchApp();
 	}
 } );

modules/search/instant-search/lib/array-overlap.js

@@ -0,0 +1,7 @@
+export default function arrayOverlap( a1, a2 ) {
+	if ( ! Array.isArray( a1 ) ) {
+		a1 = [ a1 ];
+	}
+	const intersection = a1.filter( value => a2.includes( value ) );
+	return intersection.length !== 0;
+}

modules/search/instant-search/lib/tracks.js

@@ -0,0 +1,21 @@
+const globalProperties = {};
+
+export function initializeTracks() {
+	window._tkq = window._tkq || [];
+}
+
+export function identifySite( siteId ) {
+	globalProperties.blog_id = siteId;
+}
+
+export function recordEvent( eventName, properties ) {
+	window._tkq.push( [ 'recordEvent', eventName, { ...globalProperties, ...properties } ] );
+}
+
+export function recordTrainTracksRender( properties ) {
+	recordEvent( 'jetpack_instant_search_traintracks_render', properties );
+}
+
+export function recordTrainTracksInteract( properties ) {
+	recordEvent( 'jetpack_instant_search_traintracks_interact', properties );
+}