Fun & challenges as a developer in a composable DXP era

Earlier this year Umbraco HQ introduced the term “composable DXP” into the Umbraco ecosystem. And I believe that a new era has begun!

In a composable DXP architecture everything revolves around integrating best-of-breed systems and making the best experience for your customer! Instead of building all features yourself as a developer, you (or in a lot of case your client or your project manager) picks the systems and the challenge for you as a developer is to integrate them seamlessly. I personally believe that this is going to be a big game changer for you as an Umbraco developer and in this article I will look into the challenges ahead, but also how you can make your job more fun!

Challenges in a composable DXP strategy

In the composable DXP you do not have to build every cool feature yourself anymore. You have several components out there and your primary job is to integrate it as good as possible. A few systems and the features that are available out there:

• For a webshop you can pick Vendr or Shopify. The composable DXP architecture gives you or your customer the choice of which tool is better for your use case and it’s up to you to integrate it.
• For a CRM you can pick Microsoft Dynamics, ActiveCampaign or Hubspot.
• For personalization and A/B testing, and profiling you can pick for example the uMarketingSuite.

All these systems are specialized in their features and it’s up to you as a developer to integrate it in the best way possible.

And that comes with several challenges:

• The first challenge that you face is the question who is responsible for setting up the system? Maybe you’re lucky and the system is already set up before you start working with it. But are you sure you can call yourself lucky? Because maybe it’s set up completely wrong? Who has to fix it, and how do you explain that to the client?
  
  And if it isn’t set up yet, should you set it up? Every system nowadays makes you believe that you can start using the system within 5 minutes. But there’s a difference between setting it up for usage, and really using it for your clients. Should you become a certified developer in the specific component? And is that what you want?
  
  
• The next challenge is the best way of storing the data of customers. Because you have all these different systems and they probably all need data or store data, this can become a real headache. Do you store the data of your customer for example in each system? And how do make sure the data is kept in sync? What if the client changes some data in system A, how do you make sure it updates in system B, C and D as well?
  
  And with the GDPR legislation in the European Union, it’s your responsibility to make sure the data is safe, you know where the data is stored, and you can delete it if the customer demands it.
  
  
• The next challenge that you’re having is that you have to manage the integrations. The integrations are based on APIs, but what if the APIs change? First of all, how do you know that the APIs change? Do you have to be on all the technical mailing lists of all the integrations?
  
  And how stable and performant are these external systems? What if their system or their API is down? Does your application still work, or will it slow down as well, or maybe not work at all? As a developer you should consider these options and make sure you set up a defensive programming strategy.

But these challenges are all “everyday” challenges that you solve each and every day in your software engineering career. This is what you do, and probably this is what you like 😊!

One of the biggest changes however, in my opinion, is that your work as a developer will change from making cool stuff and kick-ass features, to integrations. And unfortunately these integrations are more about configuration and testing, and less about coding cool features. This will have a big impact on your day-to-day work if you ask me. I started doing web development because I wanted to make the coolest features out there in the world, and make software that customers really want to work with! Not to integrate other systems that are sometimes cool, but most of the time are not that cool…

Having fun in the composable DXP era

And because that is my professional goal in life (making cool stuff that clients actually want to use) I started the uMarketingSuite three years ago! With the uMarketingSuite we wanted to empower junior and senior editors and marketers to achieve their goals with an easy-to-use marketing toolbox within their Umbraco based application.

And we wanted to achieve this on the same fundamentals that Umbraco is built upon:

• Beautiful: A stunning UI that makes easy to work with
• Easy: You can get started within minutes as an editor, marketer or developer. No need to take a training course of several days.
• Extendible: Fully extendible so it’s fun to work with as a developer. If you don’t like it, implement it in your own way. And if the basic functionality is not enough for you, extend it with your own ideas!

With the uMarketingSuite we did a lot of heavy lifting, which empowers you as a developer to do the really cool stuff for your end client! The uMarketingSuite should be seen as a developer toolkit. There are several tools in it, but it’s up to you as a developer to get the best out of it. And that’s where the fun starts in this composable DXP-era! You can start coding again, dreaming about cool features and actually implement them in your own way!

Of course we say that the installation is a 10 minute job, and it’s a no-code solution. But to really get the most out of it, you should start coding today! Within 10 minutes, uMarketingSuite collects data about your website, applies your personalization and sets up an A/B test. The installation is super simple, but then the fun really starts!

We made sure that you can extend every part of the uMarketingSuite and in this article we will only go into two parts of the entire system.

Integrate external profile data into your system

The uMarketingSuite creates a basic profile of every visitor on your website. By default it collects which device and browser you’re using, which pages you visited, how many minutes you’re engaged with the website (really active on the site) and if you reached any goals. By collecting this it can make an assumption, which persona the customer is, or where in the customer journey the visitor is at this moment.

That’s what we already managed for you, but there you come into play. Maybe you’re using another CRM system or you’ve built your own CRM feature. And to turn this basic uMarketingSuite profile into a 360° profile you need to start developing to get that data into the profile. As a developer you have the possibility to match the uMarketingSuite profile to the profile in any other system. There are two things you need to do:

1. Create a link between the uMarketingSuite profile and the external system. A visitor on your website is identified by an unique identifier that is stored by default in a cookie called ‘uMarketingSuiteAnalyticsVisitorId’.
   
   As soon as you write something to the external system you need to make sure to store the uMarketingSuite identifier in the external system. This can be stored in any text field or any label in that system. Make sure to do it the other way around as well; store the unique identifier of the external system in your own database as well. This unique identifier of the external system could be anything. Of course an email address is by far the easiest option, but if that’s not available or is not unique, it can be any other identifier, like for example an id or guid.
   
   This can be stored in a simple table that maps the uMarketingSuite identifier to one or multiple external identifiers.
   
   CREATE TABLE uMarketingsuiteIdentifierToExternalIdentifier(
       uMarketingSuiteIdentifier guid,
       CRMProviderIdentifier nvarchar(255),
       AnyOtherProviderIdentifier nvarchar(255)
   )
   
   The first time you write something to the external system make sure to insert the given identifier from the external system into this table.
2. If the link between uMarketingSuite and the external system(s) is stored you can visualize the data of the external system easily into the profile of the visitor on your website.
   
   In order to render this external data with a custom component, you only have to create your component and register it with uMarketingSuite. The following code will show how to do both. Simply put this code in some .js file in App_Plugins and load it the usual way using a package.manifest file.
   
   // If you have your own custom module, you can use this:
   // angular.module("myCustomModule", ["uMarketingSuite"]);
   // angular.module("umbraco").requires.push("myCustomModule");
   // angular.module("myCustomModule").run([ ... ])
   
   // Create a component. We create a component named "myCustomExternalProfileDataComponent" here:
   angular.module("umbraco").component("myCustomExternalProfileDataComponent", {
     bindings: { visitorId: "<" },
     template: "<h1>My custom external profile data component! visitorId = {{$ctrl.visitorId}}</h1>",
     controller: [function () {
       this.$onInit = function () {
         // Your logic here
       }
     }]
   });
   
   // Register your custom external profile data component.
   // Please note you have to use kebab-case for your component name here
   // just like how you would use it in an AngularJS template (i.e. myCustomComponent -> my-custom-component)
   angular.module("umbraco").run(["umsCustomComponents", function (customComponents) {
     customComponents.profiles.externalProfileData = "my-custom-external-profile-data-component";
   }]);

That's all that's required to render your custom component.

All documentation is available on https://documentation.umarketingsuite.com/profiles/external-profile-data/.

Implement your own segment parameters

Another big part of the uMarketingSuite is the option to let a content editor personalize the website without any coding. This is a two-step process as well:

1. The content editor can put visitors into one or more segments. The segments are based on the parameters that are set up. The personalization engine has a number of ready-made segment parameters that can serve as the basis for your personalized content. But, what if those standard parameters aren't enough? Then you, the developer, come back into the picture.
   
   

You can expand uMarketingSuite further and further so that the marketers can segment the visit on the website in a very targeted way to serve personalized content. You build up the parameters yourself, based on the data you want to use. This can be any external API, CRM data that you might have, or any other integration that you want to build.

The implementation of any new segment parameter is done by writing some C# and a bit of AngularJS in the backoffice. Check out the full documentation here: https://documentation.umarketingsuite.com/personalization/extending-personalization/implement-your-own-segment-parameters/.

2. Now that you have identified your visitors and put them into one or more segments the next step is to personalise the website experience based on this information. By default you can personalise the Umbraco content based on the segment. An editor can do that without the need of any developer.
   
   This can be done for example based on a utm_parameter that is in the link.
   
   The default homepage of the uMarketingSuite looks like this: https://www.umarketingsuite.com
   
   A personalised variant could look like this: [link: umarketingsuite.com?utm_source=24days2022&utm_medium=referral&utm_term=personalisedvariant]
   
   But what if the personalisation should be more than a simple change in the title, or a different header image? What if it requires loading a totally different module, adding different properties to the page, or just a totally other flow?
   
   At that moment you can do a simple if-then-else check (or make it as complex that you want). There’s no more to it than:

if (analyticsState.Pageview.AppliedPersonalization != null && analyticsState.Pageview.AppliedPersonalization.Name == "Personalize for 24days.in"){    ...}

It looks as simple as this, but it opens up a whole new world for you as a developer!

Go and have some fun!

The composable DXP-strategy is a really gamechanger for you as a developer. Make sure that you keep stretching yourself as a developer and prevent yourself from becoming an expert configurator for a specific component, but make sure that you keep doing what you want to do.

Have a really great Christmas already; Keep dreaming, keep developing!