TYPO3 and MailChimp : Advanced newsletter integration
- 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