Amazing Emails with Drupal 8 Wayne Eaker April 11, 2019 - - PowerPoint PPT Presentation

▶
amazing emails with drupal 8
SMART_READER_LITE
LIVE PREVIEW

Amazing Emails with Drupal 8 Wayne Eaker April 11, 2019 - - PowerPoint PPT Presentation

Jan 16, 2024 253 likes •1.19k views

Amazing Emails with Drupal 8 Wayne Eaker April 11, 2019 DrupalTutor.com The Drupal User Experience The Drupal User Experience The Email User Experience Ongoing User Engagement Transactional Emails 8 times more opens than marketing

slide-1
SLIDE 1

Amazing Emails with Drupal 8

Wayne Eaker
 DrupalTutor.com

April 11, 2019

slide-2
SLIDE 2

The Drupal User Experience

slide-3
SLIDE 3

The Drupal User Experience

slide-4
SLIDE 4

The Email User Experience

slide-5
SLIDE 5

Ongoing User Engagement

slide-6
SLIDE 6

Transactional Emails

8 times more opens
 than marketing emails

Source: Experian
slide-7
SLIDE 7

Ongoing User Engagement

slide-8
SLIDE 8

Website Editor Experience

slide-9
SLIDE 9

Emails from Drupal

No HTML Formatting

slide-10
SLIDE 10

Emails from Drupal

Limited Features

slide-11
SLIDE 11

Emails from Drupal

Editor Experience
 Is Inconsistent

slide-12
SLIDE 12

Drupal Core

slide-13
SLIDE 13

Webform

slide-14
SLIDE 14

Drupal Commerce

slide-15
SLIDE 15

Emails from Drupal

No Email History

slide-16
SLIDE 16

Emails from Drupal

“We’ve got a user over here who says they didn’t get the

  • email. Is something wrong

with the system?” — Every client ever

slide-17
SLIDE 17

Emails in Drupal Core

HTML Formatting

🚬

Attachments & Images

🚬

Editor Experience & Templates

😖

Email History

🚬

slide-18
SLIDE 18

Making Drupal Email Amazing

slide-19
SLIDE 19

Wayne Eaker

Independent Full Stack Drupal Developer since 2006 / version 4.5
 drupal.org / Slack: zengenuity Twitter: @WayneEaker

Zengenuity DrupalTutor.com

slide-20
SLIDE 20

What We Are Going to Talk About

HTML Email How Drupal Core Sends Email Architecture of a Better Email Solution for Drupal 8 New System for Drupal Email

slide-21
SLIDE 21

Email Delivery Use third-party MTA
 (Amazon SES, Mailgun, SendGrid, etc.)

What We Aren’t Going to Talk About

slide-22
SLIDE 22

HTML Email

Limited HTML and CSS Implementation Responsive Design Works in 
 Most Popular Clients Limited Support for Web Fonts Gmail and Apple Mail (Mac and iOS)
 Good HTML / CSS Support Outlook = Table Hell

slide-23
SLIDE 23

Email Client Market Share

Apple iPhone 28% Gmail 26% Outlook 9% Apple iPad 9% Apple Mail 8% Yahoo! Mail 7% Outlook.com 2% Google Android 2% Samsung Mail 2% Thunderbird 1%

As of March 2019. Source: https://emailclientmarketshare.com/
slide-24
SLIDE 24

How Drupal Sends Email

\Drupal::service(‘plugin.manager.mail’)


  • >mail($module, $key, $to, $langcode, $params, $reply, $send)


hook_mail($key, &$message, $params)
 hook_mail_alter(&$message)


Only supports plain text by default
 No multi-part support - no attachments

slide-25
SLIDE 25

Emails in Drupal Core

HTML Formatting

🚬

Attachments & Images

🚬

Editor Experience & Templates

😖

Email History

🚬

slide-26
SLIDE 26

Swift Mailer

PHP library for sending HTML / multi-part emails
 https://swiftmailer.symfony.com Provides formatting and transport Supports attachments and inline images Drupal integration module
 https://www.drupal.org/project/swiftmailer

slide-27
SLIDE 27

Mail System

User interface for selecting 
 a mail processing plugin

slide-28
SLIDE 28

Customizing Swift Mailer

swiftmailer.html.twig <html>
 <head>
 <style type="text/css">
 table tr td {
 font-family: Arial;
 font-size: 12px;
 }
 </style>
 </head>
 <body>
 <div>
 <table width="800px" cellpadding="0" cellspacing="0">
 <tr>
 <td>
 <div style="padding: 0px 0px 0px 0px;">
 {{ body }}
 </div>
 </td>
 </tr>
 </table>
 </div>
 </body>
 </html>
slide-29
SLIDE 29

Customizing Swift Mailer

swiftmailer.html.twig

<html>
 <body>
 <div>
 <table width="800px" cellpadding="0" cellspacing="0">
 <tr>
 <td>
 <div style="padding: 0px 0px 0px 0px;">
 {{ body }}
 </div>
 </td>
 </tr>
 </table>
 </div>
 </body>
 </html>

slide-30
SLIDE 30

Customizing Swift Mailer

swiftmailer.html.twig

<html>
 <head>
 <style type="text/css">
 table tr td {
 font-family: Arial;
 font-size: 12px;
 }
 </style>
 </head>
 <body>
 ...
 </body>
 </html>

slide-31
SLIDE 31

Responsive Design

<style>
 @media only screen and (min-width: 650px) {
 .md-float-right {
 float: right;
 margin-left: 40px;
 }
 .md-right {
 text-align: right;
 }
 .md-mb20 {
 margin-bottom: 20px;
 }
 .md-mb0 {
 margin-bottom: 0;
 }
 .md-center {
 text-align: center;
 }
 }
 </style>
slide-32
SLIDE 32

Web Fonts

<style>
 @font-face {
 font-family: 'Bitter';
 font-style: normal;
 font-weight: 400;
 src: local('Bitter Regular'), local('Bitter-Regular'), 
 url(https://fonts.gstatic.com/s/bitter/v14/rax8HiqOu8IVPmn7f4xpLjpSmw.woff2) format('woff2');
 }
 body {
 font-size: 14px;
 font-family: 'Bitter', "Times New Roman", Times, serif;
 }
 </style>

slide-33
SLIDE 33
slide-34
SLIDE 34

Emails in Drupal with Swift Mailer

HTML Formatting

😎

Attachments & Images

🤔

Editor Experience & Templates

😖

Email History

🚬

slide-35
SLIDE 35

How Drupal Stores Data

Entities: data records Entity Types: different types of records 
 (content, user, taxonomy term, media) Entity Bundles: subtypes 
 (content types, taxonomy vocabularies, media types)

slide-36
SLIDE 36

Tokens

slide-37
SLIDE 37

Amazing Drupal Email Components

Templates Content & Storage Email Trigger Plugin Selection Transport

Mail
 System

Email Formatting

Swift Mailer Entity Storage Custom Code 
 Contrib Entity Bundles & 
 Tokens

Creation Trigger

Manually Custom Code

slide-38
SLIDE 38

Message Module


https://www.drupal.org/project/message

My Initial Solution

slide-39
SLIDE 39

My Initial Solution

Templates Content & Storage Email Trigger Plugin Selection Transport

Mail
 System

Email Formatting

Swift Mailer Message Entities Custom Code Message Module Templates & 
 Tokens

Creation Trigger

Custom Code

slide-40
SLIDE 40

Issues

Integration code for every template

function mymodule_drupal_mail_alter(&$message) {
 if ($message[‘id’] === ‘user_password_reset’) {
 $message[‘send’] = FALSE; 
 // Create replacement message entity and send.
 }
 }

slide-41
SLIDE 41

Issues

Template editor experience not great

slide-42
SLIDE 42

Message Template Editing

slide-43
SLIDE 43

Issues

Email history without formatting

slide-44
SLIDE 44

Message Log Viewing

slide-45
SLIDE 45

Emails in Drupal with Message Module

HTML Formatting

😎

Attachments & Images

🤔

Editor Experience & Templates

🥻

Email History

😖

slide-46
SLIDE 46

New Solution

Optimized exclusively for email Eliminate requirement for custom code Templates easily editable and 
 previewable by content admins Access to all email important email headers and features

slide-47
SLIDE 47

Easy Email

https://drupal.org/project/easy_email

slide-48
SLIDE 48

Easy Email Site Components

Templates Content & Storage Email Trigger Plugin Selection Transport

Mail
 System

Email Formatting

Swift Mailer Email Entities Easy Email Module Email Entity Bundles / Templates & 
 Tokens

Creation Trigger

Manually in UI
 
 Email Overrides Module
 Custom Code

slide-49
SLIDE 49

Custom Design

Use Swift Mailer module for email formatting and CSS Easy Email Twig templates:
 
 HTML Body
 Plain Text Body
 Inbox Preview Twig templates overridable by bundle

slide-50
SLIDE 50

Inbox Preview

slide-51
SLIDE 51

Inbox Preview

<div style=“display:none;font-size:1px;color:#333333;line- height:1px;max-height:0px;max-width:0px;opacity: 0;overflow:hidden;">
 
 We know, remembering passwords is tough, gulliver. Here's a little a help to get you chomping on jerky again.
 
 </div>

slide-52
SLIDE 52

Inbox Preview

slide-53
SLIDE 53

Template Editor Experience

slide-54
SLIDE 54

Template Editor Experience

slide-55
SLIDE 55

Supports Tokens

slide-56
SLIDE 56

Supports Attachments

slide-57
SLIDE 57

Plain Text Alternative

slide-58
SLIDE 58

Fieldable Templates

slide-59
SLIDE 59

Configurable “Base” Fields

slide-60
SLIDE 60

User References

slide-61
SLIDE 61

Template Preview

slide-62
SLIDE 62

Template Preview

slide-63
SLIDE 63

Duplicate Email Prevention

slide-64
SLIDE 64

Email Override System

slide-65
SLIDE 65

Manual Sending

slide-66
SLIDE 66

Email History

slide-67
SLIDE 67

Email History

slide-68
SLIDE 68

Entity API

Works with Views Entity lifecycle hooks:
 hook_entity_insert()
 hook_entity_presave()
 hook_entity_delete() Templates and overrides exportable as configuration

slide-69
SLIDE 69

Test Suite

Template Creation Template Preview Email Sending Permissions (coming soon) Email overrides (coming soon)

slide-70
SLIDE 70

Future Roadmap

Choose theme per template Better inline image handling Default bundle field configuration Option to disable email saving per template Option to purge old email entities Webform integration

slide-71
SLIDE 71

Emails with Easy Email Module

HTML Formatting

😎

Attachments & Images

😄

Editor Experience & Templates

🧑

Email History

🥱

slide-72
SLIDE 72

Examples

slide-73
SLIDE 73
slide-74
SLIDE 74
slide-75
SLIDE 75
slide-76
SLIDE 76
slide-77
SLIDE 77

Demos

slide-78
SLIDE 78

Creating a Template

slide-79
SLIDE 79

Creating an Email Override

slide-80
SLIDE 80

Previewing a Template

slide-81
SLIDE 81

Sending an Email 
 Manually

slide-82
SLIDE 82

🤪 🤪 🤪

slide-83
SLIDE 83

Join us for contribution opportunities


Friday, April 12

Mentored Contribution


 9:00 - 18:00 Room: 602

First-Time
 Contributor Workshop


 9:00 - 12:00 Room: 606

General
 Contribution


 9:00 - 18:00 Room: 6A

#DrupalContributions

slide-84
SLIDE 84

🤪 🤪 🤪

slide-85
SLIDE 85

😟

slide-86
SLIDE 86

Roadmap to Stable Release

Finish test coverage Option to disable email saving per template Option to purge old email entities More feedback from users

slide-87
SLIDE 87

How Can You Help?

slide-88
SLIDE 88

How Can You Help?

slide-89
SLIDE 89

How Can You Help?

 + 🛡

slide-90
SLIDE 90

How Can You Help?

 + 🛡 🏧

slide-91
SLIDE 91

How Can You Help?

 + 🛡 🏧 + 🤒

slide-92
SLIDE 92

Go Team!

  
 😎 📩 🤪

💱

slide-93
SLIDE 93

Questions?

Please Provide Your Feedback


http://bit.ly/amazing-drupal-emails

Sprint Tomorrow


Ping @zengenuity in Drupal Slack