{"id":21602,"date":"2017-09-27T17:47:55","date_gmt":"2017-09-28T00:47:55","guid":{"rendered":"http:\/\/how_to_boost_email_marketing_with_personalized_email_banners"},"modified":"2024-05-29T16:41:26","modified_gmt":"2024-05-29T23:41:26","slug":"how_to_boost_email_marketing_with_personalized_email_banners","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/how_to_boost_email_marketing_with_personalized_email_banners","title":{"rendered":"How to Boost Email Marketing with Personalized Email Banners"},"content":{"rendered":"

TL;DR<\/strong>\nIn our last article, we saw how Cloudinary is the perfect email image hosting solution for launching email marketing campaigns<\/a> at scale. Today, we\u2019ll explore this topic further, looking at how Cloudinary can create dynamic image banners that can be used to create highly personalized email marketing campaigns.<\/p>\n

\n

While email marketing is still a dominant channel to reach your customers, blindly sending generic emails doesn\u2019t work well. Personalizing emails<\/strong> is key to a successful marketing campaign. This is where merge tags come in. Merge tags are one of the best features in email marketing. They enable us to send highly customized emails to our subscribers and eventually turn them into customers.<\/p>\n

However, until now, most of us were restricted to personalize only the textual content in our email campaigns by using merge tags. In this article, we\u2019ll learn how to dynamically generate images<\/strong> using Cloudinary and merge tags. By the end of this tutorial, you\u2019ll be able to create highly personalized email marketing campaigns with customized email banners<\/strong>, using nothing but the content from your merge tags and Cloudinary.<\/p>\n

Before we get started, let\u2019s quickly revisit the topic of merge tags and how to use them in our campaigns. If you\u2019re familiar with merge tags, you can skip this section and jump to the next one.<\/p>\n

What are Merge Tags?<\/h2>\n

Merge tags are placeholders of information used in email marketing campaigns. There are two steps to using a merge tag.<\/p>\n

    \n
  1. You need to define the merge tag<\/li>\n
  2. You need to have a data source for your merge tag (this is typically your email list)<\/li>\n<\/ol>\n

    One of the most famous examples of a merge tag is the |*FNAME*| tag, which is nothing but the first name of the person who you are emailing.<\/p>\n

    Take this email list for example:<\/p>\n

    \"Table\nTable 1: Sample Email List<\/em><\/p>\n

    The table without any entry represents what is known in technical terms, the schema. In other words, it\u2019s an empty table with only the columns. It gives you a pretty good idea as to what data to enter into the table.<\/p>\n

    How Do We Identify Merge Tags?<\/h2>\n

    The first row of each column is the identifier<\/strong> of that column. In the first column of Table 1, the first row reads \u201cFirst Name\u201d, which is the identifier for that column. The merge tag<\/strong> maps to this identifier.<\/p>\n

    Each column\u2019s identifier can have its own merge tag, but we typically use the common ones, i.e. First Name, Last Name and some more.<\/p>\n

    \"Table\nTable 2: Merge Tags<\/em><\/p>\n

    By default, your email service provider would allocate the common merge tags to your email lists. Table 2 shows some of the most commonly used merge tags.<\/p>\n

    How do Merge Tags Work?<\/h2>\n

    Merge tags are embedded in the body of the email. When sending the email, the ESP replaces the value of the merge tag for that particular email address, picked from the email list.<\/p>\n

    Take a look at this example, where we embed the |*FNAME*| merge tag in the email body:<\/p>\n

    \n

    Hi |*FNAME*|<\/strong>,<\/p>\n<\/blockquote>\n

    \n

    Thanks for subscribing to our newsletter. Here\u2019s a copy of the ebook \u201cResponsive Images<\/a> with Cloudinary\u201d we promised you.<\/p>\n<\/blockquote>\n

    \n

    Download Now<\/p>\n<\/blockquote>\n

    \n

    To your email marketing success,<\/p>\n<\/blockquote>\n

    \n

    Team ESP<\/p>\n<\/blockquote>\n

    Let\u2019s assume that the email is being sent to mike@box.com<\/a>.<\/p>\n

    When the actual email is sent, the merge tag points to the First Name<\/strong> field, whose value is replaced in the body of the email. (Refer Table 1)<\/p>\n

    The actual sent email would look something like this:<\/p>\n

    \n

    Hi Sam<\/strong>,<\/p>\n<\/blockquote>\n

    \n

    Thanks for subscribing to our newsletter. Here\u2019s a copy of our ebook \u201cResponsive Images with Cloudinary\u201d we promised you.<\/p>\n<\/blockquote>\n

    \n

    Download now.<\/p>\n<\/blockquote>\n

    \n

    To your email marketing success,<\/p>\n<\/blockquote>\n

    \n

    Team ESP<\/p>\n<\/blockquote>\n

    Merge Tags in Subject Lines?<\/h2>\n

    Merge tags enable us to use the word \u2018Sam\u2019 instead of a generic \u2018Hi there\u2019 or \u2018Hello\u2019.\nIn fact, merge tags are pretty useful in crafting compelling email subject lines.<\/p>\n

    A generic email subject line for an ebook download would run:<\/p>\n

    \n

    Download your copy of Responsive Images with Cloudinary.<\/em><\/p>\n<\/blockquote>\n

    Sure, it\u2019ll get you some open rates. But with merge tags available, you can craft a more personalized subject line:<\/p>\n

    \n

    Sam – download your free copy of Responsive Images with Cloudinary.<\/em><\/p>\n<\/blockquote>\n

    However in your ESP, you would use the following code in your subject line:<\/p>\n

    \n

    |*FNAME*| – download your free copy of Responsive Images with Cloudinary.<\/em><\/p>\n<\/blockquote>\n

    Research<\/a> has shown that the second option has higher open-rates<\/a>. Personalizing emails helps a brand resonate with the reader. As a result, the reader feels more connected with the brand.<\/p>\n

    Where do Merge Tags Fall Short?<\/h2>\n

    We know that merge tags enable us to send customized emails. However, it has only been linked to the text elements of the email. For example, the email body, the subject line or the recipient\u2019s name. We weren\u2019t able to generate customized images<\/strong> based on the content of the merge tags.<\/p>\n

    Cloudinary, on the other hand, is a platform built<\/em> for on-the-fly image optimization<\/a> and transformation. It makes perfect sense to connect the two pieces, which would enable us to create truly personalized email marketing campaigns.<\/p>\n

    For the remainder of this tutorial, we\u2019ll learn how to use Cloudinary\u2019s advanced image manipulation<\/a> capabilities and the data from the merge tags, to craft highly customized images for our email marketing campaigns.<\/p>\n

    Use Case: Personalized Images in Email Marketing<\/h2>\n

    Let\u2019s take an example of a fictional SaaS company – HashMetrics – which operates a freemium business model. HashMetrics has two sets of active customers:<\/p>\n

      \n
    1. People on the trial plan<\/li>\n
    2. Paying customers<\/li>\n<\/ol>\n

      HashMetrics wants to run a promotional campaign, offering a flat 10 percent discount to paying customers, and a 20 percent discount to trial account customers.<\/p>\n

      For the purpose of simplicity, let\u2019s assume that our HashMetric\u2019s ESP has a similar dataset for the target email list, as shown in the table below:<\/p>\n

      \"Table\nTable 3: Sample email list with discount information for HashMetric\u2019s promotional campaign<\/em><\/p>\n

      The available merge tags are:\n\"Table<\/p>\n

      Let\u2019s see how we can generate a customized email banner using Cloudinary\u2019s on-demand image transformation and optimization platform.<\/p>\n

      Here\u2019s the email campaign with the merge tags:<\/p>\n

      \"Dog<\/p>\n

      \n

      Hey |*FNAME*|<\/strong>,<\/p>\n<\/blockquote>\n

      \n

      We hope HashMetrics is helping you keep track of your digital marketing campaigns.<\/p>\n<\/blockquote>\n

      \n

      Holidays are around the corner and we have a special gift for you –\na flat |*DISCOUNT*|<\/strong> percent off on your next bill, no matter your subscription.<\/p>\n<\/blockquote>\n

      \n

      We hope you\u2019re enjoying using HashMetrics as much as we enjoy building it.<\/p>\n<\/blockquote>\n

      \n

      If you ever have any questions, please feel free to reach out to us via email at support@hasmetrics.io<\/a> or by simply tweeting your query to @hashmetrics.<\/p>\n<\/blockquote>\n

      \n

      To your marketing success,<\/p>\n<\/blockquote>\n

      \n

      Team HashMetrics<\/p>\n<\/blockquote>\n

      The only thing missing in the email is the merge tag for the discount value.\nHere\u2019s how we can dynamically generate the image with Cloudinary<\/strong>.<\/p>\n

      We start with the base image<\/strong>:<\/p>\n

      \"Dog\nBase image for a typical promotional email marketing campaign<\/em><\/p>\n

      We then apply the discount code to the image using Cloudinary\u2019s on-the-fly image transformation capabilities. Let\u2019s examine the following piece of code:<\/p>\n

      \n Loading code examples<\/span>\n <\/cld-code-widget>\"Dog\"<\/a><\/p>\n

      We\u2019ve added the text 10%<\/strong> to the image. That\u2019s the bit in the image URL that\u2019s highlighted in bold. However, the text needs to be URL encoded, which means special characters get encoded in a URL.<\/p>\n