Landing Page Builder (beta)

Klevu Landing Page Builder is a beta product. Whilst every effort has been taken to make this integration a smooth process, there may be some issues here or there so please do let us know if you find anything unusual.

These instructions assume you have already created a Klevu Landing Page using our UI via the Klevu Merchant Centre. This is a generic platform-agnostic approach. If a link is available below for your specific framework, please follow that link instead:

Add files to your Website

The ZIP file you have downloaded contains three files:

  • scripts.js: A JavaScript file, containing the functionality required for the Landing Page.
  • styles.css: A CSS file, containing some basic CSS for styling your Landing Page.
  • templates.tpl: A Micro-Templates file, containing the HTML for rendering your Landing Page.

Note that by default, templates.tpl is just for reference. A base64 encoded version of the HTML found in templates.tpl is already included within scripts.js. If you want to override any of the micro-templates, please see the section at the bottom of this page.

These files must be included on an appropriate page of your website in order for your customers to see the Landing Page you have created.

The process of integrating a Landing Page with your website varies depending on your framework, so the following is a generic HTML script with descriptive comments that can be adapted to any framework.

Power-up Klevu on every page

For performance reasons the analytics calls to Klevu which need to be associated to a product click or an add to cart request do not fire until you reach the target page. For this reason, the Klevu Library must be included on every page it is possible to exit the landing page towards via a click.

In the below example we recommend you include the Klevu power-up on every page, so no matter what functionality you add to your landing page, any tracking events will still be fired.

The Landing Page specific JS, HTML and CSS however should only be included on the page you wish to display that particular content.

<!DOCTYPE html>
<html>
<head>
    <title>Klevu JS Library - Page Builder Example</title>

    <!-- For EVERY PAGE of your website, include the following initialisation scripts: -->
    <script src="//js.klevu.com/klevu-js-v2/2.2/klevu.js"></script>
    <link rel="stylesheet" type="text/css" media="all" href="//js.klevu.com/klevu-js-v2/2.2/klevu.css">
    <script type="text/javascript">
        /**
         * Power-up Klevu library for your store.
         */
        klevu.interactive(function() {
            var options = {
                url : {
                    // replace with your own search endpoint
                    search: klevu.settings.url.protocol + '//eucs18v2.ksearchnet.com/cs/v2/search',
                    protocolFull: klevu.settings.url.protocol + "//"
                },
                localSettings: true,
                search : {
                    // replace with your own API Key
                    apiKey: "klevu-12345678901234567"
                },
                analytics: {
                    // replace with your own API Key
                    apiKey: "klevu-12345678901234567"
                }
            };

            klevu(options);
        });

        /**
         * Also power up Analytics to handle clicks
         * which exit away from the Page Builder on
         * to another page, eg. Cart or Product Page.
         */
        klevu.coreEvent.build({
            name: "analyticsPowerUp",
            fire: function () {
                if (
                    !klevu.getSetting(klevu.settings, "settings.localSettings", false) ||
                    !klevu.analytics.build
                ) {
                    return false;
                }
                return true;
            },
            maxCount: 500,
            delay: 30
        });
        klevu.coreEvent.attach("analyticsPowerUp", {
            name: "attachSendRequestEvent",
            fire: function () {
                klevu.analyticsUtil.base.sendAnalyticsEventsFromStorage(
                    klevu.analyticsUtil.base.storage.dictionary,
                    klevu.analyticsUtil.base.storage.term
                );

                klevu.analyticsUtil.base.sendAnalyticsEventsFromStorage(
                    klevu.analyticsUtil.base.storage.dictionary,
                    klevu.analyticsUtil.base.storage.click
                );

                klevu.analyticsUtil.base.sendAnalyticsEventsFromStorage(
                    klevu.analyticsUtil.base.storage.dictionary,
                    klevu.analyticsUtil.base.storage.categoryClick
                );
            }
        });
    </script>

    <!-- Include the CSS and JS from the ZIP file -->
    <link rel="stylesheet" href="/path/to/zip/styles.css">
    <script src="/path/to/zip/scripts.js"></script>
</head>
<body>
    <!-- Add a placeholder where the Page Builder content will be injected -->
    <div class="klevuLanding"></div>

    <!--
    Skip this if scripts.js already includes
    base64 encoded versions of your templates,
    otherwise include the Templates from the ZIP file.
    You can either copy+paste the HTML content directly,
    or you can use your programming language to include them.
    eg. with PHP <?php include('/path/to/zip/templates.tpl'); ?>
    -->
    <!-- ADD TEMPLATES HERE, USING YOUR PREFERRED APPROACH -->
</body>
</html>

Once the above has been populated on a page of your website, when you load that page you should see the Klevu Landing Page content being displayed.

Once again you can see an example of this on our Demo store:
https://jsv2-shopify-demo.ksearchmisc.com/pages/page-builder-example

Overriding Styles, Templates and JavaScript Logic (optional)

Should you wish to modify the CSS of the landing page, you should override using standard CSS approach rather than modifying the CSS included in the ZIP file. This will make future updates to your page easier.

Similarly for HTML or JavaScript modifications, you can override using the method below. The following is an example of an override to modify the ‘Quick View’ button and change how the ‘Add to Cart’ functionality works.

Add a new script section to your HTML file to the end of the HEAD, after the Klevu initialisation scripts and inclusion of your Page Builder scripts.js:

<script type="text/javascript">
    klevu.coreEvent.attach( "setRemoteConfigLandingPage123", {
        name : "page-specific-overrides-123",
        fire : function () {
        // update the template that renders the 'quick view' button
        // to pull from an element with ID 'idOfContainerWithNewHtml'
        klevu.search.landingPage123.getScope().template.setTemplate( klevu.dom.helpers.getHTML("#idOfContainerWithNewHtml") , "product-quick-view-landing" , true );

            // add to cart override (add an alert when add to cart clicked)
            if(!klevu.isUndefined(klevu.search.modules.addToCart)){
                klevu.search.modules.addToCart.base.sendAddToCartRequest = function(variantId, quantity){
                    // replace the alert() logic with any JavaScript functionality you would like to occur when a customer clicks on the add to cart button.
                    alert("Add to cart called!");
                };
            }
        }
    });
</script>

Once your Page Template is saved, your overrides will be active on your Page Builder Page.