Smartweb

Get Started

Install Clerk on Smartweb following these easy steps

Get Clerk up and running on your Smartweb store in just a few steps. This guide walks you through connecting your store, installing tracking scripts, and syncing your data.

Connecting your store #

The first step of installing Clerk is connecting your store with your Clerk account.

After following these simple steps you will be able to see your Demo Store, which gives you a personal overview of how Clerk will work on your webshop, before setting up the rest of the system.

Add store #

After logging in to my.clerk.io, the first thing you need to do is add your store:

Write the Name and Domain of your webshop.
Choose SmartWeb as the Platform and choose your Currency.
Click Add Store.

Install visitor tracking #

In your Smartweb backend, go to Kontrolpanel > Design Manager > Rediger design.
Click Indsæt Javascript and paste the Clerk visitor tracking script. Then click Gem.
Ensure the script is inserted in the header under <head>.

Use INSERT_PUBLIC_API_KEY in the snippet below and replace it with your Public Key from my.clerk.io > Developers > API Keys.

<!-- Clerk.io Visitor Tracking (Smartweb) -->
<script type="text/javascript">
  (function(w,d){
    var e=d.createElement('script');e.type='text/javascript';e.async=true;
    e.src='https://cdn.clerk.io/clerk.js';
    var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
    w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){ w.__clerk_q.push(arguments) };
  })(window,document);

  Clerk('config', { key: 'INSERT_PUBLIC_API_KEY' });
</script>

Install order tracking #

In Smartweb, go to Kontrolpanel > Design Manager > Rediger filer > Modules > Checkout.
Open checkout-approved.tpl and add the sales tracking code at the bottom of the file.

<span
  class="clerk"
  data-api="log/sale"
  data-sale="{$page.orderId}"
  data-email="{$orderCustomer->Email}"
  data-customer="{$user->Id}"
  data-products='[{$products}]'>
</span>

Sync data #

In Smartweb, create a Prisindeks: click Opret Eget Prisindeks and name it “Clerk”.
Open the price index under Egne and insert the code blocks into the relevant templates.

Click Gem og gå tilbage and copy the Prisindeks URL.

Go to my.clerk.io > Data > Configuration and paste the Prisindeks URL. Select language if needed and click Start Sync.

Adding Clerk.js #

Click the Settings icon in the side menu of your store and then on Tracking Code.

Copy the Tracking Script

Insert this code in the file that generates all pages.
This is normally Kontrolpanel->Design Manager-> Rediger filer->index.tpl

Click Gem in the top of the page to save your changes.

Tracking orders #

In the Smartweb Admin go to Modules → Checkout → checkout-approved.tpl
Insert the following Sales-Tracking code in the bottom of the file, just before the closing </div> tag.

   {% raw %}{if !empty($page.orderId)}
    {entity controller=order assign=order id=$page.orderId userId=false statusId=false}

    {* Order Customer entity *}
    {entity controller=orderCustomer assign=orderCustomer orderId=$page.orderId}

    {* Order Lines collection *}
    {collection controller=orderLine assign=orderLines orderId=$page.orderId repay=false}

    {* Group order collection by class *}
    {$orderList = $orderLines->groupByClass()}

    {assign var=products value=''}

    {if $orderLines->getActualSize() gt 0}
        {if isset($orderList['CollectionOrderLine'])}
            {foreach $orderList.CollectionOrderLine as $orderLine}
                {$products = $products|cat:{ldelim}|cat:' "id": '|cat:$orderLine->ProductId|cat:', "quantity": '|cat:$orderLine->Amount|cat:', "price": '|cat:$orderLine->Price|cat:{rdelim}}

                {if !$orderLine@last}
                    {$products = $products|cat:', '}
                {/if}
            {/foreach}
        {/if}
    {/if}

    <span
        class="clerk"
        data-api="log/sale"
        data-sale="{$page.orderId}"
        data-email="{$orderCustomer->Email}"
        data-customer="{$user->Id}"
        data-products='[{$products}]'>
    </span>
   {/if}{% endraw %}

Click Gem to save your changes.

Multiple sites #

Clerk can easily be integrated in several Sites that share the same Smartweb / Hostedshop backend.

The easiest way to implement Clerk in multiple Sites in standard setups is by creating a separate Store for each Sites in my.clerk.io.

This way, you can separate products, sales, currencies etc. to keep track of each Site.

Start by creating your main Store and follow the Setup Guide to connect your Store to Clerk and choose the Recommendations and/or Search Results that you want to display on your webshop.
When you are done with the initial setup, go back to the start page of my.clerk.io (by clicking the Clerk logo in the upper left side corner of the side-menu) and then click "+ Add new store" the last option of the scroll down list (generally under you the existing store(s) and your company name):

On the Add New Store page, click Advanced to see all settings.

Fill in the details of your webshop, and choose your main Store from the Copy Elements From Existing Store dropdown, then click Add Store.

This will carry over the Elements and Designs from your main Store.

Now you can follow the Setup Guide again, to activate Clerk by clicking on Getting Started, to Sync Data for the new site.

In your Smartweb backend, switch to the Site you want to setup.
This will allow you to activate Clerk on the Site through the Setup Guide at my.clerk.io.
When Data Sync has finished, your Site is ready and using the same setup as your main Store.

Remember to translate Headlines, in Element-> Edit -> Select Design to the right language as well.

You can follow this process for all sites you want to use Clerk with.