Upgrade to Pro — share decks privately, control downloads, hide ads and more …

London content modeling training

London content modeling training

Contentful Webinars

November 11, 2019
Tweet

More Decks by Contentful Webinars

Other Decks in Technology

Transcript

  1. Content Modeling in Contentful 1 Jim Ambras, Sr. Technical Trainer

    Will Robinson, Solutions Architecture Manager
  2. Topics today • Content model basics • Topics and assemblies

    • Rich text • Localization • Content aggregation • Experimentation & Personalization • Building the Colorful Lifestyle content model • Working with content as code Wi-fi: AKQA-Guest / discover
  3. Please raise your hand if you have previous experience with…

    • Drupal/ Acquia • AEM • Sitecore • Wordpress • Other
  4. Contentful lets you build digital products, fast 7 APIs JSON

    Structured content Reuse and repurpose content, independent of channel or language Composable stack, connected to other platforms, at cloud scale Integrate with digital delivery workflows for launch & optimization Decoupled architecture Agile workflows
  5. Create reusable content Reuse the same content across pages, properties,

    and channels 8 JSON output Rendered view Rich text editor view
  6. Manage all your content in one place Content models gives

    editors full control of all their content 9 Content variations Localized content Microcopy Content metadata Workflow metadata Design systems Content
  7. Early stakeholder involvement is key Create a Pool of Sample

    Designs • Conduct an audit of existing content • Create prototypes of future content • Assemble screen shots into a slide deck Create a draft model based on visible fields • Create a list of visible fields from instances of each content type • Reconcile similar fields to create a master list • Group fields into content types of appropriate size & define relationships Revise model for functionality & best practices • Add invisible “meta” fields (for queries, workflow, webhooks, etc.) • Optimize for content creators • Optimize for developers • Implement naming conventions QA: Validate with actual content • Try to “break” the content model by using it to build diverse instances or real world content Test with Content Creators • Watch authors use the content model (usability test) • Create documentation, help and job aids Test with Developers • Have developers QA the model against front-end, migration scripts, etc. Test with Designers • Have designers test the content model by creating a variety of designs Assemble key stakeholders to define strategy • Clarify business objectives • Agree on required functionality • Make strategic content architecture decisions STEP 1 STEP 2 STEP 3 STEP 4 STEP 5 STEP 6 STEP 7 STEP 8 14
  8. What should you store in Contentful? Content • Text •

    Images • Audio/Video • Geo location Micro-Copy • Field labels • Button text • Navigation Localized Content • Localization strategies • Translation permissions/workflows Content Metadata • SEO & Social Media • Images as content types • Tags for navigating the content model Process Metadata • Site functionality (sort, search, etc.) • Editorial workflow • Webhooks Content Components (“Assemblies”) • Atomic design – chunks not blobs • Giving content creators control over layout • Visual design systems 17
  9. Topics are reusable content components • Individually authorable • Pure

    content • No presentation options • Building block for assemblies
  10. Assemblies are reusable visual components • Not individually authorable •

    Contains topics • Includes presentation options • Assemblies can contain assemblies
  11. Content types can use inheritance 35 Product Name Manufacturer Color

    Product Type (reference) Shoe Size Sole type Heel type Pants Waist Length Type (formal, casual) Shirt Sleeve length Collar Fabric weight You can add or change fields that apply to every product without duplicating the change for every product type
  12. Content types can use composition 36 Press Release Title Body

    SEO Content Contact Info Location Info SEO Content Page title Meta description OG tags Location Info Name Geo coordinates Contact Info Name Title Email address Adapted from Deane Barker’s “Real World Content Modeling”
  13. Field level localization vs entry level localization Title Text (FR)

    Field Level Localization Entry Level Localization using Localization Objects Title Slug Text (EN) Text (FR) ... Title Slug Ref 1 Ref 2 ... Title Text (EN) 39
  14. The field Localized is an array that contains an entry

    for each locale Entry level localization - two content types 40 1 2
  15. Viewing content puts user into segment by category Works for

    anonymous as well as known users Personalization Related Content Easy to create a “You also may like…” links Navigation Menus can point to content of various categories Analytics Analytics tools can show site viewing behavior by categories Why categorize your content?
  16. Integrations the Contentful way Enable integrations where the journey of

    the practitioner overlaps Monolithic, inflexible, opinionated. Lean integrations of best-of-breed services, modular, custom tailored. Deployment Translation SEO Search Productivity Marketing Editorial Ecommerce Deployment Translation SEO Search Productivity Marketing Editorial Ecommerce
  17. Summary: Contentful Optimizely App Multi-platform Take your content and experiments

    to any platform. Structured content Control in a structured and API-first environment. Integrated No need to ship new code to run an experiment. High performance Render times under < 200ms
  18. Hero Featured CTA Page Title: “Homepage” Slug: “home” Component: []

    Enabling experimentation using the App CTA (control) CTA (variation) Variation container
  19. import contentfulSdk from 'contentful'; const optimizelyClient = new Optimizely({ dataFile

    }); const user = getUser(); const variationEntry = await contentfulSdk.getEntry(entryId); const variation = optimizelyClient.activate( variationEntry.experimentKey, user.userId ); const variationEntryId = variationEntry.meta[variation]; const variationContent = await contentfulSdk.getEntry(variationEntryId); Experimentation layer Contentful SDK Optimizely SDK Experimentation layer Contentful SDK Optimizely SDK
  20. Contentful Content variations Map content to experiments Optimizely Experiments Audiences

    / targeting Analytics Customer’s Code API stitching Tracking 67 Separation of concerns Who does what?
  21. Need for structured content Hero Featured CTA Page Title: “Homepage”

    Slug: “home” Component: [] “Get the guides”
  22. Outcome: new phone research experience for customers & prospects 77

    RESULTS: 9.2% Increase in prospect cart start rate 18.5% Decrease in bounce rate
  23. Seamless & extensible customer support experiences Decreased time on content

    changes; went from one month to just minutes S O L U T I O N Knowledge base I N D U S T R Y Financial Services R E S U L T S • From completely hard coded Help Center and .com to easily searchable answers with Algolia including FAQs with setup instructions, product walkthroughs and more Integration with Zendesk allows for easy triage and ticketing workflows minus the context switching • Increased innovation & sophistication: now teams can test and experiment on visuals, without wasting dev hours ↓
  24. RFP is a lift and shift of Colorful • Speed

    of content creation/changes • Great SEO • Fast load time: DomContentLoaded event < 500ms • Seamless integration with a DAM (Cloudinary or Bynder) • Designed for A/B testing • Designed for personalization • Designed to incorporate a PIM in a future release Bottom footer row (legal content) is authored/controlled by parent company
  25. 10 minute content model reviews • Key content types •

    Which are topics, which are assemblies • How deep is your content model • Where are you using content type inheritance? • Where are you using content type composition? • What tradeoffs did you make in the design? • How do you plan on testing your model? • Which objectives did you address? • Which objectives did you push out?
  26. 1. Experiment with a content model in the web app

    where you can see JSON output 2. Create the environments you need for CI/CD. Optionally use scripts to clone the master environment. 3. Create a script to programmatically build the full content model 4. Create migration scripts to move content into and out of the content model 5. After testing, propagate your changes into the Prod environment 5 Steps
  27. Explore what content types, fields, validations etc. look like as

    JSON to speed your future script writing. Experiment with different data models. Try to add complex relationships in your model, how is that represented in JSON? 1. Create content types in the web app
  28. Every space has one master environment by default. Each environment

    is a full isolated clone of the master environment. Includes a full copy of all the content types, entries, assets, locales and UI extensions. You can setup as many environments as your workflow requires. 2. Set up your initial environments
  29. Use our content-migration tool to create your content model programmatically.

    File: content-model-v1.js Write a script to execute your content model. File: create-model.js Invoke with Contentful CLI against one of the test environment. contentful space migration --space-id abcedef --environment-id feature-wow create-model.js 3. Create a script to build the content model
  30. 4. Create a migration script to update model Programmatically update

    an existing content model, i.e. migrate your content model. File: content-model-animal-v2.js Execute with same script, except use new file: contentful space migration --space-id abcedef --environment-id feature-wow create-model.js Note when you execute a content migration, both the content type and all content entries (records) based on that content type are updated!
  31. 5. Propagate your tested changes to Prod After you have

    tested and verified your changes in sandbox environment, apply the content model migration to production by simply executing the same script but specifying master as target environment. contentful space migration --space-id abcedef --environment-id master create-model.js
  32. Migrations: the “Expand” Phase Content entries such that the changes

    do not prevent the currently released version of the software from running New fields and content types By leaving the existing content in place, while augmenting the content types and content such the new version of the software can also run. The content model can now support both the current version and the new version of your software in parallel. Add Transform
  33. Migrations: the “Contract” Phase Once all users are successfully using

    your new version, the “contract” phase of the migration is to run to remove unneeded content types, fields and content. Remove
  34. • Convert master environment into an environment alias • A

    promotion or rollback is achieved by retargeting the alias to another environment – which happens instantly • Production content is served from unscoped/master API routes through the master alias • Currently only master can be an environment alias Environment Aliases In a nutshell
  35. Enabling risk free releases and instant rollbacks master is no

    longer a stand-alone environment but acts as an alias targeting another environment Production content is served from release-1 environment Execute migration scripts Production content is now served from release-2 environment Release 2 release-1 release-2 Environment aliases Change master alias to target release-2 environment master Release 3 release-3 Optional: Delete release-1 environment Production content is now served from release-3 environment Change master alias to target release-3 environment
  36. Minimize downtime and allow instant rollback master is no longer

    a stand-alone environment but acts as an alias targeting another environment Production content is served from release-1 environment Execute migration scripts Change master alias to target release-2 environment Production content is now served from release-2 environment Promote Problem discovered! Rollback is required Rollback Rollback master to target release-1 environment release-1 release-2 Use case: Promote an environment to master master
  37. Better safe than sorry master is no longer a stand-alone

    environment but acts as an alias targeting another environment Content is served from prod environment Run migration scripts Restore by changing master alias to target prod-backup environment Backup Problem discovered! Rollback is required Restore prod prod-backup Use case: Backup and restore master Optional: Delete prod environment prod Optional: Recreate prod from prod-backup Change master alias to target prod environment
  38. You never get it right the first time Content models

    require large amounts of iteration Content model changes are always evolving Make use of the content migration API Extreme flexibility == complexity Developers often design content models for optimal content reuse But content authors often create content in a manner not intended by modelers Content authors are your customer Both developers and content authors are your customer, but focus on the content author Crawl, walk, run Start testing the authoring experience before any code is written Key takeaways in content modeling