Vue中Algolia search insights的viewedFilters事件触发问题

核心原因 #

viewedFilters事件不会由Algolia即时搜索中间件自动触发，它属于页面级主动上报场景，需要在用户访问带有预定义分面筛选的页面时，手动调用Search Insights API完成上报。而viewedObjectIds、clickedFilters等事件是由组件交互自动触发并通过中间件转发，两者触发逻辑不同。

解决方案步骤 #

1. 预加载分面筛选状态：确保落地页初始化时，分面筛选参数已设置到搜索实例的initialState中（比如通过URL参数解析、路由传值等方式）。
2. 手动调用上报API：页面加载完成后，获取搜索实例的分面筛选状态，调用aa('viewedFilters', ...)完成事件上报。
3. 优化Insights初始化逻辑：避免在每次事件触发时重复初始化Insights客户端，改为全局初始化一次。

修改后的代码示例 #

模板部分（添加ref获取搜索实例） #

<template>
    <ais-instant-search
        ref="instantSearch"
        :index-name="my_index"
        :middlewares="middlewares"
        :search-client="searchClient"
        :initial-state="initialState"
    >
        <!-- Facets / Hits / Etc -->
    </ais-instant-search>
</template>

脚本部分（添加手动上报逻辑） #

<script>
import algoliasearch from 'algoliasearch';
import aa from 'search-insights';
import { createInsightsMiddleware } from 'instantsearch.js/es/middlewares'

const insightsMiddleware = createInsightsMiddleware({
    insightsClient: aa,
    onEvent: (event, aa) => {
        const { insightsMethod, payload } = event;
        if (insightsMethod) {
            aa(insightsMethod, payload);
        }
    }
});

export default {
    data() {
        return {
            my_index: 'your_index_name',
            searchClient: this.createSearchClient(),
            middlewares: [insightsMiddleware],
            initialState: {
                // 示例：预定义的分面筛选，可从URL参数解析后填充
                facetFilters: ['category:electronics', 'price:under-100']
            }
        }
    },
    created() {
        // 全局初始化一次Insights客户端
        aa('init', {
            appId: "app_id",
            apiKey: "app_key",
            useCookie: true,
        });
    },
    mounted() {
        this.reportViewedFilters();
    },
    methods: {
        createSearchClient() {
            const algoliaClient = algoliasearch("app_id", "api_key");

            return {
                search(requests) {
                    const newRequests = requests.map(request => {
                        if (!request.params.query || request.params.query.length === 0) {
                            request.params.analytics = false;
                        }
                        return request;
                    });
                    return algoliaClient.search(newRequests);
                }
            }
        },
        reportViewedFilters() {
            const searchInstance = this.$refs.instantSearch?.instantSearchInstance;
            if (!searchInstance) return;

            const { facetFilters, disjunctiveFacets } = searchInstance.state;
            const viewedFilters = [];

            // 处理普通分面筛选（facetFilters）
            if (Array.isArray(facetFilters)) {
                facetFilters.forEach(filterGroup => {
                    const filters = Array.isArray(filterGroup) ? filterGroup : [filterGroup];
                    filters.forEach(filter => {
                        const [attribute, value] = filter.split(':');
                        if (attribute && value) {
                            viewedFilters.push({ attribute, value });
                        }
                    });
                });
            }

            // 处理互斥分面筛选（disjunctiveFacets）
            if (disjunctiveFacets && typeof disjunctiveFacets === 'object') {
                Object.entries(disjunctiveFacets).forEach(([attribute, values]) => {
                    values.forEach(value => {
                        viewedFilters.push({ attribute, value });
                    });
                });
            }

            // 上报viewedFilters事件
            if (viewedFilters.length > 0) {
                aa('viewedFilters', {
                    indexName: this.my_index,
                    filters: viewedFilters,
                });
            }
        }
    }
}
</script>

关键注意事项 #

• initialState需正确填充：如果分面筛选来自URL参数，需在组件初始化时解析URL并将筛选条件填充到initialState，确保搜索实例能获取到有效筛选状态。
• 避免重复初始化Insights：将aa('init')移到组件created钩子或全局入口文件，避免每次事件触发时重复执行初始化逻辑。
• 分面格式兼容：代码兼容了普通facetFilters和互斥disjunctiveFacets的格式，可根据实际使用场景调整处理逻辑。

内容的提问来源于stack exchange，提问作者accalton