TYPO3 and MailChimp : Advanced newsletter integration

Company Name Here

Advanced Newsletter Integration

TYPO3 and MailChimp

• MailChimp goodies

• Futur release

• Question and comments

• Newsletter tips tips

• Example

• Introduction

• MailChimp

• How does it work

• Plugin component

• TypoScript setup

T3CON12 Québec

Introduction Who are we? We are Qc média!

• Based in Quebec City • Created in 2007 • TYPO3 since 2006 • Many TYPO3 conferences

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

TYPO3 and MailChimp Advanced Newsletter Integration

Introduction Newsletter problematic

• Old technology and less possibilities for design

• Painful email reader design compliance

• Multiple individual step process from design to delivery

• Probably need to maintain local and remote user list

• Spam (Reporting, blacklisting, etc..)

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example


Introduction Newsletter problematic

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example


MailChimp What is this?

“ MailChimp helps you design email newsletters, share them on social networks, integrate with

services you already use, and track your results. It's like your own personal publishing platform. “


•  Delivery system •  Full-featured API •  Dynamic content •  Custom tags •  Solid testing tools •  Advanced spam

fighting tools

•  Social Sharing Tools •  Comments and

interaction service •  Campaign Archives •  Mobile integration •  Advanced analytics

and reporting

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

MailChimp Full-featured API

Features •  Sync email with your

customer database •  Programmable campaign

creation and sending •  Campaign data and stats

reporting through API •  List, segment and targeting

management •  Templating customization •  Testing and security •  Many different helpers •  Dynamic markers and tags


Connectivity •  XML-RPC, HTTP GET & POST •  JSON, XML, lolcode •  Twitter, Facebook, Tumblr, G+

integration

Extendability and ease of use •  PHP, Perl, Python, .NET,

ActionScript, etc. available SDK •  Hundreds of plugins

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

MailChimp Actual state of integration TYPO3 and MailChimp


API methods (à améliorer) •  Sync (remote & local) •  getPages •  getContent •  setConfig •  getListId •  Cleanup •  sendTest •  send

Features •  Campaign creation •  Campaign sending •  Campaign cleanup •  Local to remote list

sync (fe_users, tt_address)

•  Local to remote template sync

•  Newsletter testing

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

MailChimp Flexible pricing TYPO3 and MailChimp


Monthly plans

Prepaid plans

Free plan • Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

MailChimp Advanced analytics and reporting TYPO3 and MailChimp


• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

How does it work Two extension approach TYPO3 and MailChimp


qm_mailchimp •  MailChimp Api wrap

up •  Easy update of API

features •  Services, tasks and

libraries •  Easy replacement of

delivery system (Campaign monitor, Constant Contact, etc...)

qm_newsletter •  Module and plugins •  qm_mailchimp usage

through a service •  TypoScript config and

templating •  Sync works with

tt_address and fe_users •  Templating through

TemplaVoila

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

How does it work Service and API Overlay TYPO3 and MailChimp


qm_newsletter

qm_mailchimp

TYPO3 SERVICE

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

How does it work TYPO3 and MailChimp

Advanced Newsletter Integration 1. Install qm_mailchimp and qm_newsletter

2. Configure your API key (given in your MailChimp account)

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example


Advanced Newsletter Integration 3. Load the static template in your newsletter archive page tree only (Important !!)

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example


Advanced Newsletter Integration 4. On the MailChimp side, create a list

5. and a template (or use one between hundreds available for free)

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example


Advanced Newsletter Integration 5. Manually run the scheduler task to preload data

6. Create a local newsletter address list record

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example


Advanced Newsletter Integration 7. Edit the record and select the corresponding MailChimp list

You can also manually add fe_user or tt_address records!

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example


Advanced Newsletter Integration 8. Create a TemplaVoila Template Object and Data Structure and associate the MailChimp remote template with the TO

Set a be_layout template file so your backend looks like your newsletter !

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example



• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example


Advanced Newsletter Integration 9. The fun begins! Tweak your template and put your content to get a cool looking newsletter!

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example


Advanced Newsletter Integration 9. Ready to send? Hop on the Newsletter backend module. The backend module has four steps :

Step #1 : Preview and validation Step #2 : Meta configuration Step #3 : Unlimited testing Step #4 : Confirm and send

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example


Advanced Newsletter Integration 10. The first step allows you to preview your newsletter. Everything is fine and ready to send if you see the preview. • Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example


Advanced Newsletter Integration 11. Second step allows you to enter the campaign context information.

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example


Advanced Newsletter Integration Step 2 required Fields : 1.  Official name of your campaign 2.  Email subject 3.  MailChimp exact “From Name” 4.  MailChimp exact “Reply To”

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example


Advanced Newsletter Integration 12. Third step is for testing. Send as many as needed.

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example


Advanced Newsletter Integration 13. Last step! Confirm and send to the selected list !

You’re done !!!

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

Plugin Component TYPO3 and MailChimp


Scheduler Task Frontend plugin

Backend module

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

qm_mailchimp qm_newsletter

TYPO3 Service

MailChimp PHP SDK TCA Manipulation

Plugin Component Scheduler Task TYPO3 and MailChimp


Standalone CLI also available for CRON jobs!

qm_mailchimp is packaged with a scheduler task that allows you to :

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

•  Local to remote list sync (fe_users, tt_address)

•  Local to remote template sync

Plugin Component Frontend Plugin TYPO3 and MailChimp


Method #1 : MailChimp embed code

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

Plugin Component Frontend Plugin TYPO3 and MailChimp


Method #2 : Pure Typoscript (in this case it’s Powermail)

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

Plugin Component TYPO3 service TYPO3 and MailChimp


• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

The goal of the service is to abstract me !

qm_mailchimp offers a service with the following functions : •  Sync (remote & local) •  getPages •  getContent •  setConfig •  getListId •  Cleanup •  sendTest •  send

Plugin Component MailChimp PHP SDK TYPO3 and MailChimp


• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

Available here : apidocs.mailchimp.com We used version 1.3 for our extensions J

Plugin Component Backend Module TYPO3 and MailChimp


• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

We saw it in the « How does it work » part. Do you want to see it again??

Plugin Component TCA Manipulation TYPO3 and MailChimp


• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

Well… it talk by itself, doesn’t it?

TypoScript setup Basic config TYPO3 and MailChimp


Config { renderCharset = UTF-8 removeDefaultJS = 1 disablePrefixComment = 1 baseURL = {$config.baseURL} absRefPrefix = {$config.baseURL} locale_all = fr_FR disableCharsetHeader = 1 xhtml_cleaning = 0 typolinkCheckRootline = 1 typolinkEnableLinksAcrossDomains = 1

} page.bodyTagAdd = leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="-webkit-text-size-adjust: none;margin: 0;padding: 0;background-color: #323232;width: 100% !important;"

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

TypoScript setup Templating TypoScript TYPO3 and MailChimp


All the templating Typoscript comes from this : typo3/sysext/css_styled_content/static/v4.4/setup.txt

Example : tt_content.textpic > tt_content.textpic = COA tt_content.textpic { 10 < temp.textpic.30 #image a droite 50 < temp.textpic.20 50.if.value.field = imageorient 50.if.equals = 25 50.wrap = <tr><td valign="top" style="padding-right: 10px;">|</td>

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

TypoScript setup Templating TypoScript TYPO3 and MailChimp


#image a droite 60 < temp.textpic.10 60.if.value.field = imageorient 60.if.equals = 25 60.wrap = <td valign="top">|</td></tr> #image en haut 70 < temp.textpic.10 70.if.value.field = imageorient 70.if.equals = 0 70.wrap = <tr><td style="text-align: center; padding-bottom: 16px;">|</td></tr> #image en haut 80 < temp.textpic.20 80.if.value.field = imageorient 80.if.equals = 0 80.wrap = <tr><td>|</td></tr>

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

MailChimp Goodies TYPO3 and MailChimp


Dynamic Markers *|ARCHIVE|* The full Campaign Archive URL. *|COMMENTS_URL|* Facebook Comments URL. *|MC:TOC|* Helps you easily create a table of contents for your newsletter. *|LIST:NAME|* Displays the name of your list.

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

MailChimp Goodies TYPO3 and MailChimp


*|LIST:COMPANY|* Displays the name of your company as defined in the list settings. *|UNSUB|* Gives your recipients the opportunity leave your list (Required By Law). *|FACEBOOK:LIKE|* Add this merge tag into your campaign

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

Future release TYPO3 and MailChimp

Advanced Newsletter Integration 1. Add group and segment selection to list selection

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

Future release TYPO3 and MailChimp

Advanced Newsletter Integration 2. Improve synchronisation of large lists by adding batch synching and sync conditions

• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

3. Remote to local synching (fe_users, tt_address)

4. Add analytics and reporting (Backend module?)

Questions ???


• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example


• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

Newsletter quick tips 1.  KISS 2.  Table of content 3.  HTML tables for layout 4.  Inline CSS as much as possible 5.  No padding for block elements 6.  Use td’s padding or GIF spacers 7.  Alt tags for your images 8.  Don’t try to make it pixel perfect in every

reader (Mind losing danger)


• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

Example


• Introduction

• MailChimp





• Futur release

• Questions

• Newsletter tips

• Example

Example

Technology

TYPO3 and MailChimp : Advanced newsletter integration