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.
Follow the steps below to setup a banner ad:
- Login into Klevu Merchant Center with your registered email id and password
- Choose the appropriate store from the drop down and click on the Smart Search -> Promotions tab.
- Click on the Banner Management tab.
- Add New Banner : Here provide the below details.
- Image URL: Klevu offers support for two types of image banners:
- Desktop-specific image banner
Recommended Desktop Image Dimensions: 1100px X 265px
- Mobile-specific image banner
Recommended Mobile Image Dimensions: 375px X 115px
Develop device specific image(s);upload it to your server and provide desktop or mobile banner image URLs.
- Desktop-specific image banner
- Banner Name: Provide a friendly name to the banner (i.e Christmas sale). Check the "Enable Banner" box.
- Target URL: Provide URL of the page where customers should be taken when they click on the banner.
- 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.
- 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
- Quick search: Banner will be displayed on the quick search UI. Select the position of the banner in the quick search.
- 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.
- Click on the Save and Publish button.
- Image URL: Klevu offers support for two types of image banners:
If mobile image is not provided, then desktop image banner will be displayed on mobile devices.
In Magento, if you are using the 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 ():
<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.