Building a Subscription Management Center

[Josh_Hill13]

A version of this post appeared on my blog and it is similar to Christine Tran's approach. I thought I would post the full version here so you can see more detail on the planning and field detail.

The process involves four phases to achieve pages in dynamic languages.

Every customer receives the standard Unsubscribe page when they first turn on Marketo. This page helps you conform to the minimum legal standard in most countries. If you are smart, you will want to build out a subscription center fast to reduce total unsubscribes and encourage people to subscribe to different kinds of communications.

For example, you may want to provide options like:

• Newsletter
• Event Invitations
• Webinar Invitations
• Solution A Content
• Blog Posts
• Unsubscribe All

Remember, these are examples. You may want to add more like Fax, SMS, and other channels. When I create these fields, I usually use a picklist in Salesforce first, with Yes, No, "null" as values. This way, the system is easy to understand whether you are an engineer, salesperson, marketer, or machine.

Email Preference Center Phase 1: New Channels

Ingredients:

• Program – Operational
• Email Preference Center Page
• Confirmation Page to display results
• Email Preference Form
• 01 – Unsubscribe All campaign flow
• Additional fields as desired

Step 1: Create a Program

This program should be Channel=Operational. In some situations, I have created a separate Channel called “Subscriptions” where the statuses are Opted In, Opted Out and the Type is Operational so reporting is not affected. This only helps you with the counts and is totally unneeded from a technical perspective. Up to you.

Step 2: Foldering and Naming

This is how I setup my folders, which is largely the same across all Program Channels. Note the leading number ensures the order is how I want it.

Step 3: Create a Confirmation Page

The reason we create this page first is to ensure the Form is completed more quickly. You will use this page several times, so might as well do it first.Most of my clients request the Confirmation page to reflect the new values provided. This is pretty easy with some tokens.

As I mention in the sidebar above, it is possible to display a human value. This is why I almost always use a picklist for each field with Yes/No/Blank. Blanks mean that the lead hasn't made a selection and we cannot send to them yet. The default token will say "Not Selected".Example URL SLUG: http://you.yourcompany.com/email-preference-confirmation.html

• Add requisite fields.

• Modify the Values as needed. In this case, I want Unsubscribe All to encourage people to do what I want, but you can leave it as a simple checkbox.

• On this form, we will keep everything as Not Required and Prefilled to show the current settings. You may want to mention that on the page.

• Set the Confirmation page on the Form to ensure that it always goes to the right place.

Step 5: Create an Email Preferences Page

This is the main page you will point everyone to. The URL slug should look like this:http://you.yourcompany.com/email-preference-center.html

• Must replace with full URL

The entire URL we created above is fine, alternatively you can append the URL slug to%mkt_opt_out_prefix%email-preference-center.html

• Allowing people who find the page to Add themselves to your database. (Yeah, rare, I know).

To make this happen is fairly easy. There are two methods: Easy with more assets; and Hard with coding. Let’s talk Easy.

URL Slug:http://you.yourpages.com/email-preferences-new-person.html

• Preferences Page – Not You

Add link to Not You under the original Email Preference Form as shown.

If you really want to go the Hard way, you can do one of two things:

1. Have the Not You link reset the page without the munchkin identifiers.
2. Go to the second page without any munchkin.

I like Easy and it takes advantage of Marketo’s existing features.

Email Preference Center Phase 3: Dynamic Snippets by Region/Language

If you are operating programs internationally, especially at a fairly large firm, you will eventually need to implement a regional or language friendly system. The process is fairly simple, however, I would urge you to test it carefully.

Option 1: one subscription page per Region.The overhead increases because you have to manage the links in your email template footers.

Option 2: one subscription page per Region with Dynamic SnippetsThis option takes partial advantage of dynamic content.

Option 3: one subscription page to rule them all.This is much better, however, I urge you to test it a lot before going live. We’ll talk about this one in Phase 4.With Option 2, you get to try your hand at Dynamic Snippets. This is a fairly underused feature of Marketo, which can be very powerful if thought out.

Ingredients:

• Segmentation by Region or Language
• Email Footer Snippet
• Add to Emails

Step 1: create a Snippet

Go to Design Studio > Snippets

Step 2: create the dynamic content for the snippet

I recommended using one Segmentation per asset to avoid confusion.Once this Snippet is ready, test it on an Email that uses a Template with a Footer as editable. The results should flow through automatically in preview or a Live Test.

Email Preference Center Phase 4: Dynamic Languages on One Page

Of course, the holy grail is Option 3: just using one page for everything. In this situation, we will add new ingredients and modify the original Email Preference Page to be dynamic.I will go through most of the steps, but be sure to read the docs on setting up Dynamic Content and Segmentations in order to follow along. Please remember that your Segmentation Segment order and smart list criteria will determine which Language is visible to the lead.New Ingredients:

• One Form for each Language
• Modify the original Email Preference Page to use Dynamic on the Form and any other text.

**The Not You Page will still be the Default Form because new leads won’t have a Segment yet. Remember to set the Default to English or the major language of your audience.

Here is an example in Japanese I made using Google Translate.

Step 3: Test the Forms in a Clone Page

If you already have a live Preference Center, I highly recommend that you clone the original Preference Page and Confirmation Page to test these Forms before going live.

Step 4: Set the Form in the Email Preference Page to Dynamic

Step 5: Set the other page content to Dynamic

Step 6: Make the Confirmation Page Text Dynamic

Look how cool this is! Is it all clicking now for you?

Step 7: Update the Unsubscribe All Campaign

You will have to add all the Forms to the Trigger. Feel free to test it.Wow, after all that work, you now have a fully functioning, international web page. What more could you need? Some options to consider for the future:

• Double Opt In – this is required in Germany and some locations. Pro bloggers swear by it (including me) because it ensures email validity and engagement. All you need to do is add a flow or two to send out a confirmation email and link whenever someone subscribes. They click on the link and your second flow handles the final steps. See my Guide for an example.
• Confirmation Email – please avoid this unless it is for Double Opt In. If I unsubscribe, I don’t want a final email. Use the Confirmation page for this.
• Leave me alone for awhile. This option was first made famous by Marketo years ago. In this system, you ask people if they want to suspend emails for 30 days or more. The challenge is in setting up the workflows and lists to properly suspend someone for that period. Remember, the simpler methods work best.
• List Setup – of course you will want a set of smart lists and even static lists to manage people who are Opted In vs. Out by Subscription. You will also want to update any suppression lists.

[SanfordWhiteman]

Hmm, not quite safe for general use, though...

• You can't use DOM events to instrument Marketo forms. With embedded forms, descriptors load asynchronously, and rendering may complete before or after load fires on the Window.* And missing the load event is guaranteed when lightboxes and/or tag managers are used. Even on Marketo LPs, where descriptors are embedded in the page, the load process is not entirely synchronous. Use MktoForms2.whenReady or MktoForms2.whenRendered, which are designed to cover these cases, not DOM load.
• If the <div> you're seeking is inside the form, you need to scope your search to the specific Marketo form element(s), i.e. form.getFormElem()[0].querySelector("#unsubscribed"). This is because multiple Marketo forms will mean multiple matching IDs, and you will only ever match the first one (in DOM order) with document.getElementById.

* Also should use window.addEventListener because otherwise the person will be clobbering existing load events... but shouldn't use DOM window events here anyway.

[SanfordWhiteman]

Also, it occurs to me that you don't even need any JS to do this. You can use pure CSS:

<span class="mktoBooleanOutput" data-value="{{lead.Some Boolean Field}}" data-true-output="Yeppers" data-false-output="Nope"></span>

<style>
  .mktoBooleanOutput[data-value=""]:after  { content: attr(data-false-output); }
  .mktoBooleanOutput[data-value="1"]:after { content: attr(data-true-output); }
</style>

[Rey_Ong]

Yep!  Your CSS solution is actually more elegant.

My solution ties into a more narrow confine which I had to work within since I was handed a landing page with no Marketo Forms element hence I am not using MktoForms2.whenReady or MktoForms2.whenRendered instead I ended relying on Window.*.  I also know there's no other load events for that particular landing page. 

Didn't want to get into too much details since there are a lot of Marketo admins that are not familiar with DOM elements, CSS, HTML, and java script. Those that are experienced in these will find my solution way too simplistic and may not tie in well with other Marketo elements.

[SanfordWhiteman]

I was handed a landing page with no Marketo Forms element hence I am not using MktoForms2.whenReady or MktoForms2.whenRendered instead I ended relying on Window.*

You can always use the MktoForms2 object -- I don't understand what you mean there? Even if there's no named Marketo form in the page, if there's going to be a Marketo form later, then include forms2.min.js yourself and use it.

window.load means the code doesn't actually work, it only appears to work some portion of the time.

[Erin_Cavanaugh]

This is very helpful!

A question on how to actually get started with your database...

Are you by default opting everyone in and then giving them the option to opt out/change their preferences via a link in your email footer/landing pages?

Or is everyone opted out from the beginning and you are running specific 'opt-in' marketing campaigns.

How do you ensure you are following your preference center 'rules'?

So for example, say you have the following email options [webinars, conferences, newsletters, surveys] ...

Before you send out a newsletter do you just simply add the 'opt in newsletters' field to your smart list?

[Josh_Hill13]

there are a lot of threads on this.

You should almost never assume people are Opted In, even in the US.

Yes, you would use the correct filters as you described.