Custom Ads

Searchcraft’s SDKSs provide a means for rendering custom ad containers alongside search results. These custom ad containers allow you to use your application’s existing ad implementation.

Define Your Ad Template

Specify the template that searchcraft should use to render your ad container.

main.ts

import type { CustomAdTemplate } from '@searchcraft/<your-sdk-framework>';

export const customAdTemplate: CustomAdTemplate = (data, { html }) => html`
  <div class="searchcarft-custom-ad" id="${data.adContainerId}">
    Custom ad for <strong>${data.searchTerm}</strong>
  </div>
`;

SearchcraftConfig Properties

Update your SearchcraftConfig object with the properties needed to tell it to render custom ads.

For in-depth look at all of the properties available, see the SearchcraftConfig reference.

const searchcraft = new Searchcraft({
  index: [process.env.SEARCH_INDEX_FROM_VEKTRON],
  readKey: process.env.READ_KEY_FROM_VEKTRON,
  endpointURL: process.env.ENPOINT_URL_FROM_VEKTRON,

  customAdConfig: {
    template: customAdTemplate,
    adContainerRenderedDebounceDelay: 1000,
    adStartQuantity: 1,
    adInterstitialInterval: 3,
    adInterstitialQuantity: 1,
    adEndQuantity: 1,
  }
})

Listen for Ad Events

It’s common that your application will need to make a call to your ad provider’s code when an ad container is rendered. There are several events available to do that.

const unsubscribeCallback = searchcraft.subscribe('ad_container_rendered', (event) => {
  // Make a call to your ad provider's code
});

// In your cleanup function, call unsubscribe:
unsubscribeCallback();

const unsubscribeCallback = searchcraft.subscribe('ad_container_viewed', (event) => {
  // Make a call to your ad provider's code
});

// In your cleanup function, call unsubscribe:
unsubscribeCallback();

For a complete listing of all events, see the Events Reference.