Track Method

The track() function

To track custom events in Waymore you need to add the Waymore custom event code in the project with the help of waymore.track(), function, where you need to track the custom events details.

Add the below custom event code in the function with event name, track details, and event info.

waymore.track(eventName<string>, trackData<object>, eventInfo<object>)

Params Details

Parameter	Data type	Required	Description
eventName	String	true	The name of the event that you are tracking. (i.e. Custom event name). Validation: Max 30 characters
trackData	Object	true	An object of any properties you want to track the data with the custom event
eventInfo	Object	false	An object of properties used to better define the custom event. Those properties can also be changed in Waymore GUI via the Schemas submenu.

Optional event info object properties:

Parameters	Data type	Required	Description	Validaiton
type	String	false	Accepts values: active/ passive active - Use this value for active events (with user interaction) passive - Use this value for passive events (without user interaction)	active/ passive
displayName	String	false	How the event will be displayed on the Waymore platform. This can change through Waymore Web interface using schemas.	Max 30 chars.
description	String	false	How the event description will be displayed on the Waymore platform. This can change through Waymore Web interface using schemas.	Max 100 chars.
naturalLanguage	String	false	How this event will be displayed on the Segmentation system of the Waymore platform. This can change through Waymore Web interface using schemas.	Max 100 chars.

waymore.track("eventName", trackData, eventInfo);
                  (or)
window.waymore.track("eventName", trackData, eventInfo);

📘
If you are working with direct JavaScript / HTML, we can ignore window keyword. But If you are working with any Frontend Framework / Library, use window keyword.
Example: window.waymore.track("eventName", trackData, eventInfo)

Example:
Sample custom event for a sign up form submission on an a web platform:

waymore.track("signup-form", {
  email: "[email protected]",
  plan: "Premium",
  cost: "999.00"
}, { 
  type: "active", 
  displayName: "Signed Up",
  description: "User signed up on platform", 
  naturalLanguage: "has signed up on platform"
});

Reduced version of the previous example:

waymore.track("signup-form", {
  email: "[email protected]",
  plan: "Premium",
  cost: "999.00"
});

Code Example:
The below code is a HTML project. In that we have added latest waymore.js script. In that HTML project, there was a button, if user clicks that button, we need to track user signup details. In that button function onclick, we are calling our waymore.track() method with custom event name, track data and event info (if required).

<!DOCTYPE html>
<html lang="">

<head>
    <!-- Waymore web service script start -->
    <script type="module">
      !function (e) {
            let t=document,a=window,o=t.createElement("link"),s=t.createElement("script"),r=t.body,i=t.head;
            o.type="text/css";o.rel="stylesheet";o.href="https://cdn0.routee.net/sdk/dist/latest/waymore.min.css";
            i.appendChild(o);s.src="https://cdn0.routee.net/sdk/dist/latest/waymore.min.js";i.appendChild(s);let p;(p = a).addEventListener("load",()=>{
                if("routee"in p)e(p);else{let tnc=0,iId=a.setInterval(()=>{("routee"in p||tnc>20)&&(clearInterval(iId),e(p)),tnc++},500)}
            });                
        }(function (r) {
            r.routee.initialize({
                routeeToken: "$UUID_HERE",  // Add your routee token
            });
        });
    </script>
    <!-- Waymore web service script stop -->
</head>

<body>
    <button id="custom_event_button">Testing custom events</button>
    <script>
        document.getElementById("custom_event_button")?.addEventListener('click', function () {
            waymore.track("signup-form", {
                email: "[email protected]",
                plan: "Premium",
                cost: "999.00"
            });
        });
    </script>
</body>

</html>

Updated 8 months ago

The track() function

📘If you are working with direct JavaScript / HTML, we can ignore window keyword. But If you are working with any Frontend Framework / Library, use window keyword.

📘
If you are working with direct JavaScript / HTML, we can ignore window keyword. But If you are working with any Frontend Framework / Library, use window keyword.