Add CSS Classes Dynamically

Some site builder does not support adding css classes, if you are using one of such CMS builder, there's still a way for you to track custom events.

Step 1. Get the id attribute of your element

Almost every site builder will assign a unique id attribute to each element, if you can find the id attribute on site builder, then copy it.

If your site builder doesn't tell the id attribute, go to your page, right-click and inspect the element you want to track, which will show you the HTML code of that element. If there is the id="...." attribute, no matter the value, you can proceed to step 2.

Step 2. Add the JavaScript code to your page

Once you have the id attribute, you can add window.maxconv object to configure tracking script to add CSS classnames dynamically with JavaScript. Here's the code template that does that, replace INSERT YOUR ELEMENT ID with the id attribute you got from step 1, replace INSERT_YOUR_EVENT_NAME with your event name, and change INSERT-YOUR-DOMAIN to your tracking script domain:

<script>
    window.maxconv_conf = {
        id_class: [
            {
                element_id: 'INSERT YOUR ELEMENT ID',
                to_class: 'maxconv-event-name--INSERT_YOUR_EVENT_NAME'
            }
        ];
    };
</script>

<script defer src="//INSERT-YOUR-DOMAIN/js/t.js"></script>

tip

The window.maxconv_conf object must always be defined before importing universal tracking script.

The <script defer src="//INSERT-YOUR-DOMAIN/js/t.js"></script> script should only be imported once.

For example, Let's say you have a button with id button-731728cf, and when visitors click that button, you want to track it as quiz_engaged event, then you can add the follow code by editting header or footer setting in your site builder:

<script>
    window.maxconv_conf = {
        id_class: [
            {
                element_id: 'button-731728cf',
                to_class: 'maxconv-event-name--quiz_engaged'
            },
        ]
    };
</script>
<script defer src="//INSERT-YOUR-DOMAIN/js/t.js"></script>

tip

Most site builder have a option to edit header or footer, you can add above javascript code to it.

Want to track multiple elements?

If you want to track multiple elements accross your site, you can use the same code from step 2 on all of your pages. The only modification you will have to make, is list as many pairs of element_id and to_class as you want. For example, if you want to track three elements:

window.maxconv_conf = {
    id_class: [
        {
            element_id: 'id-1',
            to_class: 'maxconv-event-name=First+Goal'
        },
        {
            element_id: 'id-2',
            to_class: 'maxconv-event-name=Second+Goal'
        },
        {
            element_id: 'id-3',
            to_class: 'maxconv-event-name=Third+Goal'
        },
    ]
};