Eureka SDK Full Integration Examples

  • Published on Mar 27, 2026
  • 7 minute(s) read
Prev Next

The summary checklist for the Eureka SDK full integration is as follows:

  • Listen for eureka:sdk:campaign:ready.

  • Use Insider.eureka.isOnControlGroup(campId) to check if the user is in the control group. Both the control group and the variation users must send track logs to enable accurate A/B test comparison.

  • For variation users: fetch data using Insider.eureka.fetch.search or Insider.eureka.fetch.productListing, then render the page with Eureka data.

  • For control group users: render the page using your own data and UI.

  • Call the same track methods for both groups with the rendered product data.

  • Re-call fetch and track methods every time the user changes sorting, applies filters (facets), or uses pagination.

  • Verify integration using console warnings for missing parameters.

Category Listing Page

// Step 1: Listen for campaign ready event
Insider.eventManager.once('eureka:sdk:campaign:ready', function (event, data) {
    var campId = data.id;
    var listValue = 'categoryA~categoryB';
    var isControlGroup = Insider.eureka.isOnControlGroup(campId);
    var items, navigation;

    if (!isControlGroup) {
        // Variation: Fetch from Eureka and render
        Insider.eureka.fetch.productListing(campId, 'Category', listValue, {
            pagination: { from: 0, size: 25 },
            sorting: 'Relevancy'
        }).then(function (response) {
            items = response.data.items;
            navigation = response.data.navigation;
            renderCategoryPage(items);
            trackPageView();
        });
    } else {
        // Control Group: Use your own data and UI
        trackPageView();
    }

    // Step 2: Track the page view (same for both groups)
    function trackPageView() {
        Insider.eureka.track.productListingView(campId, listValue, {
            pagination: {
                resultCount: navigation.total,
                itemsPerPage: 25,
                totalPages: navigation.totalPageCount,
                currentPage: 1,
            },
            sorting: 'Relevancy',
            products: items.map(function (item, index) {
                return {
                    id: item.id,
                    groupCode: item.group,
                    price: item.price,
                    displayPosition: index + 1,
                };
            }),
        });
    }

    // Step 3: Write a click event and inside track product clicks (call when a user clicks a product)
    Insider.eureka.track.productClickAfterListing(campId, listValue, {
        pagination: { resultCount: 84 },
        product: {
            id: 'product-001',
            price: 99.99,
            displayPosition: 3,
        },
    });
});

When the user changes sorting, applies filters, or navigates to a different page, call both fetch.productListing() and track.productListingView() again with the updated parameters.

Search Results Page (with add to cart)

// Step 1: Listen for campaign ready event
Insider.eventManager.once('eureka:sdk:campaign:ready', function (event, data) {
    var campId = data.id;
    var searchQuery = 'queryA';
    var isControlGroup = Insider.eureka.isOnControlGroup(campId);
    var items, navigation;

    if (!isControlGroup) {
        // Variation: Fetch from Eureka and render
        Insider.eureka.fetch.search(campId, searchQuery, {
            pagination: { from: 0, size: 24 },
            sorting: 'Relevancy'
        }).then(function (response) {
            items = response.data.items;
            navigation = response.data.navigation;
            renderSearchResults(items);
            trackSearch();
        });
    } else {
        // Control Group: Use your own data and UI
        trackSearch();
    }

    // Step 2: Track the search event (same for both groups)
    function trackSearch() {
        Insider.eureka.track.search(campId, searchQuery, {
            pagination: {
                resultCount: navigation.total,
                itemsPerPage: 24,
                totalPages: navigation.totalPageCount,
                currentPage: 1,
            },
            products: items.map(function (item, index) {
                return {
                    id: item.id,
                    price: item.price,
                    displayPosition: index + 1,
                };
            }),
        });
    }

    // Step 3: Write a click event and inside track product clicks (call when a user clicks a product)
    function onProductClick(product) {
        Insider.eureka.track.productClickAfterSearch(campId, searchQuery, {
            pagination: { resultCount: 25 },
            product: {
                id: product.id,
                price: product.price,
                displayPosition: product.position,
                clickPosition: product.position,
            },
        });
    }

    // Step 4: Write a click event and inside track add-to-cart from search results (click must be sent first)
    function onAddToCartFromSearch(product) {
        // Send click event first
        Insider.eureka.track.productClickAfterSearch(campId, searchQuery, {
            pagination: { resultCount: 25 },
            product: {
                id: product.id,
                price: product.price,
                displayPosition: product.position,
            },
        });

        // Then send add-to-cart event
        Insider.eureka.track.productAddToCartAfterSearch(campId, searchQuery, {
            pagination: { resultCount: 25 },
            product: {
                id: product.id,
                price: product.price,
                displayPosition: product.position,
            },
        });
    }
});

When the user changes sorting, applies filters, or navigates to the next page, call both fetch.search() and track.search() again with the updated parameters.

Brand Listing Page

// Step 1: Listen for campaign ready event
Insider.eventManager.once('eureka:sdk:campaign:ready', function (event, data) {
    var campId = data.id;
    var brand = 'BrandName';
    var isControlGroup = Insider.eureka.isOnControlGroup(campId);
    var items, navigation;

    if (!isControlGroup) {
        // Variation: Fetch from Eureka and render
        Insider.eureka.fetch.productListing(campId, 'Brand', brand, {
            pagination: { from: 0, size: 25 },
            sorting: 'Relevancy'
        }).then(function (response) {
            items = response.data.items;
            navigation = response.data.navigation;
            renderBrandPage(items);
            trackPageView();
        });
    } else {
        // Control Group: Use your own data and UI
        trackPageView();
    }

    // Step 2: Track the page view (same for both groups, source = 'brand-listing')
    function trackPageView() {
        Insider.eureka.track.productListingView(campId, brand, {
            source: 'brand-listing',
            pagination: {
                resultCount: navigation.total,
                itemsPerPage: 25,
                totalPages: navigation.totalPageCount,
                currentPage: 1,
            },
            products: items.map(function (item, index) {
                return {
                    id: item.id,
                    price: item.price,
                    displayPosition: index + 1,
                };
            }),
        });
    }

    // Step 3: Write a click event and inside track product clicks (call when a user clicks a product, source = 'brand-listing')
    function onProductClick(product) {
        Insider.eureka.track.productClickAfterListing(campId, brand, {
            source: 'brand-listing',
            pagination: { resultCount: 50 },
            product: {
                id: product.id,
                price: product.price,
                displayPosition: product.position,
            },
        });
    }
});

When the user changes sorting, applies filters, or navigates to a different page, call both fetch.productListing() and track.productListingView() again with the updated parameters.

© 2026 Insider One. All rights reserved.
Privacy Policy