Add a tracking block to your website using Malomo.js

Malomo.js is a powerful tool that allows you to easily add a tracking block to a website you host and manage. This gives you complete control over the content and design of a page while being able to provide your customers with the order tracking information they need.

Please note that in order to use Malomo.js you should have a basic understanding of web development tools like HTML, CSS and JavaScript.

Add the Malomo tracking block to your website

Adding Malomo.js on your website

To get started add the following script tag to the head section of a page you want to render a Malomo tracking block on. We recommend only adding Malomo.js to the pages that are using it.

<script src="https://js.gomalomo.com/v2/" type="application/javascript"></script>

For more information and restrictions on including Malomo.js on your site please see Integrate with Malomo.js.

Adding the Malomo tracking block

To add a tracking block to your website copy and paste the following code inside your <body> tag just before </body>.

<script type="application/javascript">
(function() {
  //
  // Start config
  //
   
  let apiKey = '';

  let mountPoint = '';
   
  //
  // End config
  //

  let malomo = Malomo(apiKey);
   
  let elements = malomo.elements();
   
  malomo.fetchOrder()
    .then((order) => {
      return elements
        .create(
          'shipmentTracker',
          {
            order: order
          }
        )
        .mount(mountPoint);
    })
    .catch(() => {
      return elements
        .create(
          'orderLookup',
          {
            callback: (resp) => {
              let url = new URL(document.URL);
           
              url.searchParams.append('_m_id', resp.body['id']);
           
              window.location.href = url;
            }
          }
        )
        .mount(mountPoint);
    });
})();
</script>

You need to supply the code above with two pieces of information.

  1. apiKey - your publishable Malomo API key. Publishable keys are prefixed with pk_. You can create a publishable API key in your Malomo developer dashboard.

  2. mountPoint - the HTML element the tracking block will be rendered within. You can specify the element using CSS selectors. We recommend using an ID selector.

The code above will render a tracking block complete with order lookup.

How does this work?

The code above works by attempting to retrieve a Malomo order using the malomo.fetchOrder() function. If an order was found it will render a tracking block. If the order could not be found an order lookup form will be rendered instead.

What next?

At this point all that is left is for you to style the Malomo tracking block. You have complete control over the look and feel of the tracking block using CSS. Please check out our Malomo.js Reference for additional details on using Malomo.js and how you can further customize a tracking block.

PreviousIntegrate with Malomo.jsNextMalomo.js Reference

Last updated