Adding mailchimp popup in Google Optimize

mailchimp popup

keywords: google-optimize, mailchimp, popup, js

TL;DR

A tip to add mailchimp popup in Google Optimize
Handle CSS issue when adding mailchimp

So…

Today I have a task that need to add mailchimp popup on my website as an experiment. Since we use Google Optimize to implement the A/B testing, I need to add the mailchimp script on Google Optimize
(Please read the references below if you don’t know about Google Optimize or Mailchimp)

The script I need to add from mailchimp look like this:

<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
<script type="text/javascript">
    window.dojoRequire(["mojo/signup-forms/Loader"], function(L) {
        L.start({
            "baseUrl": "...",
            "uuid": "...",
            "lid": "...",
            "uniqueMethods": true
        })
    })
</script>

(I had removed the baseUrl, uuid, lid with ...; you need to keyin your own)

But on Google Optimize; you can only:

add the html => but Google not allow script type HTML
call a js function => but you can only add the body of the function, while the code above is html

Google Add Script Error

So the first things; I need to convert html to js; Actually, I created a script element by javascript
The script above after convert; using createElement and setAttribute

var script = document.createElement('script');

// the first script element is to download embed.js
script.type = "text/javascript";
script.setAttribute("data-dojo-config", "usePlainJson: true, isDebug: false");
script.src = '//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js';

// set listener to know when the download complete & show form
script.addEventListener('load', function () {
    window.dojoRequire(["mojo/signup-forms/Loader"], function (L) { L.start({ "baseUrl": "mc.us6.list-manage.com", "uuid": "...", "lid": "...", "uniqueMethods": true }) })
});

document.body.appendChild(script);

That’s it!!! So now you can copy the code and paste to Google Optimize Javascript

But… the mailchimp change my website html

This case is rarely occur, because when I tested, it’s not showing;
It’s only occur for a long page, with many contents
The issue is when mailchimp shown (inside iframe); it changes my main html with & height;
To fix that; I set back the width & height after mailchimp popup added (or you can set !important to your html style to not letting mailchimp overwrite it)

document.body.style.width = "auto";
document.body.style.height = "auto";

Wrap Up - the whole code

(function () { // <= this is the Google Optimize function

var script = document.createElement('script');

    script.type = "text/javascript";
    script.setAttribute("data-dojo-config", "usePlainJson: true, isDebug: false");
    script.src = '//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js';

    script.addEventListener('load', function () {
      window.dojoRequire(
        ["mojo/signup-forms/Loader"], 
        function (L) { 
          L.start({ "baseUrl": "mc.us6.list-manage.com", 
          "uuid": "<mailchimp_unique_id>", 
          "lid": "<mailchimp_list_id>", 
          "uniqueMethods": true 
        }) 
      })
    });

    document.body.appendChild(script);

    document.body.style.width = "auto";
    document.body.style.height = "auto";
})();

Search This Blog

Saigon MD