There are two ways to integrate the module.

Server side rendering mode (Freemarker templates)

If you use the Magnolia server-side rendering mode, the managed campaign component’s area will resolve by itself the campaign to display according to the HTTP request execution date.

Headless mode

  1. Create a new page template for the Campaign Manager WYSIWYG editor app.

    Important notes
    • YAML definition

      Please notice the ?campaigns=true parameter. We will use it in our JS app to know that the WYSIWYG is properly run inside the Campaign Manager app.

    • JS component

    • Mapping

  2. Make a template in the Campaign Manager in the Configuration app found at modules/campaign-manager/config/templates.

    config templates

  3. Create a pages endpoint for the Campaign Manager app.

    Check out this example.

    The Campaign Manager app stores data in the campaign-manager workspace, hence we need to fetch data from this workspace when running our JS app inside the Campaign Manager app.

  4. Create a template annotations endpoint for the Campaign Manager app.

    Check out this example.
  5. In the Security app, make sure to give Web access to the endpoints from points you’ve created. Add Access control lists access to Campaign-manager and Campaign-manager-tags workspaces.

  6. When the JavaScript app is running inside the Campaign Manager app, make it call the correct endpoints you’ve created.

  7. Define the following references resolvers in your delivery endpoint for fetching the pages' data.

    Look here for a full example.

      # For the matching campaign resolution
      - name: campaignReference
        propertyName: tag
      # For the fallback campaign resolution (if used)
      - name: campaignFallbackReference
        propertyName: fallback
          targetWorkspace: campaign-manager
    You will need to map the Magnolia components defined in the campaign item with their related Javascript components.

    response-extract.json sample

    "04": {
        "@name": "04",
        "@path": "/home/main/04",
        "@id": "9dbd0f9e-b4ac-431b-b7d5-82a9b8eabdc6",
        "@nodeType": "mgnl:component",
        "tag": {
            "@name": "Welcome-back",
            "@path": "/welcome-back/Welcome-back",
            "@id": "c9e561d5-fb02-4370-a487-c53a0b4b027d",
            "@nodeType": "campaign-item",
            "tag": "258c7a63-0f07-4321-b6b0-4986b52f32aa",
            "name": "Welcome back",
            "mgnl:template": "headless-ecommerce:pages/ManagedCampaign",
            "main": {
                "@name": "main",
                "@path": "/welcome-back/Welcome-back/main",
                "@id": "22b5782d-f876-45e9-b843-500f75b92118",
                "@nodeType": "mgnl:area",
                "0": {
                    "@name": "0",
                    "@path": "/welcome-back/Welcome-back/main/0",
                    "@id": "676f6a7e-8bab-4b85-837d-2d69d5359167",
                    "@nodeType": "mgnl:component",
                    "mgnl:template": "headless-ecommerce:components/Banner",
                    "subtitle": "We're safely reopening our stores and reintroducing in-store shopping.",
                    "isLarge": "false",
                    "title": "WELCOME BACK SALE",
                    "image": "jcr:23a7ef00-f6c9-4f26-808f-356b41791c74",
                    "cta": {
                        "@name": "cta",
                        "@path": "/welcome-back/Welcome-back/main/0/cta",
                        "@id": "d8bea341-e2f7-4c48-9a6a-bdb5142fbfa7",
                        "@nodeType": "mgnl:contentNode",
                        "link": "4ff81f1f-b515-4433-8b0e-b108348e9b38",
                        "text": "SHOP AND GET DISCOUNTS",
                        "@nodes": []
                    "@nodes": [
                "@nodes": [
            "@nodes": [
        "mgnl:template": "campaign-manager:components/managed-campaign",
        "masterContent": "true",
        "skip": "false",
        "@nodes": []
  8. Create a Campaign Manager component that uses the resolved property tag or fallback to render the correct component.

    Check out this example.
  9. Map the campaign-manager` component.

    Check out this example.
  10. Make the campaign-manager` component available in areas where you want to use it.

    Check out this example.




This widget lets you know where you are on the docs site.

You are currently perusing through the Campaign manager module docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules