fix(insights): update insights example for Vue InstantSearch (#242)

Co-authored-by: Haroen Viaene <hello@haroen.me>
algolia · May 20, 2021 · 96de914 · 96de914
1 parent eb815a5
commit 96de914
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 79 deletions.
diff --git a/Vue InstantSearch/algolia-insights/package.json b/Vue InstantSearch/algolia-insights/package.json
@@ -11,7 +11,7 @@
     "algoliasearch": "3.33.0",
     "instantsearch.css": "7.3.1",
     "vue": "2.6.10",
-    "vue-instantsearch": "3.0.3",
+    "vue-instantsearch": "3.7.0",
     "vue-server-renderer": "^2.6.11"
   },
   "devDependencies": {

diff --git a/Vue InstantSearch/algolia-insights/public/index.html b/Vue InstantSearch/algolia-insights/public/index.html
@@ -7,13 +7,12 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>Algolia Insights</title>
     <script>
-      !function(e,a,t,n,s,i,c){e.AlgoliaAnalyticsObject=s,e.aa=e.aa||function(){(e.aa.queue=e.aa.queue||[]).push(arguments)},i=a.createElement(t),c=a.getElementsByTagName(t)[0],i.async=1,i.src="https://cdn.jsdelivr.net/npm/search-insights@0.0.14",c.parentNode.insertBefore(i,c)}(window,document,"script",0,"aa");
-
-      // Initialize library
-      aa('init', {
-        applicationID: 'latency',
-        apiKey: '6be0576ff61c053d5f9a3225e2a90f76'
-      })
+      var ALGOLIA_INSIGHTS_SRC = "https://cdn.jsdelivr.net/npm/search-insights@2.0.0";
+
+      !function(e,a,t,n,s,i,c){e.AlgoliaAnalyticsObject=s,e[s]=e[s]||function(){
+      (e[s].queue=e[s].queue||[]).push(arguments)},i=a.createElement(t),c=a.getElementsByTagName(t)[0],
+      i.async=1,i.src=n,c.parentNode.insertBefore(i,c)
+      }(window,document,"script",ALGOLIA_INSIGHTS_SRC,"aa");
     </script>
   </head>
   <body>

diff --git a/Vue InstantSearch/algolia-insights/src/App.vue b/Vue InstantSearch/algolia-insights/src/App.vue
@@ -14,45 +14,39 @@
       <ais-instant-search
         :search-client="searchClient"
         index-name="instant_search"
+        :middlewares="middlewares"
       >
-        <ais-configure :clickAnalytics="true" />
-        <ais-state-results>
-          <template slot-scope="{ results: { queryID } }">
-            <app-insights :query-id="queryID" />
-          </template>
-        </ais-state-results>
-
         <div class="search-panel">
           <div class="search-panel__filters">
             <ais-refinement-list attribute="categories" searchable />
           </div>
 
           <div class="search-panel__results">
+            <button type="button" @click="setUserToken('Paul')">
+              Set userToken to "Paul"
+            </button>
             <ais-search-box placeholder="Search here…" class="searchbox" />
             <ais-hits>
-              <template slot="item" slot-scope="{ item }">
-                <button
-                  @click="
-                    insightsClick({
-                      objectID: item.objectID,
-                      position: item.__position,
-                    })
-                  "
-                >
-                  Click
-                </button>
-                <button
-                  @click="
-                    insightsConversion({
-                      objectID: item.objectID,
-                    })
-                  "
-                >
-                  Convert
-                </button>
-                <h1><ais-highlight :hit="item" attribute="name" /></h1>
-                <p><ais-highlight :hit="item" attribute="description" /></p>
-              </template>
+              <ul slot-scope="{ items, sendEvent }">
+                <li v-for="item in items" :key="item.objectID">
+                  <h1><ais-highlight :hit="item" attribute="name" /></h1>
+                  <p><ais-highlight :hit="item" attribute="description" /></p>
+
+                  <button
+                    type="button"
+                    @click="sendEvent('click', item, 'Item Starred')"
+                  >
+                    Star
+                  </button>
+
+                  <button
+                    type="button"
+                    @click="sendEvent('conversion', item, 'Item Ordered')"
+                  >
+                    Order
+                  </button>
+                </li>
+              </ul>
             </ais-hits>
             <div class="pagination"><ais-pagination /></div>
           </div>
@@ -65,29 +59,25 @@
 <script>
 import algoliasearch from 'algoliasearch/lite';
 import 'instantsearch.css/themes/algolia-min.css';
-import AppInsights from './components/Insights.js';
+import { createInsightsMiddleware } from 'instantsearch.js/es/middlewares';
+
+const insightsMiddleware = createInsightsMiddleware({
+  insightsClient: window.aa,
+});
 
 export default {
-  components: { AppInsights },
   data() {
     return {
       searchClient: algoliasearch(
         'latency',
         '6be0576ff61c053d5f9a3225e2a90f76'
       ),
+      middlewares: [insightsMiddleware],
     };
   },
   methods: {
-    insightsClick({ position, objectID }) {
-      window.aa('click', {
-        objectID,
-        position,
-      });
-    },
-    insightsConversion({ objectID }) {
-      window.aa('conversion', {
-        objectID,
-      });
+    setUserToken(userToken) {
+      window.aa('setUserToken', userToken);
     },
   },
 };

diff --git a/Vue InstantSearch/algolia-insights/src/components/Insights.js b/Vue InstantSearch/algolia-insights/src/components/Insights.js
diff --git a/Vue InstantSearch/algolia-insights/yarn.lock b/Vue InstantSearch/algolia-insights/yarn.lock
@@ -776,6 +776,11 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/googlemaps@^3.39.6":
+  version "3.43.3"
+  resolved "https://registry.yarnpkg.com/@types/googlemaps/-/googlemaps-3.43.3.tgz#70cf962154a160fe78bcd69d6ccc296dd9175b1f"
+  integrity sha512-ZWNoz/O8MPEpiajvj7QiqCY8tTLFNqNZ/a+s+zTV58wFVNAvvqV4bdGfnsjTb5Cs4V6wEsLrX8XRhmnyYJ2Tdg==
+
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -1266,13 +1271,20 @@ ajv@^6.1.0, ajv@^6.5.3, ajv@^6.5.5, ajv@^6.6.1:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-algoliasearch-helper@^3.1.0, algoliasearch-helper@^3.1.1:
+algoliasearch-helper@^3.1.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-3.1.2.tgz#f01cfed1ff3e4848ae9dc1ece31a4e7cbf65eeea"
   integrity sha512-HfCVvmKH6+5OU9/SaHLdhvr39DBObA02z62RsfPhFDftzgQM6pJB2JoPyGpIteHW4RAYh8bPLiB8l4hajuy6fA==
   dependencies:
     events "^1.1.1"
 
+algoliasearch-helper@^3.4.4:
+  version "3.4.4"
+  resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-3.4.4.tgz#f2eb46bc4d2f6fed82c7201b8ac4ce0a1988ae67"
+  integrity sha512-OjyVLjykaYKCMxxRMZNiwLp8CS310E0qAeIY2NaublcmLAh8/SL19+zYHp7XCLtMem2ZXwl3ywMiA32O9jszuw==
+  dependencies:
+    events "^1.1.1"
+
 algoliasearch@3.33.0:
   version "3.33.0"
   resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-3.33.0.tgz#83b541124ebb0db54643009d4e660866b3177cdf"
@@ -4420,12 +4432,13 @@ instantsearch.css@7.3.1:
   resolved "https://registry.yarnpkg.com/instantsearch.css/-/instantsearch.css-7.3.1.tgz#7ab74a8f355091ae040947a9cf5438f379026622"
   integrity sha512-/kaMDna5D+Q9mImNBHEhb9HgHATDOFKYii7N1Iwvrj+lmD9gBJLqVhUw67gftq2O0QI330pFza+CRscIwB1wQQ==
 
-instantsearch.js@^4.5.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/instantsearch.js/-/instantsearch.js-4.6.0.tgz#197c8c5ab8168069bc420f620183be8fd6c7a297"
-  integrity sha512-ALxHMxdNKOCC3UfXkGzF1orWv4aaocHwvPQACnASudGl05uzl1W+OantayTPtMvaBrufapBb99QsNhTm3YZyRw==
+instantsearch.js@^4.20.0:
+  version "4.21.0"
+  resolved "https://registry.yarnpkg.com/instantsearch.js/-/instantsearch.js-4.21.0.tgz#3eec6b596795af7ec534d510fef58f36236a87e5"
+  integrity sha512-SgA7wRyicP8Uwdomp0dNQY9rWIjRSuTfyPgQ6GjRuYT7k8pfC7scHpC9CSfsTi6d0FTV18Psk+citFDRhXlffg==
   dependencies:
-    algoliasearch-helper "^3.1.1"
+    "@types/googlemaps" "^3.39.6"
+    algoliasearch-helper "^3.4.4"
     classnames "^2.2.5"
     events "^1.1.0"
     hogan.js "^3.0.2"
@@ -8390,13 +8403,13 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.1.tgz#b2d3d95402a811602380783ea4f566eb875569a2"
   integrity sha512-AA86yKZ5uOKz87/q1UpngEXhbRkaYg1b7HMMVRobNV1IVKqZe8oLIzo6iMocVwZXnYitlGwf2k4ZRLOZlS8oPQ==
 
-vue-instantsearch@3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/vue-instantsearch/-/vue-instantsearch-3.0.3.tgz#90ebb8906daae30ed87a19c43566fc41c8a0d5c8"
-  integrity sha512-ry2VtYi0iKxjlioLN7bEp5hQDYH/4vX9GBlw64LNQIqsOmK6s/tEl/ZBSq8tdOS46vkpvhjaTRk9ZoOFCjKJXQ==
+vue-instantsearch@3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/vue-instantsearch/-/vue-instantsearch-3.7.0.tgz#3247aa601f8ba5b1d478418cc831544d4fc55118"
+  integrity sha512-ilXOXnZbllZOFpJ+hP9rISbnT7PZW8CfW35OGaB5zeAANjnZpFNIdRRUpFoEKtU8fsRqYcYMMJILC7OD5xSJcg==
   dependencies:
     algoliasearch-helper "^3.1.0"
-    instantsearch.js "^4.5.0"
+    instantsearch.js "^4.20.0"
 
 vue-loader@^15.7.0:
   version "15.7.0"