Full Installation of Clerk.io on JTL
Platforms:
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:
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:
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.
- 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.
Option | Meaning |
---|---|
API Key | Your API key received from Clerk |
Private Key | Your legacy private API key provided by Clerk. Required to restrict access to the data feed. |
Language | Language of the data feed |
customer group | Prices for the customer group |
Currency | Currency in the data feed |
Faceted design | Design of the facets |
Component | Option | Meaning |
---|---|---|
Generally | Use cookieless tracking | Tracking without the use of cookies |
Use shopping cart tracking? | Informs Clerk about changes to the shopping cart (general tracking of the shopping cart) | |
Anonymize emails | Email 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 Livesearch | Live search selector independent of Clerk | |
Clerk TemplateName Livesuche | Template 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 search | Number of search suggestions to be displayed | |
Number of category suggestions | Number of category suggestions to be displayed | |
Number of page suggestions | Number of page suggestions to be displayed | |
Position | Position 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 Search | Template for live search (Clerk Backend → Search → Content → Search → Insert into website → In the code the value from “data-template=”@WERT’”) | |
Position facets | Position of the facets | |
Show facets in URL | Show facets in URL | |
Clerk Facets Attribute | Comma-separated list of available facets (JTL features) | |
Clerk Facets Attributes Multiple Values | Comma-separated list of available facets with multiple values (JTL characteristics for OR filtering) |
Component | Option | Meaning |
---|---|---|
Data Feed | Cron processing | How the cron should be triggered to generate the data feed (explained in more detail in the section Possibilities of data feed creation) |
Batch size | Batch size of the feed’s products (explained in more detail in the batch size section) | |
Product page | Activate product page slider? | If deactivated, the slider on the product page will not be displayed in the frontend. |
Article selector slider | Selector for the article slider independent of Clerk | |
Clerk TemplateName Article | Names of the slider templates to be output. Multiple template names can be specified as a comma-separated list. | |
Slider Insert method | How to add the slider to the selector (After, Append, Before, Prepand, ReplaceWith) | |
Filter duplicates | Prevents subsequent sliders from containing products from previous sliders (default: Yes) | |
Shopping cart page | Activate shopping cart slider? | If deactivated, the slider on the shopping cart page will not be displayed in the frontend. |
Shopping cart selector slider | Selector for the shopping cart slider independent of Clerk | |
Clerk TemplateName Shopping Cart | Names of the slider templates to be output. Multiple template names can be specified as a comma-separated list. | |
Slider Insert method | How to add the slider to the selector (After, Append, Before, Prepand, ReplaceWith) | |
Filter duplicates | Prevents subsequent sliders from containing products from previous sliders (default: Yes) | |
Powerstep | Activate Powerstep Slider? | If deactivated, the slider in the power step is not played in the frontend. |
Powerstep Selector | Selector for the Powerstep Slider independent of Clerk | |
Clerk TemplateName Powerstep | Names of the slider templates to be output. Multiple template names can be specified as a comma-separated list. | |
Powerstep insertion method | How to add the slider to the selector (After, Append, Before, Prepand, ReplaceWith) | |
Filter duplicates | Prevents subsequent sliders from containing products from previous sliders (default: Yes) |
Component | Option | Meaning |
---|---|---|
Category page | Activate category page slider? | If deactivated, the slider on the category page will not be displayed in the frontend. |
Kategorie Selektor Slider | Selector for the category slider independent of Clerk | |
Clerk TemplateName Shopping Cart | Names of the slider templates to be output. Multiple template names can be specified as a comma-separated list. | |
Slider Insert method | How to add the slider to the selector (After, Append, Before, Prepand, ReplaceWith) | |
Filter duplicates | Prevents subsequent sliders from containing products from previous sliders (default: Yes) | |
Exit Intent | Enable Exit Intent Slider? | If deactivated, the exit intent is not displayed in the frontend. |
Clerk TemplateName Exit Intent | Template for the exit intent |