RSS for MailChimp

MailChimp can pull information from an RSS feed and export it as an HTML-formatted newsletter. This case study describes how to set up this feed from Drupal 8, and integrate it into a MailChimp campaign.

Source: brinner.

Table of contents

• Introduction
• Installing and enabling the modules
• Set up the RSS feed
• Using the Mailchimp service
  • Testing a MailChimp RSS campaign email layout
  • Setting up a MailChimp RSS campaign
• Final word

Drupal modules discussed in this chapter: Views, Views UI, Views RSS, Views RSS: Core Elements, Views RSS Media Elements.

Introduction

MailChimp is a premium SaaS for bulk-distributing HTML formatted newsletters. The newsletters may contain text and “featured images” pulled from a website's RSS feed. The screenshot below shows the one such newsletter.

This case study will show how to use Views to create an RSS feed of recent blog posts with teaser text and a imagea in a format suitable for creating a MailChimp HTML-formatted newsletter.

The case study will also go through the steps of creating an example MailChimp newsletter and how to preview and test it. However, it will not go into other aspects of MailChimp, such as creating a subscriber list and distributing the newsletter to the subscribers.

There exists a MailChimp bridge module that lets you create a MailChimp sign-up form, generate and send MailChimp email campaigns from your Drupal site. The MailChimp bridge module is not required to integrate MailChimp with Drupal, and is not used in this case study.

Installing and enabling the modules

Make sure the following modules are installed:

1. Views
2. Views UI
3. Views RSS
4. Views RSS: Core Elements
5. Views RSS: Media Elements

There are further dependencies, which will not be discussed here and they are sorted out by Drupal.

Set up the RSS feed

Create a new view for the feed: navigate to administration → structure → views → add new view. Fill in the form as shown in the screen dump below, and click Continue & edit.

Next, make sure you're editing the feed (click on the Feed display option at the top). Then in the “Format” section, click on the link to the format (RSS Feed) and change this to “RSS Feed — Fields”.

Click on Apply.

You'll be presented with a window with the heading “Feed: Style Options” next. Just hit Apply again. The style options should be set after you've added the fields to include in the feed.

The field Content: Title is already included in the “Fields” section. Add the body, path and image fields you're going to use in the feed. Click on Add above the “Fields” section, and select:

• Body: Content: Body.
• Path: Content: Path (use “Path” rather than “Link” as it will allow absolute URLs).
• Image: Content: Image.

Click Apply (all displays).

For all these fields uncheck “create a label” and under “Style settings”, uncheck “Add default classes” since these are not used by RSS fields.

Under “Rewrite results”, trim the body to 400 characters, since we don't want the whole blog post going out in the email. We will return to this field in a moment as well to set up the read more link, but we need to do some additional configuration first.

Configure the formatter for the image field:

• Use “RSS <media:content> element” for the core image field.

Also configure the image style to produce a scaled-down image. There is no need to change any of the other settings.

The screen dump below shows this dialog for the core image field.

When done, click Apply (all displays).

Now, configure the style options. In the “Format” section, click on Settings and expand “Item elements: Core”. Populate the fields: The title goes in the title, the trimmed body in description.

Next, expand “Item elements: Media”. Select the thumbnail field for the image.

To make sure that absolute URLs are used, rearrange the fields so “Content: Path” comes first. This ensures that the “”Content: Path” replacement pattern is available for all of our other fields. Click Apply (all displays).

To get the “Title” to link to the absolute path, click on “Content: Title”, and uncheck “Link this field to the original piece of content”. This link is useless to MailChimp as it is a relative link. Instead, look under “Rewrite results“, and select ”Output this field as a link”. Scroll down to the “Replacement Patterns” area, and use the replacement pattern for ”Content: Path” (it is “[path]” in the screenshot below, but it may be something else). Also check “Use absolute path”.

When done, click “Apply (all displays)”.

Using the Mailchimp service

To send out emails based upon the RSS feed, you need to set up a MailChimp RSS campaign.

Start by logging in to your MailChimp account, then got to the dashboard ("View Dashboard" in menu under profile image in top right corner).

Testing a MailChimp RSS campaign email layout

Set up a test audience for the campaign. Select “Audience” (in the left margins, icon depicting four heads), and navigate to Audience dashboard » Current Audience » View Audiences » Create Audience. Then create an audience and populate it with your test users.

To create a campaign that reuses an existing email campaign template, go through the following steps:

1. Select “Campaigns” (in the left margins, megaphone icon). Click on the “Create Campaign” button. In the popup window, click on "Email".
2. Give the campaign a name.
3. Click on "Begin".
4. Wait while the JavaScript campaign builder loads.
5. Click on "Design Email"
6. You must now select a template. Under "Campaigns", click on the template you want to use.
7. You will get a noutice "About switching templates". Click on the "Change template" button.
8. You are now taken to the template editor, with the template selected loaded into the editor.
9. There is no need to edit anything. Click on "Save & Close", and then on"Continue" (in the top right corner)
10. You're now back in the campaign builder. You may click "Preview" to see how the mail will look like, or send a test email.

The element "boxed text" is used for text inside a box with solid colour. If the text is white on a dark background, the preview will show it WYSIWYG, but in the editor pane (on the right side of the screen, the text will be white on white (i.e. invisible).

• Create a Mailchimp Audience.
• Reuse an Email Campaign Layout.
• Design an Email with the New Builder.
• (Replicate a Campaign.)
• Email Campaign Testing Tips.
• Titan - Blogg.

Setting up a MailChimp RSS campaign

When the RSS feed in place, it is time to create a MailChimp RSS campaign to set out emails. Start by logging in to your MailChimp account.

Select “Campaigns” (in the left margins, megaphone icon), expand the “Create Campaign” menu, and select RSS campaign.

Select “Automations” (in the left margins, megaphone icon), expand the “Create Campaign” menu, and select RSS campaign.

https://mailchimp.com/help/share-your-blog-posts-with-mailchimp/

This starts the MailChimp RSS campaign wizard. The wizard consists of six steps and progress is shown as breadcrumbs on the bottom of the screen.

The first step has the title “RSS feed and send timing”. In the field “RSS feed URL”, enter the URL of the feed you've created.

Notice the string “Posts from *|RSSFEED:TITLE|* for *|RSSFEED:DATE|*” in the black area at the top of screen. The strings enclosed in *|…|* are something MailChimp call RSS merge tags. They let you customize a campaign with strings pulled from the RSS feed. MailChimp RSS merge tags work in the same way as tokens do in Drupal.

For just testing, you can leave the timing and resize settings unchanged. Click Next (bottom right of screen).

In this case study, the bogus URL “http://www.example.com/views-rss-feed.xml” is used as an example. However MailChimp requires a valid URL to proceed to the next step in the wizard. If you are trying this out on a staging server that is behind a firewall that disallow outside connections, MailChimp will not be able to see your RSS feed and your setup will fail. Always make sure your feed is reachable from the outside.

Since no there is no list of potential list of subscribers, MailChimp suggests that you only send it to yourself.

For testing, this is adequate. Click Next.

The next step has the title “Campaign info”. You need to give your campaign a name. It will appear on your “Campaigns” page.

As for the rest of the settings, you can keep the defaults as long as this will only be used for testing. Click Next.

The next step lets you select a HTML template for the campaign email.

For testing, the basic 1 column template is adequate. Click Select.

When you select a template, you are automatically transferred to a design editor that let you set up the content of the campaign email.

The design editor is where you create the content for your campaign email. It is a powerful tool, but in this RSS case study, we're just going to populate the main content area with content pulled from the RSS feed.

This is done with something MailChimp calls RSS merge tags. This case study will only use a few of these. Check out this article in the MailChimp knowledgebase for a full list of RSS merge tags.

To edit a text area in the MailChimp design editor, you first hover over the text to activate it. Then click the pencil icon to edit.

In this example, we want to display our blog post's title, our featured image, and the trimmed body. We'll tell MailChimp we're going to do this totally custom, so we'll use the RSSITEM merge tags. Replace all placeholder text in the text field shown above with the following:

*|RSSITEMS:|*
*|RSSITEM:TITLE|*
*|RSSITEM:IMAGE|*
*|RSSITEM:CONTENT|*
*|END:RSSITEMS|*

MailChimp expects the following pair to open an close customized formatting for individual RSS items: *|RSSITEMS:|* … *|END:RSSITEMS|**, so we place it before and after the other three elements. The mapping between the MailChimp RSS merge tags and the XML generated by the views RSS feed is as follows:

• *|RSSITEM:TITLE|* uses the contents of the RSS tag <title>.
• *|RSSITEM:IMAGE|* uses the contents of the RSS tag <media:content>.
• *|RSSITEM:CONTENT|* uses the contents of the RSS tag <description>.

If you look at the XML that is output from our Views RSS Feed, you will see that the fields set set up in the first part of this case study use those exact tags.

To preview the campaign email, click on Preview and Test at the top of the page, and select Enter Preview Mode.

[IMAGE]

Hover over any links visible in the preview to make sure they are linking to the correct place. Also make sure they are absolute links.

To exit preview mode, click on the × in the upper right corner of the page.

When you think you're done, click on Next.

This will take you to the final step where MailChip will review the template you've created. If something is wrong, you will be told, and there will be a button (Resolve) that take you back to the step where the problem can be resolved. In the screen shot below, the problem is that some placeholder text is still present in the template.

If nothing is wrong, the headline for the final step of the wizard will be “You're all set to send!” and all items in the feedback form will have checkmarks on a green background.

Now, there will be a link at the bottom right corner of the screen that lets you activate the campaign. If you don't want to activate yet, you should instead select one of the options under “Save And Exit” in the top left corner of the screen.

The preview option for MailChimp seems to be cached. If you change your feed, you may not see the changes when previewing. To make sure MailChimp isn't displaying the cached version of the feed, change the feed URL in your view, and then update the URL in the RSS feed setting for your campaign.

https://us11.admin.mailchimp.com/campaigns/wizard/neapolitan?id=1038738

*|FEEDBLOCK:https://titan.uio.no/sisteuke.xml|*
*|FEEDITEMS:[$count=5]|*

Final word

After you've created a campaign, you can then modify your feed and the MailChimp email template until you are happy with it. You can then activate it. To modify an active campaign, you first need to pause it.

Se epost 2021-03-16 09:02 for eksempel
Titan.uio.no nyhetsbrev@titan.uio.no

---

Last update: 2021-03-16 [gh].