I've been using Swifype for a while on the website and as soon as it's being used with default input-field (st-default-search-input) and default overlay, analytics worked just fine.
But at some point I had to rework it a little bit. So, I made custom input that sends search-query to the Swiftype-API, receives the results and renders them on the page. It's working just fine, I get results from the Swiftype-API and render them on the page, but I noticed that analytics stopped collecting any data since then. There's no search results displayed in the Analytics-tab in the Swiftype's dashboard at all (screenshot attached).
So, my question is if that's possible to make Swiftype-analytics work when using the "get search results by uisng Swiftype-API"-approach instead of using built-in default "st-default-search-input" as input and default overlay (or "st-search-container"-container) ?
Thanks in advance,
Yevhen
Ensure API Usage:
Make sure you're using the correct API endpoints for searching. Swiftype's API should be set up to return track_urls in the response if analytics is configured for your account.
Implement Manual Tracking:
Track Events: You need to manually send tracking events to Swiftype's analytics endpoint. Here's how you might do this in JavaScript:
function trackSearchEvent(query, resultClicked) {
const endpoint = 'https://api.swiftype.com/api/v1/public/analytics';
const apiKey = 'YOUR_SWIFTYPE_API_KEY'; // Replace with your actual API key
const engineKey = 'YOUR_ENGINE_KEY'; // Replace with your engine key
if (resultClicked) {
// Track click event
fetch(endpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
api_key: apiKey,
engine_key: engineKey,
t: 'click',
q: query,
d: resultClicked.id,
p: resultClicked.position // Position in search results
})
});
} else {
// Track search event
fetch(endpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
api_key: apiKey,
engine_key: engineKey,
t: 'search',
q: query
})
});
}
}
// Example usage:
document.getElementById('customSearchInput').addEventListener('submit', function(e) {
e.preventDefault();
let query = this.querySelector('input[name="q"]').value;
trackSearchEvent(query, null); // Track the search event
// Assuming you fetch and render results here
fetchSearchResults(query).then(results => {
renderResults(results);
// Attach click handlers to results for tracking
document.querySelectorAll('.search-result').forEach((result, index) => {
result.addEventListener('click', function() {
trackSearchEvent(query, {
id: this.dataset.resultId,
position: index
});
});
});
});
});
// Helper functions to fetch and render results would go here
function fetchSearchResults(query) {
// Fetch results from Swiftype API
}
function renderResults(results) {
// Render results on your page
}