shopping24 documentation

s is for shopping

Integrate your s24widget

This page describes how to integration the shopping24 widget into your website.


None! (The widget used to be a jQuery plugin)

Web Performance

We care about your page’s web performance! The JavaScript file is small, minified and you can load it asynchronously (non-blocking).


The integration consists of a container and a script. Something like this:

<div class="s24widget" data-app-id="abcd1234" data-widget-id="987" data-search-term="Blue Jeans"></div>
<script src="" async></script>

Widget Container

First you need a container in your template in which the widget will be injected. It should have the class s24widget and two attributes data-app-id and data-widget-id.

<div class="s24widget" data-app-id="APP_ID" data-widget-id="WIDGET_ID"></div>


If you use our SEARCH-Widget, you can set you search term in a data-search-term attribute, like so:

<div class="s24widget" [...] data-search-term="MY SEARCH TERM"></div>


Your site has to be crawled priorly for the semantic widget to be able to identify the correct content. Please contact if your infrastructure denies such access, so we can provide you with the required IP addresses.

User ID

If you track a user ID, you can pass it to your widget container via a data-puid attribute. This could look like this:

<div class="s24widget" data-app-id="APP_ID" data-widget-id="WIDGET_ID" data-puid="USER_ID"></div>

AdBlocker Safety

We also offer you the option to integrate our widget AdBlocker safe. If you’re interested, please email us.

Custom A/B-Test

We also provide you with the possibility to track conversion of different variants. This could be interesting for you if you’d like to override the widget’s css or want to test different positions for the widget.

To identify your variants, please add the data-campaign attribute to your widget container. This could look like this:

<div class="s24widget" data-app-id="APP_ID" data-widget-id="WIDGET_ID" data-campaign="VARIANT-A"></div>

The s24 Widget easily integrates with Google Ad Manager services. Required code snippets are provided in your recomAD Widget dashboard. Conveniently use the html/js snippet as a creative integration in your preferred advertiser network. You can either use an existing delivery order or create a new one. A creative will be added to a line item.

Impressions and clicks will then be tracked automatically by Google Ad Manager. Viewable impressions must be configured manually, though.

Viewable impressions have to be created via a new line item in the delivery section of Google Ad Manager. Below you can find an example of a working viewable impressions configuration.

Impressions Configuration

Upon activation and delivery your dashboard overview should reflect total impressions measured against viewable impressions:

Viewable Impressions

To create a new line item with a viewable impression setting select ‘Ad Type -> Display’. Choose ‘Viewable Impressions’ and the desired quantity to measure your viewable impressions against a target. Otherwise no viewable impressions will be visible.