Website integration via JavaScript SDK

Overview of integrating Maestra via JavaScript pixel

General Description

JavaScript SDK allows your website to communicate with the Maestra framework asynchronously. It can be integrated just like Google Analytics without affecting page load speed and tracker operation.

To operate the JavaScript SDK, a single "maestra” object is used. API methods are called in the following format: maestra('methodName', methodParameters, ... )

Variable methodParameters can be either a string or an object. The expression above allows you to invoke methods anywhere on the page after the initialization code. If JavaScript SDK code hasn’t loaded yet, API calls will be queued and will start processing as soon as the script is initialized.

Main Script

The Main Script is responsible for initializing the tracking code. It must be deployed on every page and can be installed via tag management layers such as Google Tag Manager or directly into the website.

<script>
    maestra = window.maestra || function() { maestra.queue.push(arguments); };
    maestra.queue = maestra.queue || [];
    maestra('create', {
        endpointId: '<Endpoint ID>'
    });
</script>
<script src="https://api.maestra.io/scripts/v1/tracker.js" async></script>

maestra = window.maestra || function() { maestra.queue.push(arguments); };
maestra.queue = maestra.queue || [];
maestra('create', {
  endpointId: '<Endpoint ID>'
});

var script = document.createElement("script");
script.src = "https://api.maestra.io/scripts/v1/tracker.js";
document.getElementsByTagName('head')[0].appendChild(script);

Passing frontend events

After initializing the main script, website can send events with customizable payloads. Each API method has to be set up in the Maestra dashboard before it can be used. Once API method is created, it can be called on a website that has the main script installed.

Please see below examples of some frontend API calls.

maestra("async", {
  operation: "Website.AuthorizeCustomer",
  data: {
    customer: {
      ids: {
        websiteID: "<Customer website ID>"
      }
    }
  }
});

maestra("async", {
  operation: "Website.SetCart",
  data: {
    productList: [
      {
        product: {
          ids: {
            website: "<Product ID on the website>"
          }
        },
        count: "<Number of items>",
        pricePerItem: "<Price per item>"
      },
      {
        product: {
          ids: {
            website: "<Product ID on the website>"
          }
        },
        count: "<Number of items>",
        pricePerItem: "<Price per item>"
      }
    ]
  }
});

maestra("async", {
  operation: "Website.ViewProduct",
  data: {
    viewProduct: {
      product: {
        ids: {
          website: "<Product ID on the website>"
        }
      }
    }
  }
});

maestra("async", {
  operation: "Website.ViewCategory",
  data: {
    viewProductCategory: {
      productCategory: {
        ids: {
          website: "<Product category ID on the website>"
        }
      }
    }
  }
});

Updated about 1 year ago