MailChimp Popup

[MirandaEcho]

Replace GetSiteControl popups on the website with Mailchimp popup forms same format as existing site

[benlk]

• [x] what do the current popups look like?
• [x] what will we need to do to remove the Get Site Control popups?
• [x] what form does MailChimp's popup code take?
• [ ] what style changes are needed to make Mailchimp's popups look like the GSC popups?

[benlk]

The GSC popup form:

We will need to remove this GSC code:

https://github.com/INN/umbrella-energynewsnetwork/blob/555f8663c3e325be0ac4f3aca8faa7559e8a40d5/wp-content/themes/midwestenergynews/inc/header-footer.php#L11-L27

And replace it with MailChimp's code, which looks very similar, according to the screenshot in https://mailchimp.com/help/add-a-pop-up-signup-form-to-your-website/#Add_form_to_multiple_sites :

Alternately, we'd want to add MailChimp's Connected Sites toolkit, as described in the WordPress section of https://mailchimp.com/help/about-connected-sites/#Connect_your_website_builder (add a JS tag), which would let Mailchimp control the enqueueing of popups. This could be done in the theme or in Insert Headers and Footers. However, this only allows connecting one audience to the theme.

As far as styling goes: MailChimp doesn't provide any docs, so we should reserve an hour's time in this issue for styling of the dialogs.

[benlk]

This is now blocked by the following questions:

• [x] Are they using per-popup code or the "Connected Sites" functionality?
• [ ] What's the code, and where does it go?

Once we have answers to those questions, we'll be able to proceed on styling the popup.

[MirandaEcho]

@benlk - which is recommended for the first question? They aren't using anything now, so we need to recommend the best approach.

We have access to their MailChimp account to get any code we need from that.

[benlk]

It looks like the Connected Sites feature is more about ecommerce, and they already have Insert Headers and Footers installed/active, so I'd recommend we go with the standard popup code generator inserted via IHF. The only code changes necessary on the site would be to remove the GSC code from the theme template, and deactivate GSC on staging/prod.

[benlk]

The popup generator at https://us7.admin.mailchimp.com/lists/signup-forms/popup/editor?site=true&id=49425 — or other popup generators found by going to Audience > the audience > Signup Forms > Subscriber pop-up — can be used to generate a form whose code looks 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":"mc.us7.list-manage.com","uuid":"ae5d3a0c6088cad29d71bf0d0","lid":"efa0033ba9","uniqueMethods":true}) })</script>

There are a number of customization options; the options aren't reflected in the code that's put on the page.

In theory, Ken could get a form that he likes in the editor, then send us the embed code for that popup, and we'd put it in via IHF.

[benlk]

Marking as "Status: Needs Client Approval/Input" until we get a popup code from Ken.

[joshdarby]

From @MirandaEcho on Slack:

the SoW has us creating this with minimal styling, so we should create it based on wireframes if we can

[benlk]

Neither New Project (3).pdf nor New Project (1).pdf have wireframes for the popup. Mailchimp provides the following, which is probably what it'll look like unless we modify the styles:

A certain amount of style modification is available within the MailChimp editor, mainly regarding the color of button and text, the text used, whether an image is used.

There is this note:

To comply with mobile best practices, we’ll default to a banner when your form is viewed on a mobile device. Visitors can tap the banner button to access your form.

The banner looks like this:

[benlk]

From Scrum this morning: go ahead and create the popup ourselves.

[benlk]

Mailchimp allows the creation of one (1) popup form for any given audience.

I've created one for "All digest subscribers" and added it to staging via Insert Headers and Footers: https://usenergystage.wpengine.com/

the code:

<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":"mc.us7.list-manage.com","uuid":"ae5d3a0c6088cad29d71bf0d0","lid":"efa0033ba9","uniqueMethods":true}) })</script>

The editor: https://us7.admin.mailchimp.com/lists/signup-forms/popup/editor?site=true&id=49425

[benlk]

Staging is now running with isDebug: true.

Firefox' Enhanced Tracking Protection feature does block the Mailchimp form from loading.

When ETP is disabled, the popup still fails to load in Firefox, because the popup's JS is using a browser API in a deprecated way:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/ embed.js:2:2078 Error: xhrFailed embed.js:2:388 p https://downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js:2 getText https://downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js:2 ra https://downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js:2 b https://downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js:2 oa https://downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js:2 ka https://downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js:2 oa https://downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js:2 Ma https://downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js:2 d https://downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js:2 main https://downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js:2 ja https://downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js:2 ja https://downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js:2 Ma https://downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js:2 ka https://downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js:2 Ma https://downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js:2 q https://downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js:2

https://downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js:2 https://downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js:2

In Chrome, the popup loads:

I didn't move fast enough to get a screenshot of the "Thank you for signing up!" message.

[MirandaEcho]

Has this been merged/completed on staging?

[benlk]

In Chrome and Safari:

Uncaught Error: xhrFailed at p (embed.js:2) at Function.q.getText (embed.js:2) at ra (embed.js:2) at b (embed.js:2) at embed.js:2 at ka (embed.js:2) at oa (embed.js:2) at Ma (embed.js:2) at d (embed.js:2) at embed.js:2 at ja (embed.js:2) at ja (embed.js:2) at embed.js:2 at ka (embed.js:2) at Ma (embed.js:2) at q (embed.js:2) at embed.js:2 at embed.js:2

• [ ] message that to Mailchimp
• [x] regenerate the code and re-add it

[benlk]

<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":"mc.us7.list-manage.com","uuid":"ae5d3a0c6088cad29d71bf0d0","lid":"efa0033ba9","uniqueMethods":true}) })</script>

Works.

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

Does not.

The difference is the value of isDebug: when set to true, we get the xhrFailed error. I've set it to false, and the popup now works in Firefox, Chrome, and Safari.