Creating Advanced Email Marketing Templates with MJML and EJS: Adding Iterations and Complex Elements

Creating Advanced Email Marketing Templates with MJML and EJS: Adding Iterations and Complex Elements

In our previous tutorial, we created a basic email template using MJML for design and EJS for dynamic data, sourced from a JSON file. Now, we'll take it a step further by incorporating iterations and more complex elements. This will allow for the creation of richer and more dynamic email templates.

Step 1: Setting Up the Environment

Ensure your development environment is set up with Node.js and the required dependencies. If you haven’t already, set up a new project and install MJML and EJS:

mkdir advanced-email-template
cd advanced-email-template
npm init -y
npm install mjml ejs

Step 2: Creating the Advanced MJML Template

Create a file named advanced_template.mjml with the following content:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text font-size="20px" color="#000000">
          Hello, <%= user.name %>!
        </mj-text>
        <mj-text> Here are the latest updates from our newsletter: </mj-text>
        <% user.newsItems.forEach(function(item) { %>
        <mj-text>
          <strong><%= item.title %></strong>
        </mj-text>
        <mj-image
          src="<%= item.image %>"
          alt="<%= item.title %>"
          width="200px"
        />
        <mj-text> <%= item.description %> </mj-text>
        <mj-button href="<%= item.link %>"> Read More </mj-button>
        <% }); %>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Step 3: Creating the JSON Data File

Create a file named advanced_data.json with more complex data:

{
  "user": {
    "name": "Juan Pérez",
    "newsItems": [
      {
        "title": "New Feature Release",
        "description": "We have launched a new feature to enhance your experience.",
        "image": "https://example.com/feature.jpg",
        "link": "https://example.com/feature"
      },
      {
        "title": "Upcoming Webinar",
        "description": "Join our upcoming webinar to learn more about our services.",
        "image": "https://example.com/webinar.jpg",
        "link": "https://example.com/webinar"
      }
    ]
  }
}

Step 4: Generating the Advanced Email

Create a file named generateAdvancedEmail.js to process the advanced MJML template with the JSON data:

const mjml = require("mjml");
const ejs = require("ejs");
const fs = require("fs");

const template = fs.readFileSync("advanced_template.mjml", "utf8");
const data = JSON.parse(fs.readFileSync("advanced_data.json", "utf8"));

const renderedMJML = ejs.render(template, data);
const { html, errors } = mjml(renderedMJML);

if (errors.length) {
  console.error("Errors generating the email:", errors);
} else {
  fs.writeFileSync("advanced_output.html", html);
  console.log("Email successfully generated in advanced_output.html");
}

Step 5: Running the Script

Run the following command in your terminal to generate the advanced email:

node generateAdvancedEmail.js

Result

The email will be generated in a file named advanced_output.html in the project directory. Open this file in your browser to see the final result.

Conclusion

In this advanced tutorial, we expanded our email template by incorporating iterations and more complex elements using MJML and EJS. We used a JSON file to dynamically populate the template with multiple news items, demonstrating how to handle lists and repeated elements. This approach allows for the creation of highly dynamic and personalized email templates, improving the effectiveness of your email marketing campaigns.

By mastering these techniques, you can create professional, responsive, and data-driven email templates that cater to your audience's needs. Experiment with additional MJML components and EJS logic to further enhance your templates and optimize your email marketing strategy.