Integration

There are two ways to integrate the module.

Server side rendering mode (Freemarker templates)
Headless mode

Mixing rendering modes is not supported.

To ensure compatibility, the rendering mode for the creative and the page must be the same.

A server-side creative requires a server-side page.
A headless creative requires a headless page.

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

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
Make a template in the Campaign Manager in the Configuration app found at modules/campaign-manager/config/templates.

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.

Create a template annotations endpoint for the Campaign Manager app.

Check out this example.
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.
When the JavaScript app is running inside the Campaign Manager app, make it call the correct endpoints you’ve created.
Important notes

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

delivery-endpoint.yaml

references:
  # For the matching campaign resolution
  - name: campaignReference
    propertyName: tag
    referenceResolver:
      class: info.magnolia.campaign.manager.rest.reference.CampaignReferenceResolverDefinition
    depthInReferencedNode: 2 (1)
  # For the fallback campaign resolution (if used)
  - name: campaignFallbackReference
    propertyName: fallback
    referenceResolver:
      class: info.magnolia.rest.reference.jcr.JcrReferenceResolverDefinition
      targetWorkspace: campaign-manager
    depthInReferencedNode: 2 (1)

1	Set `depthInReferencedNode` to at least `2` to ensure relevant properties are resolved. See Delivery API: properties for more details.

If you’re using the Campaign manager module in conjunction with the DAM Focal module, you must set your referenceDepth to 2 or greater. Otherwise, the properties from the Image Focal module are not resolved.

campaign-manager.yaml sample

/campaign-manager/restEndpoints/delivery/campaign-manager.yaml

$type: jcrDeliveryEndpoint_v2
workspace: campaign-manager
depth: 10
referenceDepth: 10 (1)
systemProperties:
  - mgnl:template
nodeTypes:
  - mgnl:page
  - mgnl:area
childNodeTypes:
  - mgnl:area
  - mgnl:component
  - mgnl:contentNode

references:
  - name: assetReference
    propertyName: image
    referenceResolver:
      $type: assetReferenceResolver

  - name: linkReference
    propertyName: link
    referenceResolver:
      $type: jcrReferenceResolver
      targetWorkspace: website
      expand: false
      generateLink: true

1	`referenceDepth` set to `10`. See Delivery Endpoint: properties for more details.

You 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": [
                    "cta"
                ]
            },
            "@nodes": [
                "0"
            ]
        },
        "@nodes": [
            "main"
        ]
    },
    "mgnl:template": "campaign-manager:components/managed-campaign",
    "masterContent": "true",
    "skip": "false",
    "@nodes": []
}

Create a Campaign Manager component that uses the resolved property tag or fallback to render the correct component.

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

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

Check out this example.

Integration

Server side rendering mode (Freemarker templates)

Headless mode

Location

Main doc sections