Writing Custom Code in Omniconvert Explore

Article sections

    Overview

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

    If you’ve worked with jQuery before, you’ll feel right at home. The API is intentionally familiar, so you can write clean, readable experiment code without worrying about loading external libraries.

    Do not rely on window.$ or window.jQuery being available on the page. Always use window.mktz_$ (or simply mktz_$) in your custom code.

    Getting Started

    mktz_$ is available globally as soon as the Omniconvert tracking code initializes. The recommended pattern is to 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, avoiding issues with elements not yet being available.

    Selecting Elements

    Use mktz_$ just like you would use $ in jQuery:

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

    In addition to standard CSS selectors, the following jQuery-style pseudo-selectors are also supported:

    :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_$. Use native browser APIs as alternatives:

    jQuery featureAlternative
    $.Deferred / $.whenNative Promise / Promise.all
    $.CallbacksNative EventTarget / custom events
    .promise() / animation queuesCSS transitions or native Promise
    .serializeArray()FormData API
    Third-party jQuery pluginsRewrite using mktz_$ methods or vanilla JS

    Tips & Best Practices

    Always wrap in DOM-ready. Use mktz_$(function() { ... }) to make sure elements exist before you try to manipulate them.

    Chain where possible. Methods return the same collection, so you can write concise, readable code:

    mktz_$('.banner').addClass('active').css('opacity', '1').fadeIn(200);

    Use event delegation for dynamic content. If elements are added to the page 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 just toggle classes:

    mktz_$('.element').addClass('is-visible'); // let CSS handle the transition

    Namespace your events. If you need to remove specific handlers later, use namespaces:

    mktz_$('.cta').on('click.myExperiment', handler);
mktz_$('.cta').off('click.myExperiment');

    Need Help?

    If you encounter a method that isn’t listed in this guide, reach out to your Omniconvert contact. The mktz_$ library is actively extended based on real usage from our clients.

    Was this post helpful?

    Related Articles