|
1 | | -# headless-example |
| 1 | +--- |
| 2 | +description: >- |
| 3 | + This article shows how to personalize content using the uMarketingSuite Headless API and Umbraco’s Content Delivery API. |
| 4 | +--- |
2 | 5 |
|
3 | | -This will show a simple tutorial to use the uMarketingSuite Headless API with Umbraco Content Delivery API. |
| 6 | +# Headless Example |
4 | 7 |
|
5 | | -### Setting up a simple Personalization Segment |
| 8 | +This article shows how to use the uMarketingSuite Headless API with Umbraco Content Delivery API. |
6 | 9 |
|
7 | | -* With uMarketingSuite goto the **Marketing** Section and the **Personalization** section |
8 | | -* Navigate to the **Segments** tab and click **Add new Segment** |
9 | | - * Give the segment a name such as **Morning People** or similar |
10 | | - * And a description such as **For people who like to visit us in the morning** |
11 | | - * Set the segment type to **Core** as we don't wish this to be temporary and tied to end date for a campaign |
12 | | - * Choose the parameter **Time of day** and set its configuration values to **Include** **00:00** to **12:00** as it is a 24 hour clock |
| 10 | +## Setting up a Personalization Segment |
13 | 11 |
|
14 | | -Refer to the [documentation on Personalization to learn more](../../../../personalization/) what can be done. |
| 12 | +1. Go to the **Marketing** > **Personalization** section. |
| 13 | +2. Navigate to the **Segments** tab. |
| 14 | +3. Click **Add new Segment**. |
| 15 | + * Give the segment a name. For example: **Morning People**. |
| 16 | + * And a description such as **For people who like to visit us in the morning**. |
| 17 | + * Set the segment type to **Core** as we don't wish this to be temporary and tied to end date for a campaign. |
| 18 | + * 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. |
| 19 | + |
| 20 | +For more information, see the [Personalization](../personalization/README.md) documentation. |
15 | 21 |
|
16 | 22 | ![]() |
17 | 23 |
|
18 | | -### Creating a Document Type to Personalize |
| 24 | +### Creating a Document Type for Personalization |
| 25 | + |
| 26 | +1. Navigate to **Settings**. |
| 27 | +2. Click **Create a New Document Type**. |
| 28 | +3. Enable **Allow Segmentation** under **Permissions**. |
| 29 | +4. Save the Document Type. |
| 30 | +5. Add a new property, such as **Header**, using a **Textstring** property editor. |
| 31 | + |
| 32 | + * Ensure **Allow Segmentation** is enabled for this property. |
| 33 | + |
| 34 | +6. Create a piece of content using this new Document Type so we can query and request it using the Umbraco Content Delivery API |
19 | 35 |
|
20 | | -* Navigate to **Settings** and **Create a New Document Type** |
21 | | -* Ensure the setting **Allow Segmentation** is enabled under **Permissions** and Save the Document Type |
22 | | -* Add a new property to the document type such as **Header** using a **Textstring property editor** |
23 | | - * Ensure the property added has the **Allow Segmentation** value enabled |
24 | | -* Create a piece of content using this new Document Type so we can query and request it using the Umbraco Content Delivery API |
25 | 36 | * _For this example lets create this piece of content at the root_ |
26 | 37 |
|
27 | | -### Creating Content that is personalized |
| 38 | +### Creating Personalized Content |
| 39 | + |
| 40 | +1. Open the created content and go to **Personalization**. |
| 41 | +2. Click **Add personalized variant**. |
| 42 | +3. Set the following in the **Add a new variant** dialog: |
28 | 43 |
|
29 | | -* With a simple piece of content created click the **Personalization** content app |
30 | | -* Click the **Add personalized variant** button |
31 | | -* In the Add a new variant dialog we can set the following |
32 | | - * Choose our segment **Morning People** we added earlier |
33 | | - * Give it a name and a meaningful descriptions such as **Home Page for Morning People** |
| 44 | + * Choose the segment **Morning People** we added earlier. |
| 45 | + * Give it a name and a meaningful description such as **Home Page for Morning People**. |
34 | 46 |
|
35 | 47 | ![]() |
36 | 48 |
|
37 | | -* After adding the variant we will return to the content node in split view mode |
38 | | -* 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** |
39 | | -* Save and publish the node with the variant content |
| 49 | +4. After adding the variant we will return to the content node in split view mode |
| 50 | +5. 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** |
| 51 | +6. Save and publish the node with the variant content |
40 | 52 |
|
41 | 53 | ![]() |
42 | 54 |
|
43 | 55 | ### Using the Content Delivery API |
44 | 56 |
|
45 | | -We will do the reminder of this tutorial using the Swagger development tool, so we can easily create requests against Umbraco Content Delivery API and uMarketingSuite Headless |
46 | | - |
47 | | -* Navigate to the swagger endpoint of your site **/umbraco/swagger** |
48 | | -* From the dropdown select the **Umbraco Delivery API** |
49 | | -* Expand the \*\*/umbraco/delivery/api/v1/content/item/{path}\*\*request |
50 | | - * Click the **Try it out** button |
51 | | - * 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 |
52 | | - * You may need to set the **Api-Key** parameter depending if your Umbraco application has been [setup to allow Public Access](https://docs.umbraco.com/umbraco-cms/reference/content-delivery-api#additional-configuration) this can be toggled with the configuration value _Umbraco:CMS:DeliveryAPI:PublicAccess_ |
53 | | -* If everything is working correctly we should see the JSON result of the content node and see the default value for our header |
54 | | -* Next from the definitions dropdown navigate to **uMarketingSuite Marketing API** |
55 | | -* Expand the **/umbraco/umarketingsuite/api/v1/analytics/pageview/trackpageview/client**request |
56 | | - * Click the **Try it out** button |
57 | | - * Modify the JSON body, we need to set the url property to be the page we have just visited with the content delivery api above and we can leave the other property **referrerUrl** empty |
58 | | -* Repeat the earlier steps to fetch the content by it's path and you should note that the JSON of the content node and the header property now contains our personalized content **Hello you EARLY risers** |
59 | | - * Remember it will only show us different content if we are to view the page before midday |
| 57 | +Let us use the Swagger development tool to make requests to the Umbraco Content Delivery API and uMarketingSuite Headless API. |
60 | 58 |
|
61 | | -![]() |
| 59 | +1. Navigate to the swagger endpoint of your site **/umbraco/swagger**. |
| 60 | +2. Select **Umbraco Delivery API** from the dropdown. |
| 61 | +3. Expand `/umbraco/delivery/api/v1/content/item/{path}`: |
| 62 | + |
| 63 | + * Click **Try it out**. |
| 64 | + * 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 |
| 65 | + * Set the **Api-Key** parameter if your Umbraco application requires [Public Access](https://docs.umbraco.com/umbraco-cms/reference/content-delivery-api#additional-configuration) this can be toggled with the configuration value `Umbraco:CMS:DeliveryAPI:PublicAccess` |
| 66 | + |
| 67 | +4. You should see the JSON result of the content node, including the default header value. |
| 68 | +5. Navigate to **uMarketingSuite Marketing API** from the definitions dropdown. |
| 69 | +* Expand `/umbraco/umarketingsuite/api/v1/analytics/pageview/trackpageview/client`: |
62 | 70 |
|
63 | | -**Disclaimer**: Due to the way uMarketingSuite is licenced to individual domains, it is required that the Host Header matches one of the registered licenced domains in order for personalisation and A/B Testing on the Content Delivery API to work |
| 71 | + * Click **Try it out**. |
| 72 | + * Modify the JSON body, setting the URL to the page visited earlier. With the content delivery api above, leave the other property **referrerUrl** empty. |
| 73 | +* Repeat the earlier steps to fetch the content by it's path. The JSON of the content node and the header property now contains our personalized content **Hello you early risers** |
| 74 | + * Remember it will only show different content if we view the page before midday. |
| 75 | + |
| 76 | +![]() |
64 | 77 |
|
65 | | -TADA that's it you can see how easy it is. |
| 78 | +{% hint style="info" %} |
| 79 | +uMarketingSuite 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. |
| 80 | +{% endhint %} |
0 commit comments