Showing Promotional Banners in Search

Banner Ad is used for promotions in quick search (search-as-you-type) and on search results page. With this feature, you can associate banners with specific keywords and show them when these keywords are searched.

Banner example

Follow the steps below to setup a banner ad:

  1. For Magento and other platforms:
    Login into Klevu Merchant Center (https://box.klevu.com) with your registered email id and password
    For Shopify:
    Login into Shopify Admin → Apps → Klevu Search
  2. Choose the appropriate store from the drop down and click on the Promotions tab.
  3. Click on the Banner Management tab.
  4. Image URL: Develop a banner image with the recommended size; upload it to your server and provide the public URL of the banner image.
    • Recommended size:
      • Width: [Container of the search results page]
      • Height: 265px

      Banner Ad size

  5. Banner Name: Provide a friendly name to the banner (i.e Christmas sale). Check “Enable Banner” box.
  6. Target URL: Provide URL of the page where customers should be taken when they click on the banner.
  7. Ad Duration: Select “From” and “To” dates for the duration when the banner should be displayed. The “To” date parameter is optional. If the “To” date parameter is not selected, the banner will be displayed all the time.
  8. Show this banner on: select at least one of the options,
    • Quick search: Banner will be displayed on the quick search UI. Select the position of the banner in the quick search.
      • Top: Banner will be displayed at the top of quick search UI.
      • Bottom: Banner will be displayed at the bottom of quick search UI.
    • Search results page: Banner will be displayed on the search results page
  9. Show this banner for: select one of the options,
    • Any search term: Banner will be displayed as default for any search term.
    • Specific search terms: Here, you can associate search terms with the banner. It will be displayed only for the given search terms. For more than one search term, use comma (,) as a separator.
  10. Click on the Save and Publish button.

If you are using preserve theme layout option for the search landing page then please follow the additional two steps to display the banner there.

  1. Add the following div element where you want to show the banner ads on the page:
    <div id="klevuBannerAdLanding" class="kuBannerAd"></div>

    You may have to update the CSS according to your site’s structure.

  2. Add the following script at the end of only the landing page, i.e., just above the closing body tag (</body>):
    <script type="text/javascript">
      var klevu_bannerTrials = 0;
      var klevu_bannersTimer = setInterval(function () {
        if( typeof klevu_banner !== 'undefined' && typeof klevu_commons !== 'undefined' ){
          klevu_commons.showBannerAdForGivenTerm(<search-term> , 'klp' );
          clearInterval(klevu_bannersTimer);    
        }
        if (klevu_bannerTrials >= 10) {
          clearInterval(klevu_bannersTimer);
        }
        klevu_bannerTrials++;
      }, 500);
    </script>
    

    Please note, you need to replace <search-term> with the actual searched term.