This presentation covers methods and ideas that allows TYPO3 administrators to seamlessly use MailChimp (or any other newsletter system) and TYPO3. These system are more and more popular these days so we need a modern way of integrating functionnalities within TYPO3. Usage of newsletter APIs, efficient plugin development theory based on services, integration and flexibility of the solution. Demonstration of qm_newsletter and qm_mailchimp.

1. Company Name Here
TYPO3 and MailChimp
Advanced Newsletter Integration
• Introduction • MailChimp goodies
T3CON12
Québec • MailChimp • Futur release
• How does it work • Question and comments
• Plugin component • Newsletter tips tips
• TypoScript setup • Example

2. Introduction
Who are we? We are Qc média! TYPO3 and MailChimp
Advanced Newsletter Integration
• Introduction
• Based in Quebec City
• MailChimp
• Created in 2007
• TYPO3 since 2006 • How does it work
• Many TYPO3 conferences • Plugin component
• TypoScript setup
• MailChimp goodies
• Futur release
• Questions
• Newsletter tips
• Example

3. Introduction
TYPO3 and MailChimp
Newsletter problematic Advanced Newsletter Integration
• Introduction
• Old technology and less
possibilities for design
• MailChimp
• Painful email reader • How does it work
design compliance
• Plugin component
• Multiple individual step
• TypoScript setup
process from design to
delivery
• MailChimp goodies
• Probably need to • Futur release
maintain local and • Questions
remote user list
• Newsletter tips
• Spam (Reporting,
• Example
blacklisting, etc..)

4. Introduction
TYPO3 and MailChimp
Newsletter problematic Advanced Newsletter Integration
• Introduction
• MailChimp
• How does it work
• Plugin component
• TypoScript setup
• MailChimp goodies
• Futur release
• Questions
• Newsletter tips
• Example

5. MailChimp
TYPO3 and MailChimp
What is this? Advanced Newsletter Integration
“ MailChimp helps you design email newsletters,
• Introduction
share them on social networks, integrate with
services you already use, and track your results. • MailChimp
It's like your own personal publishing platform. “ • How does it work
• Plugin component
• TypoScript setup
• Delivery system • Social Sharing Tools • MailChimp goodies
• Full-featured API • Comments and
• Futur release
• Dynamic content interaction service
Custom tags • Questions
• • Campaign Archives
• Solid testing tools • Mobile integration • Newsletter tips
• Advanced spam • Advanced analytics • Example
fighting tools and reporting

6. MailChimp
TYPO3 and MailChimp
Full-featured API Advanced Newsletter Integration
Features Connectivity
• Sync email with your • XML-RPC, HTTP GET & POST • Introduction
customer database • JSON, XML, lolcode • MailChimp
• Programmable campaign • Twitter, Facebook, Tumblr, G+
creation and sending integration • How does it work
• Campaign data and stats
reporting through API • Plugin component
• List, segment and targeting Extendability and ease of use
• PHP, Perl, Python, .NET, • TypoScript setup
management
• Templating customization ActionScript, etc. available SDK • MailChimp goodies
• Testing and security • Hundreds of plugins
• Many different helpers • Futur release
• Dynamic markers and tags
• Questions
• Newsletter tips
• Example

7. MailChimp
TYPO3 and MailChimp
Actual state of integration Advanced Newsletter Integration
Features API methods (à • Introduction
• Campaign creation améliorer)
• MailChimp
• Campaign sending • Sync (remote & local)
• Campaign cleanup • getPages • How does it work
• Local to remote list • getContent • Plugin component
sync (fe_users, • setConfig
• TypoScript setup
tt_address) • getListId
• Local to remote • Cleanup • MailChimp goodies
template sync • sendTest • Futur release
• Newsletter testing • send
• Questions
• Newsletter tips
• Example

8. MailChimp
TYPO3 and MailChimp
Flexible pricing Advanced Newsletter Integration
Free plan • Introduction
• MailChimp
• How does it work
• Plugin component
Monthly plans • TypoScript setup
• MailChimp goodies
• Futur release
• Questions
Prepaid plans
• Newsletter tips
• Example

9. MailChimp
TYPO3 and MailChimp
Advanced analytics and reporting Advanced Newsletter Integration
• Introduction
• MailChimp
• How does it work
• Plugin component
• TypoScript setup
• MailChimp goodies
• Futur release
• Questions
• Newsletter tips
• Example

10. How does it work
TYPO3 and MailChimp
Two extension approach Advanced Newsletter Integration
qm_mailchimp qm_newsletter • Introduction
• MailChimp Api wrap • Module and plugins
up • qm_mailchimp usage • MailChimp
• Easy update of API through a service • How does it work
features • TypoScript config and
• Plugin component
• Services, tasks and templating
libraries • Sync works with • TypoScript setup
• Easy replacement of tt_address and fe_users • MailChimp goodies
delivery system • Templating through
• Futur release
(Campaign monitor, TemplaVoila
Constant Contact, • Questions
etc...) • Newsletter tips
• Example

11. How does it work
TYPO3 and MailChimp
Service and API Overlay Advanced Newsletter Integration
qm_newsletter
• Introduction
• MailChimp
• How does it work
TYPO3 SERVICE
• Plugin component
• TypoScript setup
• MailChimp goodies
qm_mailchimp
• Futur release
• Questions
• Newsletter tips
• Example

12. How does it work
TYPO3 and MailChimp
Advanced Newsletter Integration
1. Install qm_mailchimp and qm_newsletter
• Introduction
• MailChimp
• How does it work
2. Configure your API key (given in your
• Plugin component
MailChimp account)
• TypoScript setup
• MailChimp goodies
• Futur release
• Questions
• Newsletter tips
• Example

13. How does it work
TYPO3 and MailChimp
Advanced Newsletter Integration
3. Load the static template in your newsletter
archive page tree only (Important !!)
• Introduction
• MailChimp
• How does it work
• Plugin component
• TypoScript setup
• MailChimp goodies
• Futur release
• Questions
• Newsletter tips
• Example

14. How does it work
TYPO3 and MailChimp
Advanced Newsletter Integration
4. On the MailChimp side, create a list
• Introduction
• MailChimp
• How does it work
• Plugin component
• TypoScript setup
5. and a template • MailChimp goodies
(or use one between • Futur release
hundreds available
• Questions
for free)
• Newsletter tips
• Example

15. How does it work
TYPO3 and MailChimp
Advanced Newsletter Integration
5. Manually run the scheduler task to preload data
• Introduction
• MailChimp
• How does it work
• Plugin component
6. Create a local newsletter address list record
• TypoScript setup
• MailChimp goodies
• Futur release
• Questions
• Newsletter tips
• Example

16. How does it work
TYPO3 and MailChimp
7. Edit the record and select the corresponding Advanced Newsletter Integration
MailChimp list
• Introduction
• MailChimp
• How does it work
• Plugin component
• TypoScript setup
• MailChimp goodies
You can also • Futur release
manually add fe_user
or tt_address records! • Questions
• Newsletter tips
• Example

17. How does it work
TYPO3 and MailChimp
Advanced Newsletter Integration
8. Create a TemplaVoila Template Object and
Data Structure and associate the MailChimp
• Introduction
remote template with the TO
• MailChimp
• How does it work
• Plugin component
• TypoScript setup
Set a be_layout
template file so your • MailChimp goodies
backend looks like
your newsletter ! • Futur release
• Questions
• Newsletter tips
• Example

18. How does it work
TYPO3 and MailChimp
Advanced Newsletter Integration
• Introduction
• MailChimp
• How does it work
• Plugin component
• TypoScript setup
• MailChimp goodies
• Futur release
• Questions
• Newsletter tips
• Example

19. How does it work
TYPO3 and MailChimp
9. The fun begins! Tweak your template and put Advanced Newsletter Integration
your content to get a cool looking newsletter!
• Introduction
• MailChimp
• How does it work
• Plugin component
• TypoScript setup
• MailChimp goodies
• Futur release
• Questions
• Newsletter tips
• Example

20. How does it work
TYPO3 and MailChimp
Advanced Newsletter Integration
9. Ready to send? Hop on the Newsletter backend
module. The backend module has four steps :
• Introduction
Step #1 : Preview and validation • MailChimp
Step #2 : Meta configuration • How does it work
Step #3 : Unlimited testing
• Plugin component
Step #4 : Confirm and send
• TypoScript setup
• MailChimp goodies
• Futur release
• Questions
• Newsletter tips
• Example

21. How does it work
TYPO3 and MailChimp
Advanced Newsletter Integration
10. The first step allows you to preview your
newsletter. Everything is fine and ready to send if
• Introduction
you see the preview.
• MailChimp
• How does it work
• Plugin component
• TypoScript setup
• MailChimp goodies
• Futur release
• Questions
• Newsletter tips
• Example

22. How does it work
TYPO3 and MailChimp
11. Second step allows you to enter the campaign Advanced Newsletter Integration
context information.
• Introduction
• MailChimp
• How does it work
• Plugin component
• TypoScript setup
• MailChimp goodies
• Futur release
• Questions
• Newsletter tips
• Example

23. How does it work
TYPO3 and MailChimp
Advanced Newsletter Integration
Step 2 required Fields :
1. Official name of your campaign
• Introduction
2. Email subject
3. MailChimp exact “From Name” • MailChimp
4. MailChimp exact “Reply To” • How does it work
• Plugin component
• TypoScript setup
• MailChimp goodies
• Futur release
• Questions
• Newsletter tips
• Example

24. How does it work
TYPO3 and MailChimp
12. Third step is for testing. Send as many as Advanced Newsletter Integration
needed.
• Introduction
• MailChimp
• How does it work
• Plugin component
• TypoScript setup
• MailChimp goodies
• Futur release
• Questions
• Newsletter tips
• Example

25. How does it work
TYPO3 and MailChimp
Advanced Newsletter Integration
13. Last step! Confirm and send to the selected
list !
• Introduction
• MailChimp
• How does it work
• Plugin component
• TypoScript setup
• MailChimp goodies
• Futur release
• Questions
• Newsletter tips
You’re done !!! • Example

26. Plugin Component
qm_mailchimp qm_newsletter TYPO3 and MailChimp
Advanced Newsletter Integration
• Introduction
Scheduler Task Frontend plugin • MailChimp
• How does it work
TYPO3 Service Backend module • Plugin component
• TypoScript setup
• MailChimp goodies
MailChimp PHP SDK TCA Manipulation
• Futur release
• Questions
• Newsletter tips
• Example

27. Plugin Component
TYPO3 and MailChimp
Scheduler Task Advanced Newsletter Integration
• Introduction
qm_mailchimp is packaged with a
• MailChimp
scheduler task that allows you to :
• How does it work
• Local to remote list sync
• Plugin component
(fe_users, tt_address)
• Local to remote template sync • TypoScript setup
• MailChimp goodies
• Futur release
Standalone CLI
• Questions
also available
for CRON jobs! • Newsletter tips
• Example

28. Plugin Component
TYPO3 and MailChimp
Frontend Plugin Advanced Newsletter Integration
• Introduction
• MailChimp
• How does it work
• Plugin component
• TypoScript setup
• MailChimp goodies
• Futur release
Method #1 : MailChimp embed code • Questions
• Newsletter tips
• Example

29. Plugin Component
TYPO3 and MailChimp
Frontend Plugin Advanced Newsletter Integration
• Introduction
• MailChimp
• How does it work
• Plugin component
• TypoScript setup
• MailChimp goodies
• Futur release
• Questions
• Newsletter tips
Method #2 : Pure Typoscript (in this case it’s Powermail)
• Example

30. Plugin Component
TYPO3 and MailChimp
TYPO3 service Advanced Newsletter Integration
qm_mailchimp offers a service with the • Introduction
following functions : • MailChimp
• Sync (remote & local)
• getPages • How does it work
• getContent • Plugin component
• setConfig • TypoScript setup
• getListId
• Cleanup • MailChimp goodies
• sendTest • Futur release
• send The goal of the
• Questions
service is to
abstract me ! • Newsletter tips
• Example

31. Plugin Component
TYPO3 and MailChimp
MailChimp PHP SDK Advanced Newsletter Integration
Available here : apidocs.mailchimp.com • Introduction
• MailChimp
• How does it work
We used version 1.3 for our extensions J
• Plugin component
• TypoScript setup
• MailChimp goodies
• Futur release
• Questions
• Newsletter tips
• Example

32. Plugin Component
TYPO3 and MailChimp
Backend Module Advanced Newsletter Integration
• Introduction
• MailChimp
We saw it in the « How does it work » • How does it work
part.
• Plugin component
• TypoScript setup
Do you want to see it again??
• MailChimp goodies
• Futur release
• Questions
• Newsletter tips
• Example

33. Plugin Component
TYPO3 and MailChimp
TCA Manipulation Advanced Newsletter Integration
• Introduction
• MailChimp
Well… it talk by itself, doesn’t it? • How does it work
• Plugin component
• TypoScript setup
• MailChimp goodies
• Futur release
• Questions
• Newsletter tips
• Example

34. TypoScript setup
TYPO3 and MailChimp
Basic config Advanced Newsletter Integration
Config {
• Introduction
renderCharset = UTF-8
removeDefaultJS = 1 • MailChimp
disablePrefixComment = 1
• How does it work
baseURL = {$config.baseURL}
absRefPrefix = {$config.baseURL} • Plugin component
locale_all = fr_FR
• TypoScript setup
disableCharsetHeader = 1
xhtml_cleaning = 0 • MailChimp goodies
typolinkCheckRootline = 1
typolinkEnableLinksAcrossDomains = 1 • Futur release
} • Questions
page.bodyTagAdd = leftmargin="0" marginwidth="0"
topmargin="0" marginheight="0" offset="0" style="-webkit- • Newsletter tips
text-size-adjust: none;margin: 0;padding: 0;background- • Example
color: #323232;width: 100% !important;"

35. TypoScript setup
TYPO3 and MailChimp
Templating TypoScript Advanced Newsletter Integration
All the templating Typoscript comes from this :
• Introduction
typo3/sysext/css_styled_content/static/v4.4/setup.txt
• MailChimp
Example :
• How does it work
tt_content.textpic >
tt_content.textpic = COA • Plugin component
tt_content.textpic {
• TypoScript setup
10 < temp.textpic.30 • MailChimp goodies
#image a droite • Futur release
50 < temp.textpic.20 • Questions
50.if.value.field = imageorient
50.if.equals = 25 • Newsletter tips
50.wrap = <tr><td valign="top" style="padding-right: • Example
10px;">|</td>

36. TypoScript setup
TYPO3 and MailChimp
Templating TypoScript Advanced Newsletter Integration
#image a droite
60 < temp.textpic.10 • Introduction
60.if.value.field = imageorient
• MailChimp
60.if.equals = 25
60.wrap = <td valign="top">|</td></tr> • How does it work
• Plugin component
#image en haut
70 < temp.textpic.10 • TypoScript setup
70.if.value.field = imageorient
• MailChimp goodies
70.if.equals = 0
70.wrap = <tr><td style="text-align: center; padding- • Futur release
bottom: 16px;">|</td></tr>
• Questions
#image en haut • Newsletter tips
80 < temp.textpic.20
• Example
80.if.value.field = imageorient
80.if.equals = 0
80.wrap = <tr><td>|</td></tr>

37. MailChimp Goodies
TYPO3 and MailChimp
Advanced Newsletter Integration
Dynamic Markers
• Introduction
*|ARCHIVE|* • MailChimp
The full Campaign Archive URL.
• How does it work
*|COMMENTS_URL|* • Plugin component
Facebook Comments URL.
• TypoScript setup
*|MC:TOC|* • MailChimp goodies
Helps you easily create a table of contents for your
newsletter. • Futur release
• Questions
*|LIST:NAME|*
Displays the name of your list. • Newsletter tips
• Example

38. MailChimp Goodies
TYPO3 and MailChimp
Advanced Newsletter Integration
*|LIST:COMPANY|*
• Introduction
Displays the name of your company as defined in the list
settings. • MailChimp
• How does it work
*|UNSUB|*
Gives your recipients the opportunity leave your list • Plugin component
(Required By Law).
• TypoScript setup
*|FACEBOOK:LIKE|* • MailChimp goodies
Add this merge tag into your campaign
• Futur release
• Questions
• Newsletter tips
• Example

39. Future release
TYPO3 and MailChimp
1. Add group and segment selection to list Advanced Newsletter Integration
selection
• Introduction
• MailChimp
• How does it work
• Plugin component
• TypoScript setup
• MailChimp goodies
• Futur release
• Questions
• Newsletter tips
• Example

40. Future release
TYPO3 and MailChimp
2. Improve synchronisation of large lists by adding Advanced Newsletter Integration
batch synching and sync conditions
• Introduction
3. Remote to local synching (fe_users, tt_address) • MailChimp
4. Add analytics and reporting (Backend module?) • How does it work
• Plugin component
• TypoScript setup
• MailChimp goodies
• Futur release
• Questions
• Newsletter tips
• Example

41. TYPO3 and MailChimp
Advanced Newsletter Integration
• Introduction
• MailChimp
• How does it work
Questions ??? • Plugin component
• TypoScript setup
• MailChimp goodies
• Futur release
• Questions
• Newsletter tips
• Example

42. Newsletter quick tips
TYPO3 and MailChimp
1. KISS Advanced Newsletter Integration
2. Table of content
3. HTML tables for layout • Introduction
4. Inline CSS as much as possible • MailChimp
5. No padding for block elements
• How does it work
6. Use td’s padding or GIF spacers
7. Alt tags for your images • Plugin component
8. Don’t try to make it pixel perfect in every • TypoScript setup
reader (Mind losing danger) • MailChimp goodies
• Futur release
• Questions
• Newsletter tips
• Example

43. Example
TYPO3 and MailChimp
Advanced Newsletter Integration
• Introduction
• MailChimp
• How does it work
• Plugin component
• TypoScript setup
• MailChimp goodies
• Futur release
• Questions
• Newsletter tips
• Example

44. Example
TYPO3 and MailChimp
Advanced Newsletter Integration
• Introduction
• MailChimp
• How does it work
• Plugin component
• TypoScript setup
• MailChimp goodies
• Futur release
• Questions
• Newsletter tips
• Example