Lazily load marketo forms without additional libraries

MarketoLazyLoader.js

// Include this at some point in your wordpress install. It's pretty helpful!
function dynamicScriptInserter(scriptSource, args) {
	let script = document.createElement('script');
	script.src = scriptSource;
	Object.keys(args).forEach(key => {
		script.setAttribute(key, args[key]);
	})
	document.getElementsByTagName('head')[0].appendChild(script);
}

/**
 * If a marketo form is on screen (noted by a form starting with id="mktoForm_") injects marketo and loads instantly
 * Otherwise, waits until the first scroll event to inject the forms2 library and then calls loadFrom with the given ID
 */
window.mktoLazyLoader = (function () {
    'use strict';

    var MarketoLazyLoader = function() {
        this.myCompanyId = "YOUR_COMPANY_ID";
        this.marketoInjected = false;
        this.loadOnScroll = [];
        this.waitInterval = null;
        this.readyToHook = true;

        if(typeof MktoForms2 !== 'undefined') {
            // marketo is already initialized, dont do anything
            this.readyToHook = false;
        }
    }

    MarketoLazyLoader.prototype = {
        init: function() {
            let forms = document.querySelectorAll('form');
            for(let i = 0; i < forms.length; i++) {
                if(forms[i].getAttribute('id') && forms[i].getAttribute('id').includes('mktoForm_')) {
                    let coords = forms[i].getBoundingClientRect();
                    let formId = forms[i].getAttribute('id').replace('mktoForm_', '');
                    
                    if(this.isInView(coords)) {
                        if(this.marketoInjected === false) {
                            this.injectForms2();
                        }
                        this.loadForm(formId);
                    } else {
                        this.loadOnScroll.push(formId); 
                    }
                }
            }
        },
        isInView: function(coords) {
            return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight));
        },
        injectForms2: function() {
            dynamicScriptInserter('https://YOUR_URL.marketo.com/js/forms2/js/forms2.min.js', {});
            this.marketoInjected = true;
        },
        loadForm: async function(id) {
            await this.waitForForms2();
            MktoForms2.loadForm("//YOUR_URL.marketo.com", this.myCompanyId, id);
        },
        loadMarketoOnScroll: function() {
            for(let i = 0; i < this.loadOnScroll.length; i++) {
                if(this.marketoInjected === false) {
                    this.injectForms2();
                }
                this.loadForm(this.loadOnScroll[i]);
            }
        },
        waitForForms2: function() {
            return new Promise((resolve, reject) => {
                this.waitInterval = setInterval(() => {
                    if(typeof MktoForms2 !== 'undefined') {
                        clearInterval(this.waitInterval);
                        resolve();
                    }
                }, 500);
            })
        }
    }

    var marketoFormLazyLoader = new MarketoLazyLoader();
    if(marketoFormLazyLoader.readyToHook) {
        marketoFormLazyLoader.init();
        var marketoLazyScrollHandler = function() {
            marketoFormLazyLoader.loadMarketoOnScroll();
            window.removeEventListener('scroll', marketoLazyScrollHandler);
        }
        window.addEventListener('scroll', marketoLazyScrollHandler);
    }
})();