How to delay code from executing until Marketo form render has fully executed?

[dkonig]

I have a situation where we are executing some code on pages that have Marketo forms. This particular piece of code handles a few things. One it takes care of multiple Marketo forms on the same page but it also pushes data, we've designated in our CMS, to the dataLayer along with the form render on a successful submission of the form. Now, this code, which is being executed through Google Tag Manager, currently uses an element visibility trigger. It looks for the mktForm class. When that class is present the code executes. The problem is that this code may execute before we're done retrieving the Marketo form and fully rendering it. This ends up popping an error message. What I am thinking would solve this issue is instead of triggering the code with a element visibility trigger it would be best to wait until the form is fully rendered. This probably needs some JS(or maybe not) to see if this 'fully rendered' condition exists but I not sure how to do this. Any help would be greatly appreciated.

[SanfordWhiteman · Accepted solution]

MktoForms2.whenReady fires when the form is first interactive (tons and tons of past posts illustrating usage).

[dkonig]

Accepted the answer a bit quickly. Did some searching and couldn't find out how to implement this with Google Tag Manager. The way I have the tag set up now is it uses a element visibility trigger when I need to be able to trigger on .whenReady. My thoughts would be to integrate .whenReady into the tag itself after the tag is triggered with the element visibility trigger. Is that the route to go or can you point me in the direction of someone that has implemented this in Google Tag Manager?

[SanfordWhiteman]

Why would you trigger on element visibility, when it isn’t necessary for the <form> to be (yet) visible to add the event listener?

[dkonig]

Honestly, I don't know. I think when we initially set up the tag and trigger I was looking for a way to fire the tag. The element visibility(mrkForm class) seemed like a way to do it but it doesn't mean the form is ready when that class is on the page. How would you add the event listener as a trigger or do I need to add an event listener tag that fires on page load and then set the 'form binding' tag to execute once this listener executes?

Maybe the ''form binding' tag code would help understand this better.

 <script>
   var resizeCallback = function () {
        if (typeof resizeMarketoHero === 'function') {
            resizeMarketoHero();
        }
    };
    if (typeof MktoForms2 === 'undefined') {
        jQuery('form[data-form-id]').children().toggle();
        resizeCallback();
    }
    else {
        jQuery('form[id^="mktoForm_"]').each(function (index, elem) {
            var dataLayerKey = 'dataLayer';
            var $elem = jQuery(elem);
            var formId = $elem.data('form-id');
            var postSubmitId = $elem.data('post-submit-id');
            var loadLocation = $elem.data('load-location');
            var appId = $elem.data('app-id');
            var analyticEvent = $elem.data('analytic-event');
            var analyticFormType = $elem.data('analytic-form-type');
            var analyticLocationOnPage = $elem.data('analytic-location-on-page');
            var analyticLocationOnSite = $elem.data('analytic-location-on-site');
            window[dataLayerKey] = window[dataLayerKey] || [];
            var callback = function (form) {
                if (form !== null) {
                    resizeCallback();
                    
                    form.onSuccess(function (values, redirectUrl) {
                        if (analyticEvent) {
                            window[dataLayerKey].push({
                                'event': analyticEvent,
                                'form_type': analyticFormType,
                                'location_on_page': analyticLocationOnPage,
                                'location_on_site': analyticLocationOnSite
                            });
                        }
                        if (postSubmitId) {
                            $elem.hide();
                            jQuery('#' + postSubmitId).show();
                        }
                        resizeCallback();
                        //not sure about this... it always seems to return a redirectUrl?
                        return false;
                    });
                }
            };
            MktoForms2.loadForm(loadLocation, appId, formId, callback);
        });
    } 
</script>

[SanfordWhiteman]

You can add a listener that waits for MktoForms2 to be present in the page. Then any additional event listeners like onSuccess are safe to add inside that listener.