I’ve setup an instantsearch searchbox with default hits widget and everything is rendering great. However, when I add some template code as per examples I’ve seen for insights it doesn’t seem to render the onclick HTML in the hits container.
This is my template
item: (hit, { html, sendEvent }) => html`
<div class="product" data-id="${hit.objectID}">
<a href="${hit.url}">
<img
src="${hit.thumbnail
? hit.thumbnail
: "/wp-content/uploads/woocommerce-placeholder-150x150.png"}"
align="left"
alt="${hit.title}"
/>
</a>
<div class="hit-name">
<h4>${hit.title}</h4>
<p>${hit.content}</p>
<button
onclick="${() =>
sendEvent("click", hit, "my-click-event")}"
>
Click event
</button>
</div>
</div>
`,
empty: "<div>No results have been found for {{ query }}</div>",
},
I can send insight events manually and they appear in the events debugger via this JS
aa('clickedObjectIDsAfterSearch', {
//userToken: 'user-123456', // required for Node.js
eventName: 'clickedObjectIDsAfterSearch',
index: 'wp_product',
//queryID: 'queryID',
//objectIDs: ['objectID-1'],
//positions: [2],
});
Maybe I’m not understanding how to correctly setup insights…