0
Company Name HereTYPO3 and MailChimpAdvanced Newsletter Integration                  • Introduction          • MailChimp g...
Introduction  Who are we? We are Qc média!    TYPO3 and MailChimp                                 Advanced Newsletter Inte...
Introduction                                  TYPO3 and MailChimp        Newsletter problematic   Advanced Newsletter Inte...
Introduction                          TYPO3 and MailChimpNewsletter problematic   Advanced Newsletter Integration         ...
MailChimp                                                      TYPO3 and MailChimp                   What is this?        ...
MailChimp                                                                        TYPO3 and MailChimp                 Full-...
MailChimp                                                      TYPO3 and MailChimp        Actual state of integration     ...
MailChimp                                TYPO3 and MailChimp            Flexible pricing   Advanced Newsletter Integration...
MailChimp                                    TYPO3 and MailChimpAdvanced analytics and reporting   Advanced Newsletter Int...
How does it work                                                       TYPO3 and MailChimp        Two extension approach  ...
How does it work                           TYPO3 and MailChimpService and API Overlay   Advanced Newsletter Integration   ...
How does it work                                             TYPO3 and MailChimp                                          ...
How does it work                                                  TYPO3 and MailChimp                                     ...
How does it work                                           TYPO3 and MailChimp                                          Ad...
How does it work                                                      TYPO3 and MailChimp                                 ...
How does it work                                                         TYPO3 and MailChimp7. Edit the record and select ...
How does it work                                                      TYPO3 and MailChimp                                 ...
How does it work                    TYPO3 and MailChimp                   Advanced Newsletter Integration                 ...
How does it work                                                  TYPO3 and MailChimp9. The fun begins! Tweak your templat...
How does it work                                                   TYPO3 and MailChimp                                    ...
How does it work                                                       TYPO3 and MailChimp                                ...
How does it work                                                    TYPO3 and MailChimp11. Second step allows you to enter...
How does it work                                      TYPO3 and MailChimp                                     Advanced New...
How does it work                                                  TYPO3 and MailChimp12. Third step is for testing. Send a...
How does it work                                                   TYPO3 and MailChimp                                    ...
Plugin Componentqm_mailchimp          qm_newsletter         TYPO3 and MailChimp                                           ...
Plugin Component                                                  TYPO3 and MailChimp           Scheduler Task            ...
Plugin Component                                     TYPO3 and MailChimp   Frontend Plugin                  Advanced Newsl...
Plugin Component                                                             TYPO3 and MailChimp             Frontend Plug...
Plugin Component                                                  TYPO3 and MailChimp               TYPO3 service         ...
Plugin Component                                             TYPO3 and MailChimp        MailChimp PHP SDK                 ...
Plugin Component                                         TYPO3 and MailChimp      Backend Module                    Advanc...
Plugin Component                                        TYPO3 and MailChimp      TCA Manipulation                 Advanced...
TypoScript setup                                                             TYPO3 and MailChimp                    Basic ...
TypoScript setup                                                            TYPO3 and MailChimp          Templating TypoSc...
TypoScript setup                                                         TYPO3 and MailChimp          Templating TypoScrip...
MailChimp Goodies                                                        TYPO3 and MailChimp                              ...
MailChimp Goodies                                                            TYPO3 and MailChimp                          ...
Future release                                              TYPO3 and MailChimp1. Add group and segment selection to list ...
Future release                                                       TYPO3 and MailChimp2. Improve synchronisation of larg...
TYPO3 and MailChimp                Advanced Newsletter Integration                   • Introduction                   • Ma...
Newsletter quick tips                                                     TYPO3 and MailChimp1.    KISS                   ...
Example           TYPO3 and MailChimp          Advanced Newsletter Integration             • Introduction             • Ma...
Example           TYPO3 and MailChimp          Advanced Newsletter Integration             • Introduction             • Ma...
Upcoming SlideShare
Loading in...5
×

TYPO3 and MailChimp : Advanced newsletter integration

5,757

Published on

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.

Published in: Technology

Transcript of "TYPO3 and MailChimp : Advanced newsletter integration"

  1. 1. Company Name HereTYPO3 and MailChimpAdvanced 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. 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. 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. 4. Introduction TYPO3 and MailChimpNewsletter problematic Advanced Newsletter Integration • Introduction • MailChimp • How does it work • Plugin component • TypoScript setup • MailChimp goodies • Futur release • Questions • Newsletter tips • Example
  5. 5. MailChimp TYPO3 and MailChimp What is this? Advanced Newsletter Integration“ MailChimp helps you design email newsletters, • Introduction share them on social networks, integrate withservices you already use, and track your results. • MailChimpIts 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. 6. MailChimp TYPO3 and MailChimp Full-featured API Advanced Newsletter IntegrationFeatures 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. 7. MailChimp TYPO3 and MailChimp Actual state of integration Advanced Newsletter IntegrationFeatures 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. 8. MailChimp TYPO3 and MailChimp Flexible pricing Advanced Newsletter IntegrationFree plan • Introduction • MailChimp • How does it work • Plugin componentMonthly plans • TypoScript setup • MailChimp goodies • Futur release • QuestionsPrepaid plans • Newsletter tips • Example
  9. 9. MailChimp TYPO3 and MailChimpAdvanced 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. 10. How does it work TYPO3 and MailChimp Two extension approach Advanced Newsletter Integrationqm_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. 11. How does it work TYPO3 and MailChimpService 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. 12. How does it work TYPO3 and MailChimp Advanced Newsletter Integration1. Install qm_mailchimp and qm_newsletter • Introduction • MailChimp • How does it work2. Configure your API key (given in your • Plugin componentMailChimp account) • TypoScript setup • MailChimp goodies • Futur release • Questions • Newsletter tips • Example
  13. 13. How does it work TYPO3 and MailChimp Advanced Newsletter Integration3. Load the static template in your newsletterarchive page tree only (Important !!) • Introduction • MailChimp • How does it work • Plugin component • TypoScript setup • MailChimp goodies • Futur release • Questions • Newsletter tips • Example
  14. 14. How does it work TYPO3 and MailChimp Advanced Newsletter Integration4. On the MailChimp side, create a list • Introduction • MailChimp • How does it work • Plugin component • TypoScript setup5. and a template • MailChimp goodies(or use one between • Futur releasehundreds available • Questionsfor free) • Newsletter tips • Example
  15. 15. How does it work TYPO3 and MailChimp Advanced Newsletter Integration5. Manually run the scheduler task to preload data • Introduction • MailChimp • How does it work • Plugin component6. Create a local newsletter address list record • TypoScript setup • MailChimp goodies • Futur release • Questions • Newsletter tips • Example
  16. 16. How does it work TYPO3 and MailChimp7. Edit the record and select the corresponding Advanced Newsletter IntegrationMailChimp 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. 17. How does it work TYPO3 and MailChimp Advanced Newsletter Integration8. Create a TemplaVoila Template Object andData Structure and associate the MailChimp • Introductionremote 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. 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. 19. How does it work TYPO3 and MailChimp9. The fun begins! Tweak your template and put Advanced Newsletter Integrationyour 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. 20. How does it work TYPO3 and MailChimp Advanced Newsletter Integration9. Ready to send? Hop on the Newsletter backendmodule. 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. 21. How does it work TYPO3 and MailChimp Advanced Newsletter Integration10. The first step allows you to preview yournewsletter. Everything is fine and ready to send if • Introductionyou see the preview. • MailChimp • How does it work • Plugin component • TypoScript setup • MailChimp goodies • Futur release • Questions • Newsletter tips • Example
  22. 22. How does it work TYPO3 and MailChimp11. Second step allows you to enter the campaign Advanced Newsletter Integrationcontext information. • Introduction • MailChimp • How does it work • Plugin component • TypoScript setup • MailChimp goodies • Futur release • Questions • Newsletter tips • Example
  23. 23. How does it work TYPO3 and MailChimp Advanced Newsletter IntegrationStep 2 required Fields :1.  Official name of your campaign • Introduction2.  Email subject3.  MailChimp exact “From Name” • MailChimp4.  MailChimp exact “Reply To” • How does it work • Plugin component • TypoScript setup • MailChimp goodies • Futur release • Questions • Newsletter tips • Example
  24. 24. How does it work TYPO3 and MailChimp12. Third step is for testing. Send as many as Advanced Newsletter Integrationneeded. • Introduction • MailChimp • How does it work • Plugin component • TypoScript setup • MailChimp goodies • Futur release • Questions • Newsletter tips • Example
  25. 25. How does it work TYPO3 and MailChimp Advanced Newsletter Integration13. Last step! Confirm and send to the selectedlist ! • Introduction • MailChimp • How does it work • Plugin component • TypoScript setup • MailChimp goodies • Futur release • Questions • Newsletter tips You’re done !!! • Example
  26. 26. Plugin Componentqm_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. 27. Plugin Component TYPO3 and MailChimp Scheduler Task Advanced Newsletter Integration • Introductionqm_mailchimp is packaged with a • MailChimpscheduler 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. 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. 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 tipsMethod #2 : Pure Typoscript (in this case it’s Powermail) • Example
  30. 30. Plugin Component TYPO3 and MailChimp TYPO3 service Advanced Newsletter Integrationqm_mailchimp offers a service with the • Introductionfollowing 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. 31. Plugin Component TYPO3 and MailChimp MailChimp PHP SDK Advanced Newsletter IntegrationAvailable here : apidocs.mailchimp.com • Introduction • MailChimp • How does it workWe used version 1.3 for our extensions J • Plugin component • TypoScript setup • MailChimp goodies • Futur release • Questions • Newsletter tips • Example
  32. 32. Plugin Component TYPO3 and MailChimp Backend Module Advanced Newsletter Integration • Introduction • MailChimpWe saw it in the « How does it work » • How does it workpart. • Plugin component • TypoScript setupDo you want to see it again?? • MailChimp goodies • Futur release • Questions • Newsletter tips • Example
  33. 33. Plugin Component TYPO3 and MailChimp TCA Manipulation Advanced Newsletter Integration • Introduction • MailChimpWell… it talk by itself, doesn’t it? • How does it work • Plugin component • TypoScript setup • MailChimp goodies • Futur release • Questions • Newsletter tips • Example
  34. 34. TypoScript setup TYPO3 and MailChimp Basic config Advanced Newsletter IntegrationConfig { • 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} • Questionspage.bodyTagAdd = leftmargin="0" marginwidth="0"topmargin="0" marginheight="0" offset="0" style="-webkit- • Newsletter tipstext-size-adjust: none;margin: 0;padding: 0;background- • Examplecolor: #323232;width: 100% !important;"
  35. 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 • MailChimpExample : • How does it worktt_content.textpic >tt_content.textpic = COA • Plugin componenttt_content.textpic { • TypoScript setup10 < temp.textpic.30 • MailChimp goodies#image a droite • Futur release50 < temp.textpic.20 • Questions50.if.value.field = imageorient50.if.equals = 25 • Newsletter tips50.wrap = <tr><td valign="top" style="padding-right: • Example10px;">|</td>
  36. 36. TypoScript setup TYPO3 and MailChimp Templating TypoScript Advanced Newsletter Integration#image a droite60 < temp.textpic.10 • Introduction60.if.value.field = imageorient • MailChimp60.if.equals = 2560.wrap = <td valign="top">|</td></tr> • How does it work • Plugin component#image en haut70 < temp.textpic.10 • TypoScript setup70.if.value.field = imageorient • MailChimp goodies70.if.equals = 070.wrap = <tr><td style="text-align: center; padding- • Futur releasebottom: 16px;">|</td></tr> • Questions#image en haut • Newsletter tips80 < temp.textpic.20 • Example80.if.value.field = imageorient80.if.equals = 080.wrap = <tr><td>|</td></tr>
  37. 37. MailChimp Goodies TYPO3 and MailChimp Advanced Newsletter IntegrationDynamic Markers • Introduction*|ARCHIVE|* • MailChimpThe full Campaign Archive URL. • How does it work*|COMMENTS_URL|* • Plugin componentFacebook Comments URL. • TypoScript setup*|MC:TOC|* • MailChimp goodiesHelps you easily create a table of contents for yournewsletter. • Futur release • Questions*|LIST:NAME|*Displays the name of your list. • Newsletter tips • Example
  38. 38. MailChimp Goodies TYPO3 and MailChimp Advanced Newsletter Integration*|LIST:COMPANY|* • IntroductionDisplays the name of your company as defined in the listsettings. • MailChimp • How does it work*|UNSUB|*Gives your recipients the opportunity leave your list • Plugin component(Required By Law). • TypoScript setup*|FACEBOOK:LIKE|* • MailChimp goodiesAdd this merge tag into your campaign • Futur release • Questions • Newsletter tips • Example
  39. 39. Future release TYPO3 and MailChimp1. Add group and segment selection to list Advanced Newsletter Integrationselection • Introduction • MailChimp • How does it work • Plugin component • TypoScript setup • MailChimp goodies • Futur release • Questions • Newsletter tips • Example
  40. 40. Future release TYPO3 and MailChimp2. Improve synchronisation of large lists by adding Advanced Newsletter Integrationbatch synching and sync conditions • Introduction3. Remote to local synching (fe_users, tt_address) • MailChimp4. Add analytics and reporting (Backend module?) • How does it work • Plugin component • TypoScript setup • MailChimp goodies • Futur release • Questions • Newsletter tips • Example
  41. 41. TYPO3 and MailChimp Advanced Newsletter Integration • Introduction • MailChimp • How does it workQuestions ??? • Plugin component • TypoScript setup • MailChimp goodies • Futur release • Questions • Newsletter tips • Example
  42. 42. Newsletter quick tips TYPO3 and MailChimp1.  KISS Advanced Newsletter Integration2.  Table of content3.  HTML tables for layout • Introduction4.  Inline CSS as much as possible • MailChimp5.  No padding for block elements • How does it work6.  Use td’s padding or GIF spacers7.  Alt tags for your images • Plugin component8.  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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×