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

Bucharest content modeling training

Bucharest content modeling training

Contentful Webinars

November 20, 2019
Tweet

More Decks by Contentful Webinars

Other Decks in Technology

Transcript

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

    Kristin Brown, Head of Partnerships EMEA Anna Trubitsyna, Partner Manager Bohdan Zatirko, Solution Architect
  2. Topics today • Content model basics • Topics and assemblies

    • Content Modeling Exercise • Rich text • Localization • DAM integration • Content aggregation • Experimentation & Personalization • Building the Colorful Lifestyle content model • Working with content as code
  3. Please raise your hand if you have previous experience with…

    • Drupal/ Acquia • AEM • Sitecore • Wordpress • Other
  4. On-premises systems MONOLITHS The way software is built has changed

    forever Cloud-based, modular architectures have become the standard for building digital products 7 Customization Interoperability Cloud-based stacks MICROSERVICES
  5. Our vision: stacks beat suites 8 Innovative companies will assemble

    modular stacks, with a content hub at the center Digital Experience Suites Digital Experience Stacks
  6. Content Management API Read/Write Create, edit, publish, unpublish, archive, and

    delete content and content model Content Preview API Read-only Retrieve draft and updated content in addition to published content Content Delivery API Read-only Retrieve published content to display in an app or website Images API Read-only Retrieve and apply transformations to images stored in Contentful Contentful has 4 Core REST APIs
  7. Where and when does rendering happen? 1 2 3 Dynamic

    on Server Static Site Generator Dynamic on Device A client-side app using the Contentful SDKs requests content from the Contentful APIs and renders the content on the device. A server-side app receives a request from an end user, retrieves content from Contentful (and possibly other data sources), renders the content, and sends it back in response. A static site generator fetches content from Contentful at timed intervals or on content change webhook then builds the rendered HTML pages and stores them on a static web host.
  8. Contentful lets you build digital products, fast 12 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
  9. Create reusable content Reuse the same content across pages, properties,

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

    editors full control of all their content 14 Content variations Localized content Microcopy Content metadata Workflow metadata Design systems Content
  11. 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 19
  12. 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 22
  13. Topics are reusable content components • Individually authorable • Pure

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

    Contains topics • Includes presentation options • Assemblies can contain assemblies
  15. Content types can use inheritance 40 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
  16. Content types can use composition 41 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”
  17. 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) 44
  18. The field Localized is an array that contains an entry

    for each locale Entry level localization - two content types 45 1 2
  19. 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?
  20. 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
  21. 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
  22. Hero Featured CTA Page Title: “Homepage” Slug: “home” Component: []

    Enabling experimentation using the App CTA (control) CTA (variation) Variation container
  23. 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
  24. Contentful Content variations Map content to experiments Optimizely Experiments Audiences

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

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

    RESULTS: 9.2% Increase in prospect cart start rate 18.5% Decrease in bounce rate
  27. 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 ↓
  28. 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
  29. 5 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?
  30. Topics and Assemblies in Colorful Topics entries contain pure content

    removed of any presentation options (product/brand description, article body) Pages entries determine what content and visual elements make up a page (think of it as a holding container for the page) Components entries power specific visual elements (hero image, CTA, gallery, etc.) and include presentation options Media (wrapper) entries are used for embedding external content (social media), standalone videos and images Microcopy entries for storing microcopy resource sets Navigation entries to handle the definition of navigational structure. Testing/Personalization entries for supporting optimization/personalization.
  31. Topics Main Topics • -topic-Product – product-related content (desc, image,

    tech specs, price, size, etc.) • -topic-Brand – brand-related content (logo, external URL, desc, tagline, etc.) • -topic-Category – category-related content (name, desc, related products) • -topic-Article – editorial content (lifestyle articles, About us page, etc.) • -topic-Author – an entry for storing an author profile, displays the name, bio, photo and an optional link to a social profile Secondary Topics • -topic-FAQ-list – a list of questions and answers on a specific topic (product, shipping, payments, collaborations) • -topic-Question – an individual question and answer • -topic-Testimonial – an individual testimonial, quote, or logo • -topic-Content-snippet – short text used for individual items making up feature / specs / benefits section of the product / brand / subscription entries • -topic-Article-List - Topic for building article overview pages • -topic-Business-info - Business information (terms & services, policies, company information) • -topic-Campaign - Topic for campaign content w/o any presentation options
  32. Assemblies Pages 1. -Page - A universal page template, to

    be used for publishing pages & curating visual components 2. -page-CommerceTools - A page template that allows editors to customize product pages powered by the CommerceTools integration Visual Components 1. ⚙-component-Hero-container – a container entry for displaying hero banners. Turns individual hero images into an automated slider when multiple hero components are referenced a. ⚙-component-Hero-banner – a hero image typically used at the top of the page, supports overlaid text and CTA buttons 2. ⚙-component-Image-gallery – a collection of images that can be displayed in a number of different ways (as a grid, tiles) Text Components 1. ⚙-component-Info-block – A container for displaying short bits of generic information, with optional icons/visuals 2. ⚙-component-FAQ – Accordion layout for displaying FAQs and other itemized lists 3. ⚙-component-Testimonial – A logo and/or a customer testimonial, can be a single or multiple items
  33. Assemblies Mixed Components 1. ⚙-component-Card-collection – A collection of teaser

    cards to promote product, editorial, category, info and other pages 2. ⚙-component-Duplex-container – A full-width container for displaying text and images side by side 3. ⚙-component-CTA – Visually distinct Call-to-action (CTA) block Media Components 1. -wrapper-Rich-Media – an entry for embedding generic external content in the form of an iframe/embed code (code snippet generated by other platforms - e.g. audio, maps, forms, tweets, Instagram media, LinkedIn and Facebook status updates, surveys, and pretty much any other content that is designed to be embedded on the web) 2. -wrapper-Video – an entry used for embedding videos from supported platforms using a URL (currently, YouTube and Vimeo) 3. -wrapper-Image – an entry used for an image that requires custom meta data (e.g. copyright, alt-text) or validation rules (aspect ratio, min resolution) and is displayed as a standalone image on the site
  34. Assemblies Microcopy 1. -Global-microcopy - Catch-all entry for localizing microcopy

    (buy button, back button, page section names, etc Navigation Components 1. -Header-menu– default site header 2. -Footer-menu – default site footer menu - holds links to menu groups a. -Menu-group – a group of items to be used in the footer navigation as one column Personalization 1. ‍-component-Variation-Container - A component that uses Optimizely rules to match content entries to visitor groups / traffic type.
  35. Notes: URL: https://[DOMAIN]/en/articles/[SLUG] Background: “We learnt the hard way that

    overview pages like Article list should be generated automatically to save editors from having to do tons of boring, manual work.” - Artas Currently this type of page will query all articles and show these in the page. The Article List topic itself will allow you to name the article set (which gets shown on the page). In the future, it might provide for an option to filter by specific types of articles (e.g. using tags/categories). Not enough time to implement this yet. Article List Page -Page where -topic-Article-list is selected as the page content 94
  36. Notes: URL: https://[DOMAIN]/en/brand/[SLUG] This page has not been implemented on

    the front end yet. As soon as it is, it will likely work a bit like the Category Page and show cards for products for the brand selected. Brand Page -Page where -topic-Brand is selected as the page content 95
  37. Notes: URL: https://[DOMAIN]/en/info/[SLUG] This page type is quite similar to

    an article page, but is more simple (e.g. doesn’t visualize things like author information, tags, etc.) Also, notable is that these pages won’t be included in pages such as Article List pages that will only query for Articles. Business Info Page -Page where -topic-Business-info is selected as the page content 96
  38. Notes: URL: https://[DOMAIN]/en/category/[SLUG] Background: “We learnt the hard way that

    overview pages like Article list should be generated automatically to save editors from having to do tons of boring, manual work.” - Artas Page content will show cards of products matching the selected category. Category Page -Page where -topic-Category is selected as the page content 97
  39. Notes: URL: https://[DOMAIN]/en/campaigns/[SLUG] This page is a pure flexible assembly

    landing page which will only visibly render elements for the Top section and Extra section items. It gives a URL to directly take a user to a Landing Page. Also, allows a nice way to find content related to a particular campaign in the Content View/Saved Views. It IS possible to see details from the campaign topic when this page is referenced from other elements (e.g. from a card collection). It will take things like the Title and Image depending where the page is referenced. Campaign Page -Page where -topic-Campaign is selected as the page content 98
  40. Notes: URL: https://[DOMAIN]/en/product/[SLUG] In this example all product details live

    in Contentful (product pages for Commercetools integration are different). This simulates the case where Contentful is used more like a PIM. Product Page -Page where -topic-Product is selected as the page content 99
  41. 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
  42. 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
  43. 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
  44. 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
  45. 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!
  46. 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
  47. 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
  48. 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
  49. • 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
  50. 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
  51. 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
  52. 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
  53. You never get it right the first time Content models

    require large amounts of iteration Content models 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
  54. So What’s Next? Keep Learning • Developer Certification Program •

    Documentation • Developer Portal • Join our Meetups & Webinars (Gatsby,..) Keep track of new things • Changelog • What’s New Enjoy building with Contentful!