diff --git a/16/umbraco-engage/.gitbook/assets/External-profile-data-tab-v16.png b/16/umbraco-engage/.gitbook/assets/External-profile-data-tab-v16.png index f6390a1f002..03ded120c28 100644 Binary files a/16/umbraco-engage/.gitbook/assets/External-profile-data-tab-v16.png and b/16/umbraco-engage/.gitbook/assets/External-profile-data-tab-v16.png differ diff --git a/16/umbraco-engage/developers/personalization/implement-your-own-segment-parameters.md b/16/umbraco-engage/developers/personalization/implement-your-own-segment-parameters.md index ebb3380545b..5225839addb 100644 --- a/16/umbraco-engage/developers/personalization/implement-your-own-segment-parameters.md +++ b/16/umbraco-engage/developers/personalization/implement-your-own-segment-parameters.md @@ -1,12 +1,12 @@ --- description: >- - Discover how to create and manage custom segments. + Discover how to create and manage custom segments. --- # Implement your own segment parameters -Umbraco Engage comes with built-in parameters to build a segment, such as "Customer Journey" and "Time of Day". -However, segments can also be built with custom rules that are not included in Engage by default by adding custom segment parameters. +Umbraco Engage comes with built-in parameters to build a segment, such as "Customer Journey" and "Time of Day". +However, custom segments can be built by providing your own segment parameters. The following guide explains how to achieve this. It is aimed at developers. There are three steps, two are mandatory, and the last one is optional: @@ -24,18 +24,18 @@ In code, a segment parameter is referred to as a "segment rule". A segment rule is not much more than this: -* A unique rule identifier, e.g. "DayOfWeek". -* A configuration object, e.g. "{ dayOfWeek: "Monday" }" - * This is optional, but most rules will have some sort of configuration that the user can alter in the Segment Builder. In our example, the user can configure the specific day of the week. -* A method that specifies whether the rule is satisfied by the current pageview. +- A unique rule identifier, e.g. "DayOfWeek". +- A configuration object, e.g. "{ dayOfWeek: "Monday" }" + - This is optional, but most rules will have some sort of configuration that the user can alter in the Segment Builder. In our example, the user can configure the specific day of the week. +- A method that specifies whether the rule is satisfied by the current pageview. You will have to implement the following interfaces for a new custom parameter: -* `Umbraco.Engage.Infrastructure.Personalization.Segments.ISegmentRule` - * You can extend the existing `BaseSegmentRule` to simplify the implementation. - * The most important part to implement is the `bool IsSatisfied(IPersonalizationProfile context)` method. -* `Umbraco.Engage.Infrastructure.Personalization.Segments.Rules.ISegmentRuleFactory` - * Register your implementation of the segment rule factory with `Lifetime.Transient` in a composer. -For the "Day of week" example, the code looks like this: + +- `Umbraco.Engage.Infrastructure.Personalization.Segments.ISegmentRule` + - You can extend the existing `BaseSegmentRule` to simplify the implementation. + - The most important part to implement is the `bool IsSatisfied(IPersonalizationProfile context)` method. +- `Umbraco.Engage.Infrastructure.Personalization.Segments.Rules.ISegmentRuleFactory` \* Register your implementation of the segment rule factory with `Lifetime.Transient` in a composer. + For the "Day of week" example, the code looks like this: ```c# public class DayOfWeekSegmentRule : BaseSegmentRule @@ -56,138 +56,136 @@ public class DayOfWeekSegmentRule : BaseSegmentRule And the factory which is used to create an instance of this rule: ```c# -//The segment rule factory needs to be registered so Engage can use it. -[RegisterService(ServiceLifetime.Transient)] public class DayOfWeekSegmentRuleFactory : ISegmentRuleFactory { public string RuleType { get; } = "DayOfWeek"; public ISegmentRule CreateRule(string config, bool isNegation, long id, Guid key, long segmentId, DateTime created, DateTime? updated) { - var typedConfig = JsonConvert.DeserializeObject(config); + var typedConfig = JsonSerializer.Deserialize(config) + ?? throw new InvalidOperationException("Failed to deserialize DayOfWeekSegmentRuleConfig"); + return new DayOfWeekSegmentRule(id, key, segmentId, RuleType, config, isNegation, created, updated, typedConfig); } } ``` -The class `DayOfWeekSegmentRuleConfig` is used to represent the rule configuration. This is not strictly necessary, but it makes it easier. +The class `DayOfWeekSegmentRuleConfig` is used to represent the rule configuration. This is not strictly necessary, but it makes it easier. The configuration is stored as a string in the database. In code, Intellisense is enabled to parse the stored configuration to this class: ```c# -//Generating config schema on client side. -[GenerateEngageSchema] public class DayOfWeekSegmentRuleConfig { public DayOfWeek DayOfWeek { get; set; } } ``` -That's the C# part of the custom segment parameter. - ## 2. Web component definition -The business logic for the segment parameter has been implemented, but the parameter cannot yet be used in the backoffice. In this step, a web component will be added to render the new rule in the Engage segment builder. -The following steps provide code samples for the demo parameter "Day of week". -You can create a folder to manage new files. Those files look like this: -* `segment-rule-base.ts` - * Type declaration for `UeSegmentRuleBaseElement` from Umbraco Engage. This is a temporary declaration until Umbraco Engage provides an npm package. -* `segment-rule-day-of-week.ts` - * Declaration for the web component using Lit. -* `index.ts` - * Exporting all elements. -* `manifest.ts` - * Declares the element as a backoffice extension and registers it in the Extension Registry. Read more in the [Extension Manifest documentation](https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-registry/extension-manifest). - -First, re-generate the `DayOfWeek` config type on the client side using the below command: +{% hint style="info" %} +Check the [Creating your first extension](/umbraco-cms/tutorials/creating-your-first-extension) and [Vite Package Setup](/umbraco-cms/customizing/development-flow/vite-package-setup) articles for detailed extension-building tutorials. +{% endhint %} -```text -npm run generate:api -``` - -**segment-rule-base.ts** - -```typescript -enum RuleDirection { - INCLUDE = "include", - EXCLUDE = "exclude", -} +The business logic for the segment parameter has been implemented, but the parameter cannot yet be used in the backoffice. In this step, a web component will be added to render the new rule in the Engage segment builder. -export interface UeSegmentRuleParameterConfig { - isNegation: boolean; - config: ValueType; -} +This demo assumes you are creating multiple custom rules, which are then provided as a bundle in the backoffice. -export class UeSegmentRuleBaseElement extends UmbLitElement { - abstract renderReadOnly(); - abstract renderEditor(); - value: UeSegmentRuleParameterConfig; - initialized: Promise; +First, follow the [Vite Package Setup](/umbraco-cms/customizing/development-flow/vite-package-setup) article to scaffold your extension. Use `MySegmentRules` as your package name. - @property({ type: Boolean, attribute: true, reflect: true }) - readonly?: boolean; +1. Install `@umbraco-engage/backoffice` package, replacing `x.x.x` with your Engage version: - updateParameterValue(value: any, key: keyof ValueType) { - if (!this.value?.config) return; +```text +npm install @umbaco-engage/backoffice@x.x.x +``` - const config = { ...(this.value.config ?? {}), ...{ [key]: value } }; - this.pending = assignToFrozenObject(this.value, { config }); - this.renderReadOnly(); - } +2. Ensure your `vite.config.ts` looks like the example below: - render() { - return this.readonly ? this.#renderReadOnly() : this.#renderEditor(); - } +```typescript +import { defineConfig } from "vite"; + +export default defineConfig({ + build: { + lib: { + entry: "src/my-element.ts", // your web component source file + formats: ["es"], + }, + outDir: "./client", // all compiled files will be placed here + emptyOutDir: true, + sourcemap: true, + rollupOptions: { + external: [/^@umbraco/], // ignore the Umbraco Backoffice package in the build + }, + }, + base: "/App_Plugins/MySegmentRules/client", // the base path of the app in the browser (used for assets) +}); +``` - #renderReadOnly() { - return html` -
- - ${this.renderReadOnly()} -
- `; - } +3. Update `umbraco-package.json` to register the bundle and segment rule. Note the `meta.type` property matches the `RuleType` defined above in `DayOfWeekSegmentRuleFactory`. - #renderEditor() { - return html` -
-

${this.manifest?.meta.name}

- -
-
${this.renderEditor()}
- `; - } +```json +{ + "$schema": "../../umbraco-package-schema.json", + "name": "My Custom Engage Segment Rules", + "allowPublicAccess": true, + "extensions": [ + { + "name": "My Engage Segment Rules Bundle", + "alias": "My.Bundle.SegmentRules", + "type": "bundle", + "js": "/App_Plugins/MySegmentRules/client/client.js" + }, + { + "type": "engageSegmentRule", + "alias": "Engage.Segment.Rule.DayOfWeek", + "name": "Engage Day of Week Segment Rule", + "weight": 100, + "elementName": "ue-segment-rule-day-of-week", + "meta": { + "name": "Day of week", + "icon": "icon-calendar", + "type": "DayOfWeek", + "config": { "dayOfWeek": "Sunday" } + } + } + ] } - ``` -**segment-rule-day-of-week.ts** +4. Update `src/my-element.ts` as below. Note `DayOfWeekSegmentRuleConfigModel` reflects the same data contract as the `DayOfWeekSegmentRuleConfig` class in C#. While it is possible to generate this using code-gen tools, this has been done manually to avoid complicating this tutorial. -```typescript -export interface UeSegmentRuleDayOfWeekConfig - extends DayOfWeekSegmentRuleConfigModel {} +Note too the `meta.config` object defined above in the package JSON implements the `DayOfWeekSegmentRuleConfigModel` interface. + +By extending `UeSegmentRuleBaseElement` you avoid writing boilerplate code, and don't have to worry about handling value updates or syncing data back to the segment. -const elementName = "ue-segment-rule-day-of-week"; +```typescript +import { + customElement, + html, + state, +} from "@umbraco-cms/backoffice/external/lit"; +import type { UUISelectEvent } from "@umbraco-cms/backoffice/external/uui"; +import { UeSegmentRuleBaseElement } from "@umbraco-engage/backoffice/personalization"; + +export interface DayOfWeekSegmentRuleConfigModel { + dayOfWeek: string; +} -@customElement(elementName) -export class UeSegmentRuleDayOfWeekElement extends UeSegmentRuleBaseElement { +@customElement("ue-segment-rule-day-of-week") +export class UeSegmentRuleDayOfWeekElement extends UeSegmentRuleBaseElement { @state() - private _options: Array = []; + private _options: Array