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.

Note

Our tracking script is capable of reading javascript objects to obtain the necessary data. To find out more about tracking customizations, just contact us directly or look for a hint in the documentation.

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 (required)

product

data-product-id

{mainSKU}

data-track-id

priceContainer

Note

You can omit the data-product-id and data-track-id=”priceContainer” attributes if you have a javascript object that contains the required information. E.g. the dataLayer object. Please contact us if you want to rely on js data.

Example

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

Zero Results Container

The zero results container is the container that contains the text that is displayed when no products are found for the current search.

data-attributes

Name

Value

data-track-id

zeroResultsContainer

Example

<div data-track-id="zeroResultsContainer">
    Sorry, no products could be found for your search "search phrase".
</div>

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 (required)

addToCartPDP

data-product-id

{mainSKU}

data-track-id

addToBasketQuantity

Note

You can omit the data-product-id and data-track-id=”addToBasketQuantity” attributes if you have a javascript object that contains the required information. E.g. the dataLayer object. Please contact us if you want to rely on js data.

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 (required)

associatedProduct

data-product-id

{mainSKU}

data-track-id

priceContainer

Note

You can omit the data-product-id and data-track-id=”priceContainer” attributes if you have a javascript object that contains the required information. E.g. the dataLayer object. Please contact us if you want to rely on js data.

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 (required)

checkoutProduct

data-product-id

{mainSKU}

data-track-id

priceContainer

data-track-id

checkoutQuantity

Note

You can omit the data-product-id, data-track-id=”priceContainer” and data-track-id=”checkoutQuantity” attributes if you have a javascript object that contains the required information. E.g. the dataLayer object. Please contact us if you want to rely on js data.

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>