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.
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 sitesights.io. This will be explained right after the script tag.
<script defer src="https://app-static.sitesights.io/client.min.js?v=1" data-website-uid="[WEBSITE_ID]"></script>You can find your website id on sitesights.io 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.
<script defer src="https://app-static.sitesights.io/client.min.js?v=1" data-website-uid="[WEBSITE_ID]"></script>
<script defer type="module">
MDAL.pageView({
"Absolute": null,
"ClientId": null
});
</script>You want to know more about the optional parameters Absolute and ClientId? You can read about it in the link below.
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.
const hook = (holder, funcName, callback) => {
const func = holder[funcName];
return (...args) => {
callback.apply(null, args);
return func.apply(holder, args);
};
};
const onNewState = () => {
MDAL.pageView({
"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.
<script defer src="https://app-static.sitesights.io/client.min.js?v=1" 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:
<a class="download-windows">
Download Windows
</a>
<a class="download-mac">
Download Mac
</a>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.
//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 sitesights.io
const sendDownloadEvent = (type) => {
MDAL.event({
"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"));
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.