Write Custom Code (mktz_$ Reference)

Overview

When writing custom JavaScript for your experiments, you have access to a built-in DOM helper called mktz_$. It's a lightweight, jQuery-compatible library that ships directly inside the Explore tracking code - no additional dependencies required.

If you've worked with jQuery before, the API will feel familiar.

The character limit for code in the Variation code window and Global JS is 4,294,967,295 characters - more than enough for even the most complex custom implementations.

Getting Started

mktz_$ is available globally as soon as the Explore tracking code initializes. Wrap your code in a DOM-ready callback:

mktz_$(function () {
    // Your experiment code goes here
    mktz_$('.hero-banner').addClass('variant-b');
});

This ensures your code runs only after the DOM is ready.

Selecting Elements

Use mktz_$ just like $ in jQuery:

mktz_$('.buy-button')         // By class
mktz_$('#checkout-form')      // By ID
mktz_$('h1')                  // By tag name
mktz_$('[data-product-id]')   // By attribute

Supported pseudo-selectors: :visible, :hidden, :first, :last, :even, :odd, :eq(n), :gt(n), :lt(n), :contains(text), :has(selector), :input, :checkbox, :radio, :text, :password, :file, :submit, :reset, :button, :image, :selected, :parent, :header.

Core API Reference

Classes & Attributes

mktz_$('.cta').addClass('highlight');
mktz_$('.cta').removeClass('hidden');
mktz_$('.cta').toggleClass('active');

if (mktz_$('.banner').hasClass('promo')) { /* ... */ }

// Get or set an attribute
mktz_$('img').attr('alt', 'New description');
var src = mktz_$('img').attr('src');

// Read data attributes (auto-parsed to number/boolean/JSON when possible)
var productId = mktz_$('.card').data('product-id');

Content & Values

// Inner HTML
mktz_$('.promo-text').html('<strong>Limited offer!</strong>');

// Text content
mktz_$('.headline').text('New headline copy');

// Form field values
mktz_$('#quantity').val('2');
var currentVal = mktz_$('#quantity').val();

CSS & Visibility

// Set styles
mktz_$('.modal').css('display', 'block');
mktz_$('.modal').css({ backgroundColor: '#fff', padding: '20px' });

// Computed style getter
var color = mktz_$('.cta').css('color');

// Show / hide
mktz_$('.banner').show();
mktz_$('.banner').hide();

// Dimensions (numeric value → 'px' appended automatically)
mktz_$('.hero').width(800);
mktz_$('.hero').height(400);

DOM Traversal

// Find descendants
mktz_$('.product-card').find('.price');

// Walk up the tree
mktz_$('.buy-btn').closest('.product-card');
mktz_$('.buy-btn').parent();
mktz_$('.buy-btn').parents('.container');

// Siblings and neighbours
mktz_$('.active-tab').siblings();
mktz_$('.step-1').next();
mktz_$('.step-3').prev();

// Children
mktz_$('.nav').children('li');

DOM Manipulation

// Add content
mktz_$('.cart').append('<li>New item</li>');
mktz_$('.cart').prepend('<li>First item</li>');

// Insert relative to an element
mktz_$('<p>Note: Sale ends soon.</p>').insertAfter('.product-title');
mktz_$('<div class="badge">New</div>').insertBefore('.price');

// Remove elements
mktz_$('.old-banner').remove();
mktz_$('.cart').empty();  // Clears children but keeps the element

// Create elements with attributes in one call
mktz_$('<div>', {
    class: 'notification',
    text: 'Item added to cart!',
    css: { background: '#4CAF50', color: '#fff', padding: '10px' }
}).appendTo('body');

Events

// Attach a handler
mktz_$('.cta').on('click', function (e) {
    e.preventDefault();
    // handle click
});

// Event delegation (great for dynamically added elements)
mktz_$(document).on('click', '.product-card .buy', function () {
    var productId = mktz_$(this).closest('.product-card').data('id');
    // handle purchase
});

// Remove a handler
mktz_$('.cta').off('click');

// Fire once only
mktz_$('.cta').one('click', function () {
    // runs only the first time
});

// Trigger programmatically
mktz_$('#my-form').trigger('submit');

// Shorthand event methods
mktz_$('.input').focus();
mktz_$('.input').blur();
mktz_$('#my-form').submit();

Effects & Animation

mktz_$('.banner').fadeIn(300);
mktz_$('.banner').fadeOut(300, function () {
    // Callback after fade completes
    mktz_$(this).remove();
});

mktz_$('.accordion').slideDown(200);
mktz_$('.accordion').slideUp(200);
mktz_$('.accordion').slideToggle();

// Custom animation
mktz_$('.promo').animate({ opacity: 0.5, marginTop: '20px' }, 400);

AJAX

// GET request
mktz_$.get('/api/recommendations', function (data) {
    mktz_$('#rec-list').html(data);
});

// POST request
mktz_$.post('/cart/add', { productId: 42 })
    .done(function (res) {
        mktz_$('#cart-count').text(res.count);
    })
    .fail(function (xhr) {
        console.error('Request failed:', xhr.status);
    });

// Full AJAX with options
mktz_$.ajax({
    url: '/api/user',
    method: 'GET',
    dataType: 'json',
    success: function (user) { console.log(user); },
    error: function (xhr) { console.error(xhr.status); }
});

Static Utilities

// Iterate over arrays or objects
mktz_$.each(['a', 'b', 'c'], function (index, value) {
    console.log(index, value);
});

// Merge objects
var config = mktz_$.extend({}, defaults, customOptions);

// Filter an array
var visible = mktz_$.grep(items, function (el) {
    return mktz_$(el).is(':visible');
});

// Check if a value exists in an array
mktz_$.inArray('value', myArray); // returns index or -1

// Type checks
mktz_$.isArray(myVar);
mktz_$.isFunction(myVar);
mktz_$.isPlainObject(myVar);

// Serialize a form object for submission
var params = mktz_$.param({ color: 'red', size: 'L' });
// → "color=red&size=L"

Practical Examples

Example 1 - Modify a CTA button

mktz_$(function () {
    mktz_$('.cta-button')
        .text('Get 20% Off Now')
        .addClass('promo-style')
        .on('click', function () {
            mktz_$(this).fadeOut(150);
        });
});

Example 2 - Dynamic element injection

mktz_$(function () {
    mktz_$('<div>', {
        class: 'trust-badge',
        html: '✔ Free returns within 30 days',
        css: { color: '#2e7d32', fontSize: '14px', marginTop: '8px' }
    }).insertAfter('.product-price');
});

Example 3 - Event delegation for dynamic content

mktz_$(function () {
    mktz_$(document).on('click', '.add-to-cart', function () {
        var productId = mktz_$(this).closest('[data-product-id]').data('product-id');

        mktz_$.post('/api/cart', { id: productId })
            .done(function (res) {
                mktz_$('#cart-count').text(res.count);
            });
    });
});

Example 4 - Show/hide content based on user action

mktz_$(function () {
    mktz_$('.read-more-btn').on('click', function () {
        var $section = mktz_$(this).closest('.product-description');
        $section.find('.hidden-content').slideDown(200);
        mktz_$(this).hide();
    });
});

What's Not Supported

The following jQuery features are not available in mktz_$:

Tips & Best Practices

• Always wrap in DOM-ready. Use mktz_$(function() { ... }) to ensure elements exist before manipulating them.

• Chain where possible. Methods return the same collection: mktz_$('.banner').addClass('active').css('opacity', '1').fadeIn(200);

• Use event delegation for dynamic content. If elements are added after load (e.g. by a SPA or lazy-loading), attach events to a stable parent: mktz_$(document).on('click', '.dynamic-button', handler);

• Prefer CSS for animations. mktz_$ animations use a JavaScript loop; for smoother performance, apply CSS transitions and toggle classes instead: mktz_$('.element').addClass('is-visible');

• Namespace your events if you need to remove specific handlers later: mktz_$('.cta').on('click.myExperiment', handler); then mktz_$('.cta').off('click.myExperiment');

Need Help?

If you encounter a method not listed here, reach out to your Omniconvert contact - mktz_$ is actively extended based on real client usage.

---