Search Collector

Introduction

To gather the required tracking data the open-source search-collector search-collector tracking library is used. The search-collector library scans the HTML DOM to gather search-related data and user events.

To integrate the tracking, only a couple of HTML attributes have to be attached to your page. The remaining search-collector implementation is done by searchhub.

Rule of Thumb

If you are not sure which HTML element exactly to put the data-attribute on, using the elements you use for specific user events is a good rule of thumb.

E.g. if your click listener for the search button is attached to an HTML button element, you should add the corresponding collector HTML attribute to that button element.

Script

Include your searchhub tracking snippet on every page in your shop like:

<script defer src="https://c.searchhub.io/{YOUR_ID}"></script>

Replace the {YOUR_ID} with the ID searchhub provided for you. The script will automatically load and execute.

Integration

Search button

The searchbutton is used to trigger a search.

Searchbutton Tracking

data-attributes
Name Value
data-track-id searchButton

Example

<button type="..." data-track-id="searchButton" />

Suggest (search terms)

If search terms are proposed to the shop user while typing, each element containing keywords should be annotated with the data-track-id="suggestSearchTerm" attribute.

Suggest Tracking

data-attributes
Name Value
data-track-id suggestSearchTerm

Example

...
<div data-track-id="suggestSearchTerm">Jeans</div>
<div data-track-id="suggestSearchTerm">Jeans Jackets</div>
...

Result Count

The result count is the number of products found for the current search (not the number of products displayed on the current page). This is usually a somewhat higher number like hundreds or even thousands.

Result Count Tracking

data-attributes
Name Value
data-track-id resultCountContainer

Example

<div>
    Your search for jeans produced
    <span data-track-id="resultCountContainer">9</span> results
</div>

Product

A product representation for the current search result. The attributes here include a priceContainer in addition, the tracking script will automatically strip the non-numeric characters. The value for the data-product-id attribute has to be an ID that uniquely identifies the product. In B2B exist more edge cases. E.g. a certain SKU of the product family is used to represent the product group or family. In such cases, it is important that the same IDs are used on the product listing page (PDP) and on the product detail page (PLP).

Product Tracking

data-attributes
Name Value
data-track-id product
data-product-id {sku}
data-track-id priceContainer

Example

<a href="..." data-track-id="product" data-product-id="abc" />
    ...
    <div data-track-id="priceContainer">39,99 € per unit</div>
    ...
</a>

Add to cart (PDP)

On the product detail page the Add to cart button has to be attributed with the data-track-id and data-product-id attributes. An additional element containing the amount put into the basket can be annotated with the data-track-id attribute, in most cases this is a common div, select or input element.

Add to basket PDP Tracking

data-attributes
Name Value
data-track-id addToCartPDP
data-product-id {sku}
data-track-id addToBasketQuantity

Example

<select data-track-id="addToBasketQuantity">...</select>
<button data-track-id="addToCartPDP" data-product-id="abc"></button>

Associated Product

If on product detail page some associated products (recommendations, similar products and so on) are proposed to the shop user, these products should be annotated almost the same way as products are annotated on the product listing page. The only difference is the associatedProduct value of the data-track-id attribute.

Associated Product Tracking

data-attributes
Name Value
data-track-id associatedProduct
data-product-id {sku}
data-track-id priceContainer

Example

<a href="..." data-track-id="associatedProduct" data-product-id="abc" />
    ...
    <div data-track-id="priceContainer">39,99 € per unit</div>
    ...
</a>

Checkout

Checkout tracking is implemented on the very last summary page in your checkout process. All products have to be attributed similar to the product listing page in addition to the "Commit and Buy" button which will finalize the order.

Checkout Tracking

data-attributes
Name Value
data-track-id checkoutProduct
data-product-id {sku}
data-track-id priceContainer
data-track-id checkoutQuantity

Example

<div class="row sCard mb-2" data-track-id="checkoutProduct" data-product-id="1234">
    ...
    <div data-track-id="checkoutQuantity">2</div>
    ...
    <div data-track-id="priceContainer">19.99 €</div>
    ...
</div>