Email Campaigns

Thanks to Mark Corrigan (GCM ’13) for contributing this tutorial. MailChimp and similar programs enable the creation of email campaigns or “email blasts” with product updates and information. Functions include creating:

• HTML/CSS-formatted emails with text and images
• mailing lists of people to whom to send the emails
• sign-up forms for web sites that enable readers to automatically sign up to receive email updates

MailChimp was designed for marketers who do not know HTML/CSS but includes editing features for those who do.

This tutorial includes some topics that are not covered in detail in the course. The Mailchimp site is an example of a content-management system similar to WordPress, which stores images and has some automated coding features. The signup sheet is an HTML form. When submitted, the form is processed using the PHP (PHP hypertext preprocessor) language, which is similar to Javascript and operates on servers.

For this tutorial we will be making an HTML-formatted email and a signup form for your web site. The relationship between the email, the email subscribers, and the signup form is shown in the diagram below.

What You Will Need

• A free account on Mailchimp.com
• Banner image (1024px or less and no larger than 1 MB)
• Image for text wrap, no larger than 256px wide
• Some text for your email

Add Yourself as a Contact

1. From Mailchimp’s left menu, select Audience, and then from the yellow tab All Contacts (screen capture below).
2. Select Add contacts > Add a subscriber.
3. Enter your own email address and first name. At the bottom, check “This person gave me permission to email them.”

Create an Email Campaign

1. From the left menu, select Create > Email > Regular and name the campaign.
2. Fill out each of the items, To (select your audience), From (you), Subject (fill in), then click the Design Email button (first screen capture below).
3. Select the “Basic 1 Column” template.
4. The template includes predefined fields on the left, which appear on hover. These can be edited (pencil icon), duplicated (+), and deleted (trash can icon). Optional fields appear on the right.
5. Hover over the “Logo” field and click “Edit.” The Edit window will appear to the right. Under Your Default Logo, click Replace. Place your banner image by dragging-and-dropping the file into the field (second screen capture).
6. Hover over the “Message” field and click “Edit.” Place your text in the edit window at right (third screen capture).
7. Above the message, write “Dear” or “Hello” and select Merge Tags > First Name.
8. Place the cursor before the first paragraph and select the Content Studio icon. Upload your text-wrap image. Enter the desired width into the Edit Image window and insert.
9. Click the Source (“<>”) icon to edit the HTML. Add desired image styles like float, margin, border, and box-shadow.
10. When finished editing the email, click Continue at the top right of the window.

Preview the Email

1. From the black bar at the top, select Preview to see how your mail will look.
2. You can also send a test email.

Replicate Campaign and Send

1. Once sent, your email campaign cannot be edited or resent, however it can be replicated. We recommend replicating the campaign before sending so you can go back and edit it later.
2. When satisfied with the campaign’s design, return to the Campaigns window, replicate the campaign, and send it to yourself.
3. Your email will contain a link, “View in Browser.” Please submit this link for the assignment.

Create a Signup Form for Your Web Site

The signup form enables readers of your web site to sign up for email campaigns. The form is different from the email campaign itself.

1. Click Create and select Signup Form; name the form and click Begin.
2. The “Embedded Forms” template includes a basic “Subscribe” form that request’s the reader’s email (required), first name, and last name (optional).
3. To put this form on one of your web pages, copy the HTML code below the Preview and paste into your HTML document. Note the instructional comments in the code recommend placing the <style> tag in the <head> of your page.
4. Also note the bug in Mailchimp that the link to the stylesheet is missing the prefix “https:”. Add this text to the link so your form will appear correctly (screen capture below).
5. Place the signup form on a page in your web site and submit the link to this page for the assignment.

The subscription form appears incorrect due to the missing “https:” at the beginning of the linked style sheet.	Correct appearance of the form after inserting “https:” in front of the style sheet link.

MailChimp Terms

Search Engine Optimization

According to German market research firm Statista, in 2015 there were close to a billion websites in operation, and users made over 3 billion searches using the Google, Yahoo, Big, Baidu, and Yandex search engines.

Search engine optimization (SEO) refers to the inclusion of information in your site that makes it easy for a search engine’s web crawler to find the site. According to Prof. Dr. Jörg Westbomke from the Hochschule der Medien in Stuttgart, Germany, SEO includes two types of optimization: on-page and off-page. On-page optimization includes steps that web publishers can take to increase the visibility of their sites to search engines. Off-page optimization refers to external factors, including links to a site from other sites, bounce factor, points in social media.

Checklist for Search Engine Optimization (SEO)

• Correct any spelling errors in the text.
• Add a title in the head of each page, <title>Title Goes Here</title>
• Add a meta tag with a description of the site, <meta name=”description” content=”description goes here”>.
• Add a meta tag with keywords, <meta name=”keywords” content=”keywords go here”>.
• Add “alt” tags describing all the images, <img src=”image.jpg” alt=”description goes here” />.
• Rename the html pages (and rewrite links) with a descriptive URL.
• Add some headings <h1>  that describe the text.
• Emphasize important words (that you want the web crawler to pick up) with emphasis <em> and bold <strong> tags.

Google Analytics

“Get to know your customers” is the theme of Google Analytics [New Window]. This site provides a code that you can place in your web site to get information about customers — where are they from, how often do they visit your site, how long do they stay, and what pages do they visit?

1. To use Google Analytics, you will need a non-ryerson email (Ryerson already uses Google Analytics so you won’t be able to access the service using an @ryerson.ca email).
2. Go to google.com/analytics and create a new account with your non-Ryerson email.
3. In the left navigation bar, go to Admin > Setup Assistant > Create Property and type in the URL you want to track.
4. In Setup Assistant go to Tag Installation > Property (site) > Global site tag . Copy the 8-line code snippet to place in the head of your web pages. The code snippet will capture information about visitors to your site, such as their location, browser, and platform, and report this in a page on the Google Analytics site.

Google Analytics Home page menu showing Admin button (bottom, circled in red) and Tag Manager screen with tracking code to be embedded in the site’s Head.