Mida allows you to send events by using Javascript when specific actions take place on your website. An event is a data point representing an interaction between a user and your website.
With Javascript, you're able to set up your own criteria to determine what kind of action results in an event being sent to Mida.
You can add these under Global Settings -> Edit JS to ensure the event is tracked across all experiments in your project.
Thereafter, you can setup a goal as a Custom Event, allowing you to track this event as a goal in your experiment.
Below is the use case for the event:
Send an event to Mida to let you know when a user loads a specific page variant during an AB test.
window.mdq = window.mdq || []; window.mdq.push(["track", "ab_testing", { "userID": 123, "transactionID": 345, "custom": "Can be anything" }]);Send an event to Mida when users click on a specific button on your website.
window.mdq = window.mdq || []; window.mdq.push(["track", "subscribe"]);
Note: You can provide the name of the event as the first argument. Optionally you can add data to your event by providing an object as a second argument.
Below are some examples for tracking multiple elements into a single goal:
1. Track CTA clicks (by selector)
Use this when you want to track clicks on multiple specific buttons or links.
// Initialize Mida queue
window.mdq = window.mdq || [];
document.querySelectorAll('a, button').forEach(element => {
element.addEventListener('click', function(e) {
if (isTrackedCTA(this)) {
window.mdq.push(["track", "YOUR_GOAL_NAME"]);
console.log('Mida tracked: YOUR_GOAL_NAME');
}
});
});
function isTrackedCTA(element) {
const trackedSelectors = [
'YOUR_FIRST_SELECTOR',
'YOUR_SECOND_SELECTOR',
'YOUR_THIRD_SELECTOR'
];
return trackedSelectors.some(selector => element.matches(selector));
}
Replace:
YOUR_GOAL_NAME→ the goal name configured in MidaYOUR_FIRST_SELECTOR,YOUR_SECOND_SELECTOR, etc. → CSS selectors for the elements you want to track, e.g..signup-button,#hero-cta,[data-track="download"]. Add or remove entries as needed.
2. Track URL clicks (by destination)
Use this when you want to track clicks on links pointing to specific URLs (download links, outbound links, app store links, etc.).
// Initialize Mida queue
window.mdq = window.mdq || [];
document.querySelectorAll('a').forEach(link => {
link.addEventListener('click', function(e) {
const url = this.getAttribute('href');
if (url && isTrackedUrl(url)) {
window.mdq.push(["track", "YOUR_GOAL_NAME"]);
console.log('Mida tracked: YOUR_GOAL_NAME');
}
});
});
function isTrackedUrl(url) {
const trackedUrls = [
'YOUR_FIRST_URL',
'YOUR_SECOND_URL',
'YOUR_THIRD_URL'
];
return trackedUrls.some(trackedUrl => url.includes(trackedUrl));
}
Replace:
YOUR_GOAL_NAME→ the goal name configured in MidaYOUR_FIRST_URL,YOUR_SECOND_URL, etc. → the full or partial URLs you want to track. Add or remove entries as needed.
3. Track form submissions
Standard HTML forms
// Initialize Mida queue
window.mdq = window.mdq || [];
document.querySelectorAll('form').forEach(form => {
form.addEventListener('submit', function(e) {
if (isTrackedForm(this)) {
window.mdq.push(["track", "YOUR_GOAL_NAME"]);
console.log('Mida tracked: YOUR_GOAL_NAME');
}
});
});
function isTrackedForm(form) {
const trackedSelectors = [
'YOUR_FIRST_FORM_SELECTOR',
'YOUR_SECOND_FORM_SELECTOR',
'YOUR_THIRD_FORM_SELECTOR'
];
return trackedSelectors.some(selector => form.matches(selector));
}
Replace:
YOUR_GOAL_NAME→ the goal name configured in MidaYOUR_FIRST_FORM_SELECTOR,YOUR_SECOND_FORM_SELECTOR, etc. → CSS selectors for the forms you want to track, e.g.#contact-form,form.newsletter,[data-form="demo-request"]. Add or remove entries as needed.
Marketo forms
// Initialize Mida queue
window.mdq = window.mdq || [];
MktoForms2.whenReady(function(form) {
if (isTrackedMarketoForm(form.getId())) {
form.onSuccess(function() {
window.mdq.push(["track", "YOUR_GOAL_NAME"]);
console.log('Mida tracked: YOUR_GOAL_NAME');
return true;
});
}
});
function isTrackedMarketoForm(formId) {
const trackedFormIds = [
YOUR_FIRST_FORM_ID,
YOUR_SECOND_FORM_ID
];
return trackedFormIds.includes(formId);
}
Replace:
YOUR_GOAL_NAME→ the goal name configured in MidaYOUR_FIRST_FORM_ID,YOUR_SECOND_FORM_ID→ numeric Marketo form IDs (e.g.1032,1033). Add or remove as needed.
Note:
return true(or omitting it) → Marketo follows its default redirect to the thank-you page.return false→ user stays on the current page (use this if you're handling the post-submit experience yourself).
Alternatively, you can also add it as a HTML attributes mida-event:
<button class="btn" mida-event="click-cta">Create a free account</button>
Whenever, someone clicked on the CTA button it will trigger an event with the name "click-cta".