Full Installation of Clerk.io on JTL

See how to do an entire installation of Clerk.io on JTL in just under 10 minutes.

IMPORTANT: You should have installed the plugin (S360 CLerk) in your JTL backend under Plugins

This documentation will guide you through the following steps:

Adding a Store in my.clerk.io

Each Store in Clerk.io is an isolated environment with its own data, API keys and Dashboard. The first thing you will need to do when setting up your Clerk.io account, is to create your first Store:

How the store creation screen looks

After this, the Setup Guide will walk you through the rest of the setup.

Note that each time a store is created, then an email with public and private keys will be sent to the owner of the company account. This is used to create secure access between Clerk and JTL.

Installing the two tracking-scripts

With the S360 Clerk plugin, you can enable both visitor and order tracking scripts which will be injected to parts of the webshop:

  • The Visitor Tracking script, that initialises Clerk.io. This has to be injected inside of the header of the webshop.

  • The Order Tracking script that allows tracking of orders in realtime. This is usually installed on the order confirmation page.

You can enable them inside the JTL plugin under ALLGEMEIN section:

Inside the clerk plugin if you scroll a bit down

When both scripts are inserted, Clerk.io will been initialised.

Syncing your JTL Store with Clerk.io

To show results, Clerk.io must sync with the products, categories, sales, pages and customers from JTL in a generated data feed.

This is done by setting up a data feed that allows the data to be accessed regularly. This is further explained in this guide Creation of Data Feeds in JTL.

When the data feed has been generated and added to your Data sync settings under System Status in your my.clerk.io backend.

Adding Search and Recommendations

Frontend elements in Clerk.io consist of two parts:

  • A Design that controls the visual presentation of products. This can be changed to match any styling you want or you can use some of our standard design templates Template Design to use in Clerk.

  • Most often you will use 3 Designs: One for Instant Search, the Search page and Recommendations.

Example of a recommendation slider using our design editor

  • A Content with an attached embedcode that displays the products. Each content has a specific name in its embedcode which you want to add to the respective fields name Clerk TemplateName. This is used to communicate between your webshop and the respective clerk content.

The Setup Guide will walk you through where each element needs to be placed in most JTL setups.

At the end of your setup then the settings in the plugin should look like this. The following pictures are merely for demonstration purposes.

Credentials

OptionMeaning
API KeyYour API key received from Clerk
Private KeyYour legacy private API key provided by Clerk. Required to restrict access to the data feed.
LanguageLanguage of the data feed
customer groupPrices for the customer group
CurrencyCurrency in the data feed
Faceted designDesign of the facets

Tracking and Search settings

ComponentOptionMeaning
GenerallyUse cookieless trackingTracking without the use of cookies
Use shopping cart tracking?Informs Clerk about changes to the shopping cart (general tracking of the shopping cart)
Anonymize emailsEmail addresses are transmitted to Clerk anonymously (as a hash).
Live Suche (Header)Activate live search?If deactivated, the Clerk Live search will not be displayed in the frontend.
Selektor LivesearchLive search selector independent of Clerk
Clerk TemplateName LivesucheTemplate for the live search (Clerk Backend → Search → Content → Live search → Insert into website → In the code the value from “data-template=”@WERT’”)
Number of search suggestions in the live searchNumber of search suggestions to be displayed
Number of category suggestionsNumber of category suggestions to be displayed
Number of page suggestionsNumber of page suggestions to be displayed
PositionPosition of the live search result in relation to the selector
Search (results page)Activate results page?If deactivated, the Clerk results page will not be displayed in the frontend.
Clerk TemplateName SearchTemplate for live search (Clerk Backend → Search → Content → Search → Insert into website → In the code the value from “data-template=”@WERT’”)
Position facetsPosition of the facets
Show facets in URLShow facets in URL
Clerk Facets AttributeComma-separated list of available facets (JTL features)
Clerk Facets Attributes Multiple ValuesComma-separated list of available facets with multiple values ​​(JTL characteristics for OR filtering)

Data feed and Recommendation settings

ComponentOptionMeaning
Data FeedCron processingHow the cron should be triggered to generate the data feed (explained in more detail in the section Possibilities of data feed creation)
Batch sizeBatch size of the feed’s products (explained in more detail in the batch size section)
Product pageActivate product page slider?If deactivated, the slider on the product page will not be displayed in the frontend.
Article selector sliderSelector for the article slider independent of Clerk
Clerk TemplateName ArticleNames of the slider templates to be output. Multiple template names can be specified as a comma-separated list.
Slider Insert methodHow to add the slider to the selector (After, Append, Before, Prepand, ReplaceWith)
Filter duplicatesPrevents subsequent sliders from containing products from previous sliders (default: Yes)
Shopping cart pageActivate shopping cart slider?If deactivated, the slider on the shopping cart page will not be displayed in the frontend.
Shopping cart selector sliderSelector for the shopping cart slider independent of Clerk
Clerk TemplateName Shopping CartNames of the slider templates to be output. Multiple template names can be specified as a comma-separated list.
Slider Insert methodHow to add the slider to the selector (After, Append, Before, Prepand, ReplaceWith)
Filter duplicatesPrevents subsequent sliders from containing products from previous sliders (default: Yes)
PowerstepActivate Powerstep Slider?If deactivated, the slider in the power step is not played in the frontend.
Powerstep SelectorSelector for the Powerstep Slider independent of Clerk
Clerk TemplateName PowerstepNames of the slider templates to be output. Multiple template names can be specified as a comma-separated list.
Powerstep insertion methodHow to add the slider to the selector (After, Append, Before, Prepand, ReplaceWith)
Filter duplicatesPrevents subsequent sliders from containing products from previous sliders (default: Yes)

Category and exit intent settings

ComponentOptionMeaning
Category pageActivate category page slider?If deactivated, the slider on the category page will not be displayed in the frontend.
Kategorie Selektor SliderSelector for the category slider independent of Clerk
Clerk TemplateName Shopping CartNames of the slider templates to be output. Multiple template names can be specified as a comma-separated list.
Slider Insert methodHow to add the slider to the selector (After, Append, Before, Prepand, ReplaceWith)
Filter duplicatesPrevents subsequent sliders from containing products from previous sliders (default: Yes)
Exit IntentEnable Exit Intent Slider?If deactivated, the exit intent is not displayed in the frontend.
Clerk TemplateName Exit IntentTemplate for the exit intent