Logging Goals and Events with JavaScript

Note: If you haven't read An intro to Goals in Triggerbee, we suggest you do that first. This article is written for developers, and only covers JavaScript methods of logging Goals.

As a developer, you have complete freedom when it comes to keeping track of important events contributing towards your online success.

Events

Page views: mtr.log()

This is the default event, used for logging page views. The method accepts a URL and the TITLE of the page.

Examples
mtr.log("URL","TITLE");
mtr.log("/services");
mtr.log("/services", "Services");

Events: mtr.event()

These events should be used to log small interaction events, like clicking on an image, swiping, adding products to cart etc. The method accepts an optional argument declaring the event type also, such as "scroll" and "shopping cart".  Events appear below the URL of the previously logged pageview.

Examples
mtr.event("Filled out form field");
mtr.event("Clicked on button");
mtr.event("50%", "scroll");

Note: Events do not support filtering or segmentation (for the time being). They are only useful for inspecting sessions in the visits feed.

Goals: mtr.goal()

These logs goals in Triggerbee. A goal is an important event that can be used to trigger automation events. Achieved goals are added to the contact, and can also be added to the subscriber in the email software and CRM. The method accepts the name of the goal and the revenue.

Examples
mtr.goal("Submitted a form"); 
mtr.goal("Added to cart"); 
mtr.goal("Completed Purchase", 310); // 310 is the revenue
Logging a goal on page load with some logic
if (window.addEventListener) {
  window.addEventListener('load', (event) => {
    if(window.location.pathname.endsWith('success-invoice-payment/') 
          && (getCookie("Is Premium member")==true))
    {
         mtr.goal('Successful payment from premium member'); 
    }
 });
}

Scripting Guidelines

AfterTriggerbeeReady

The above events can only be used  after the entire Triggerbee tracking script has loaded making the mtr-object available. Below is an example script that utilizes the afterTriggerbeeReady function.

afterTriggerbeeReady(function () {
  // variable exists, do what you want
  // for example call mtr.goal("Purchase complete!", "995");
});

function afterTriggerbeeReady(callback) {
 var maxAttempts = 10;
 var counter = 0;
 checkIsInitialized();

 function checkIsInitialized() {
   if (typeof (window.mtr) !== "undefined") {
     callback();
   } else {
     if (counter < maxAttempts) {
       setTimeout(function () {
         counter++;
         checkIsInitialized();
       }, 250);
     }
   }
 }
}<br>

BeforeTriggerbeeReady

If you want to run some code before the Triggerbee script has finished loading, you can use the beforeTriggerbeeReady function, like this:
document.addEventListener('beforeTriggerbeeReady', function() { 
    // Do something before Triggerbee is initialized
}

Namespaces

Sometimes you might want to customize the logging using the mtr_custom object in a namespace of your own. Then the Triggerbee script can't read those customizations. To avoid this use the following trick that makes sure that the mtr_custom object is accessible in the global space accessed the Triggerbee mtr-logger:

window.mtr_custom = mtr_custom;

Goal Callback

If you want to wait for the callback of you goal, use this function.

mtr.goal('Callback goal', null, function() {
    //your code
});	
Did this answer your question? Thanks for the feedback! Please reach out to [email protected] if there's anything you'd like to add. There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us