Umbraco Engage
CMSCloudHeartcoreDXP
13.latest (LTS)
13.latest (LTS)
  • Umbraco Engage Documentation
  • Release Notes
  • Support
  • Installation
    • System Requirements
    • Installation
    • Licensing
    • Verify your Engage installation
  • Upgrading
    • Upgrade Umbraco Engage
    • Version specific Upgrade Notes
    • Migrate from uMarketingSuite
  • Getting Started
    • Getting Started
    • For Marketers and Editors
      • Cockpit
      • Marketing Resources
    • For Developers
      • Infrastructure sizing
      • Load Balancing and CM/CD Environments
      • Content Delivery Network recommendations
      • Cockpit
      • Content Security Policy nonce configuration
      • Troubleshooting installations
  • Marketers and Editors
    • Introduction
      • The Umbraco Engage Section
      • Content Apps
      • The Umbraco Engage Cookie
    • Analytics
      • What is measured by default
      • Client-side Events
      • Types Of Clients
      • Campaigns
      • Device Type
      • Location
      • Referral Traffic
      • Forms
      • Videos
      • Scroll Heatmap
      • Google Analytics vs Umbraco Engage
      • Search Terms
    • A/B Testing
      • What is A/B testing
      • Types of A/B Tests
        • Single-page A/B Test
        • Multiple Pages Test
        • Document Type Test
        • Split URL Test
      • Setting up the A/B Test
      • Previewing an A/B Test
      • Monitor the A/B Test
      • A/B Test Distribution Algorithm
      • Front end Rendering
      • Finish an A/B Test
    • Personalization
      • Creating a Segment
      • Setting up Personalization
      • Cockpit Insights
      • Implicit and Explicit Personalization
        • Setting up the customer journey
        • Personas
        • Implicit Personalization scoring explained
        • Content Scoring
        • Campaign Scoring
        • Referral Scoring
    • Profiling
      • Profile detail
      • External profile data
    • Reporting
    • Settings
      • Goals
      • IP Filtering
      • Configuration
      • Permissions
  • Developers
    • Introduction
      • Dataflow Pipeline
        • Data Collection
        • Data Storage
        • Data Parsing
        • Reporting
      • The Umbraco Engage Cookie
        • Module Permissions
      • Performance
    • Analytics
      • Request tracking
      • Bot detection
      • Capture location data
      • Extending forms
      • Video tracking
      • Scroll Heatmap
      • Client-side events
        • Additional measurements with analytics scripts
        • Bridging Library for Google Analytics
        • Bridging Library for Google Tag Manager
        • Google Analytics Blocker Detection
        • Create your own events
      • Extending Analytics
        • Getting the Correct IP Address
        • Sending data to the GTM Datalayer
    • A/B testing
      • Retrieving A/B test variants in C#
    • Personalization
      • Implement your own segment parameters
      • Retrieve segment information from code
      • Add custom scoring
    • Profiling
      • External Profile Data
    • Reporting
    • Settings
      • Custom goals scoring
      • Configuration
    • Headless
      • Using the Engage API
      • Headless Example
  • Security and Privacy
    • Security and privacy
    • Retention periods of data
    • Anonymization
    • GDPR & EU regulation
      • How to become GDPR compliant using cookiebot
    • How it works
  • Tutorials
    • Overview
    • How to Get Started with Personalization
    • How to Create a Persona
    • Create a Personalized Popup in 5 minutes
    • How to set up an A/B Test
    • Marketing Resources
      • Generic Topbar Template
      • Generic Popup Template
      • Generic Exit Intent Popup Template
Powered by GitBook
On this page
  • Setting up a Personalization Segment
  • Creating a Document Type for Personalization
  • Creating Personalized Content
  • Using the Content Delivery API

Was this helpful?

Edit on GitHub
Export as PDF
  1. Developers
  2. Headless

Headless Example

This article shows how to personalize content using the Umbraco Engage Headless API and Umbraco’s Content Delivery API.

PreviousUsing the Engage APINextSecurity and privacy

Last updated 6 months ago

Was this helpful?

This article shows how to use the Umbraco Engage Headless API with Umbraco Content Delivery API.

Setting up a Personalization Segment

  1. Go to the Engage > Personalization section.

  2. Navigate to the Segments tab.

  3. Click Add new Segment.

    • Give the segment a name. For example: Morning People.

    • And a description such as For people who like to visit us in the morning.

    • Set the segment type to Core as this is not temporary and is tied to an end date for a campaign.

    • Select the Time of day parameter and configure it to Include times from 00:00 to 12:00 as it is a 24-hour clock.

For more information, see the documentation.

Creating a Document Type for Personalization

  1. Navigate to Settings.

  2. Click Create a New Document Type.

  3. Enable Allow Segmentation under Permissions.

  4. Save the Document Type.

  5. Add a new property, such as a Header, using a Textstring property editor.

    • Ensure Allow Segmentation is enabled for this property.

  6. Create a piece of content using this new Document Type to query and request it using the Umbraco Content Delivery API

    • For this example, create this piece of content at the root.

Creating Personalized Content

  1. Open the created content and go to Personalization.

  2. Click Add personalized variant.

  3. Set the following in the Add a new variant dialog:

    • Choose the segment Morning People we added earlier.

    • Give it a name and a meaningful description such as Home Page for Morning People.

  1. After adding the variant we will return to the content node in split-view mode.

  2. We can then add a different piece of content we want to return in our Header property specific to morning people such as Hello you early risers.

  3. Save and publish the node with the variant content.

Using the Content Delivery API

Let us use the Swagger development tool to make requests to the Umbraco Content Delivery API and Umbraco Engage Headless API.

  1. Navigate to the swagger endpoint of your site /umbraco/swagger.

  2. Select Umbraco Delivery API from the dropdown.

  3. Expand /umbraco/delivery/api/v1/content/item/{path}:

    • Click Try it out.

    • For the path parameter, enter / for the example piece of content we created at the root of our site - alternatively, specify the correct URL path to the content.

  4. You should view the JSON result of the content node, including the default header value.

  5. Navigate to Umbraco Engage Marketing API from the definitions dropdown.

  6. Expand /umbraco/engage/api/v1/analytics/pageview/trackpageview/client:

    • Click Try it out.

    • Modify the JSON body, setting the URL to the page visited earlier. With the content delivery API above, leave the other property referrerUrl empty.

    • Repeat the earlier steps to fetch the content by its path. The JSON of the content node and the header property now contains our personalized content Hello you early risers

      • Remember it will only show different content if we view the page before midday.

Umbraco Engage is licensed to individual domains. It requires the Host Header to match one of the registered licensed domains for personalization and A/B Testing to work.

Set the API-Key parameter if your Umbraco application requires this can be toggled with the configuration value Umbraco:CMS:DeliveryAPI:PublicAccess

Public Access
Personalization
Edit segment view.
Add new variant.
split-view.
Response body.
Edit segment view.
Add new variant.
split-view.
Response body.