Skip to content
This repository has been archived by the owner on Dec 30, 2022. It is now read-only.

feat(insights): add insights support to InfiniteHits widget #666

Merged
merged 5 commits into from
Apr 26, 2019

Conversation

tkrugg
Copy link
Contributor

@tkrugg tkrugg commented Apr 23, 2019

⚠️ This PR depends on #664, it can't work until it's merged. It will stay as draft until then.

Summary
This integrates insights with Vue Instantsearch to help using Click
Analytics in InfiniteHits.

Using connectInfiniteHitsWithInsights instead of connectInfiniteHits
exposed a new property insights to the internal state, which user can
call to emit insights events.

Result

<ais-infinite-hits>
  <div slot-scope="{ items, refine, insights }">

    <div v-for="item in items">
      <button @click="insights('clickedObjectIDsAfterSearch', { eventName: 'Add to cart', objectIDs: [item.objectID] })">Add to cart</button>
    </div>

    <button @click="refine()"> Load more </button>
  </div>
</ais-infinite-hits>

@Haroenv
Copy link
Contributor

Haroenv commented Apr 23, 2019

looks good to me

@Haroenv
Copy link
Contributor

Haroenv commented Apr 23, 2019

this adds almost a whole kb, expected?

@tkrugg tkrugg marked this pull request as ready for review April 24, 2019 11:06
@tkrugg tkrugg force-pushed the feat/insights-with-vue-is-in-infinitehits branch from ba19842 to e91bb90 Compare April 24, 2019 12:04
**Summary**
This integrates insights with Vue Instantsearch to help using Click
Analytics in InfiniteHits.

Using `connectInfiniteHitsWithInsights` instead of `connectInfiniteHits`
exposed a new property `insights` to the internal state, which user can
call to emit insights events.

**Result**
```html
<ais-infinite-hits>
  <div slot-scope="{ items, refine, insights }">

    <div v-for="item in items">
      <button @click="insights('clickedObjectIDsAfterSearch', { eventName: 'Add to cart', objectIDs: [item.objectID] })">Add to cart</button>
    </div>

    <button @click="refine()"> Load more </button>
  </div>
</ais-infinite-hits>
```
@tkrugg tkrugg force-pushed the feat/insights-with-vue-is-in-infinitehits branch from e91bb90 to 58f949e Compare April 24, 2019 12:05
@tkrugg tkrugg requested a review from a team April 24, 2019 12:17
@tkrugg
Copy link
Contributor Author

tkrugg commented Apr 24, 2019

this adds almost a whole kb, expected?

I increased the bundlesize.
Strangely a local build tells me bundle size is 65.11 kB

┌────────────────────────────────────────────┐
│                                            │
│   Destination: dist/vue-instantsearch.js   │
│   Bundle Size:  245.82 KB                  │
│   Minified Size:  242.8 KB                 │
│   Gzipped Size:  65.11 KB                  │
│                                            │
└────────────────────────────────────────────┘
(!) vue plugin: The ongenerate hook used by plugin vue is deprecated. The generateBundle hook should be used instead.
created dist/vue-instantsearch.js in 8.9s

src/components/InfiniteHits.vue Show resolved Hide resolved
stories/InfiniteHits.stories.js Show resolved Hide resolved
@tkrugg tkrugg force-pushed the feat/insights-with-vue-is-in-infinitehits branch from 5cc5e49 to b03c9c0 Compare April 26, 2019 08:05
@tkrugg tkrugg merged commit b3302cf into master Apr 26, 2019
@Haroenv Haroenv deleted the feat/insights-with-vue-is-in-infinitehits branch April 26, 2019 11:50
Haroenv pushed a commit to algolia/instantsearch that referenced this pull request Dec 28, 2022
…vue-instantsearch#666)

* feat(insights): add insights support to InfiniteHits widget

**Summary**
This integrates insights with Vue Instantsearch to help using Click
Analytics in InfiniteHits.

Using `connectInfiniteHitsWithInsights` instead of `connectInfiniteHits`
exposed a new property `insights` to the internal state, which user can
call to emit insights events.

**Result**
```html
<ais-infinite-hits>
  <div slot-scope="{ items, refine, insights }">

    <div v-for="item in items">
      <button @click="insights('clickedObjectIDsAfterSearch', { eventName: 'Add to cart', objectIDs: [item.objectID] })">Add to cart</button>
    </div>

    <button @click="refine()"> Load more </button>
  </div>
</ais-infinite-hits>
```

* fix: increase bundle size 66kB -> 67kB

* fix: declare variable inside scope

* fix: expose insights in item slot
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants