Setup Clientside API

This page revolves around how to use JavaScript Snippets in order to track page views and events. You might wanna check first if we have a plugin for your website like wordpress. You can look at the following link to find out which plugins we currently are offering.

Integration Plugins and Guides

Read more

For the clientside page views to work, you first have to insert the following script tag into the <head>...</head> area of your website. The script tag contains a placeholder variable [WEBSITE_ID] that you will have to replace with the website id of your website on This will be explained right after the script tag.

Inert into head area
<script defer src="" data-website-uid="[WEBSITE_ID]"></script>

You can find your website id on when navigating Websites > Edit website > Left side. The website id can be copied by clicking on the icon on the right.

After this you need to also add the page view script right under the previous script tag. The code below shows the final result for sending a page view when a visitor enters the page.

Final code for page view
<script defer src="" data-website-uid="[WEBSITE_ID]"></script>
<script defer type="module">
		"Absolute": null,
		"ClientId": null

You want to know more about the optional parameters Absolute and ClientId? You can read about it in the link below.

You may find the optional parameter ClientId very useful for more accurate tracking.

Clientside Page View

Read more

In the special case of you using a SPA website, you will have to run the MDAL.pageView method every time a new URL history state is pushed or replaced. Down below we show what a common strategy would be to achieve this without editing any existing code by hooking into the methods itself.

JS hook to run pageView on every replace/push
const hook = (holder, funcName, callback) => {
    const func = holder[funcName];

    return (...args) => {
        callback.apply(null, args);
        return func.apply(holder, args);

const onNewState = () => {
		"Absolute": null,
		"ClientId": null

history.pushState = hook(history, "pushState", onNewState);
history.replaceState = hook(history, "replaceState", onNewState);

Sending events from the clientside requires the first script tag as seen here already. You only have to insert this once on the page in order for it to work.

Insert into head area
<script defer src="" data-website-uid="[WEBSITE_ID]"></script>

From that point on, you can use the following code snippet to send events. A common scenario might be that you want to track how many people are clicking on a specific download link. The HTML structure could look alot like the following snippet:

HTML structure
<a class="download-windows">
    Download Windows
<a class="download-mac">
    Download Mac

And here is the corresponding JavaScript needed to make the event sending work.


The code below first gets references to the html buttons used to download files for both Windows and Mac. After getting the references we define a common function/method that will take one parameter type to determine whether the Windows or Mac button was clicked. At last we are adding event listeners for both of the buttons by calling .addEventListener. We have to use .bind(null, "WINDOWS") in order to overwrite the arguments passed to the method when the click event is dispatched. You can read more about .bind here.

Send event with parameter
//Script has to run after dom content is loaded
const downloads = { };
//Get the node references to the buttons
downloads["windows"] = document.querySelector(".download-windows");
downloads["mac"] = document.querySelector(".download-mac");
//Method to send event to
const sendDownloadEvent = (type) => {
		"Name": "click-download",
		"ClientId": null, // optional: better tracking
		"Parameters": [{
			"Name": "operating-system",
			"Value": type,
		}] //list of parameters
//Bind click event handlers to html nodes
downloads["windows"].addEventListener("click", sendDownloadEvent.bind(null, "WINDOWS"));
downloads["mac"].addEventListener("click", sendDownloadEvent.bind(null, "MAC"));
There are alot of ways to achieve a similar result in JavaScript. This is just one simple example.

You want to know more about how many parameters are allowed? Or what the optional parameter ClientId is all about? You can see a more specific description on the page linked below.

Clientside Event

Read more