Add analyticsTags to Algolia search queries (#15719)

Author: vanessayuenn

javascripts/search.js

@@ -1,5 +1,5 @@
 const instantsearch = require('instantsearch.js').default
-const { searchBox, hits } = require('instantsearch.js/es/widgets')
+const { searchBox, hits, configure } = require('instantsearch.js/es/widgets')
 const algoliasearch = require('algoliasearch')
 const searchWithYourKeyboard = require('search-with-your-keyboard')
 const querystring = require('querystring')
@@ -131,34 +131,39 @@ export default function () {
 
   const search = instantsearch(opts)
 
-  search.addWidget(
-    hits({
-      container: '#search-results-container',
-      templates: {
-        empty: 'No results',
-        item: resultTemplate
-      },
-      // useful for debugging template context, if needed
-      transformItems: items => {
-        // console.log(`transformItems`, items)
-        return items
-      }
-    })
-  )
-
   // Find search placeholder text in a <meta> tag, falling back to a default
   const placeholderMeta = document.querySelector('meta[name="site.data.ui.search.placeholder"]')
   const placeholder = placeholderMeta ? placeholderMeta.content : 'Search topics, products...'
 
-  search.addWidget(
-    searchBox({
-      container: '#search-input-container',
-      placeholder,
-      // only autofocus on the homepage, and only if no #hash is present in the URL
-      autofocus: (hasStandaloneSearch()) && !window.location.hash.length,
-      showReset: false,
-      showSubmit: false
-    })
+  search.addWidgets(
+    [
+      hits({
+        container: '#search-results-container',
+        templates: {
+          empty: 'No results',
+          item: resultTemplate
+        },
+        // useful for debugging template context, if needed
+        transformItems: items => {
+          // console.log(`transformItems`, items)
+          return items
+        }
+      }),
+      configure({
+        analyticsTags: [
+          'site:docs.github.com',
+          `env:${process.env.NODE_ENV}`
+        ]
+      }),
+      searchBox({
+        container: '#search-input-container',
+        placeholder,
+        // only autofocus on the homepage, and only if no #hash is present in the URL
+        autofocus: (hasStandaloneSearch()) && !window.location.hash.length,
+        showReset: false,
+        showSubmit: false
+      })
+    ]
   )
 
   // enable for debugging

package-lock.json

@@ -40,7 +40,7 @@
     "html-entities": "^1.2.1",
     "html-truncate": "^1.2.2",
     "imurmurhash": "^0.1.4",
-    "instantsearch.js": "^3.6.0",
+    "instantsearch.js": "^4.8.2",
     "is-url": "^1.2.4",
     "js-cookie": "^2.2.1",
     "js-yaml": "^3.14.0",

package.json

@@ -1,5 +1,6 @@
-/* global page */
+/* global page, browser */
 const sleep = require('await-sleep')
+const querystring = require('querystring')
 
 describe('homepage', () => {
   test('should be titled "GitHub Documentation"', async () => {
@@ -36,6 +37,29 @@ describe('algolia browser search', () => {
     expect(hits.length).toBeGreaterThan(5)
   })
 
+  it('sends the correct data to algolia', async () => {
+    const newPage = await browser.newPage()
+    await newPage.goto('http://localhost:4001/ja/enterprise/2.22/admin/installation')
+
+    await newPage.setRequestInterception(true)
+    newPage.on('request', interceptedRequest => {
+      if (interceptedRequest.method() === 'POST' && /algolia/i.test(interceptedRequest.url())) {
+        const data = JSON.parse(interceptedRequest.postData())
+        const { indexName, params } = data.requests[0]
+        const parsedParams = querystring.parse(params)
+        const analyticsTags = JSON.parse(parsedParams.analyticsTags)
+        expect(indexName).toBe('github-docs-2.22-ja')
+        expect(analyticsTags).toHaveLength(2)
+        // browser tests are run against production build, so we are expecting env:production
+        expect(analyticsTags).toEqual(expect.arrayContaining(['site:docs.github.com', 'env:production']))
+      }
+      interceptedRequest.continue()
+    })
+
+    await newPage.click('#search-input-container input[type="search"]')
+    await newPage.type('#search-input-container input[type="search"]', 'test')
+  })
+
   it('removes `algolia-query` query param after page load', async () => {
     await page.goto('http://localhost:4001/en?algolia-query=helpme')
 

tests/browser/browser.js

@@ -1,6 +1,7 @@
 const path = require('path')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
+const { EnvironmentPlugin } = require('webpack')
 
 module.exports = {
   entry: './javascripts/index.js',
@@ -67,6 +68,7 @@ module.exports = {
       patterns: [
         { from: 'node_modules/@primer/css/fonts', to: 'fonts' }
       ]
-    })
+    }),
+    new EnvironmentPlugin(['NODE_ENV'])
   ]
 }