Integration
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
-
Create a new page template for the Campaign Manager WYSIWYG editor app.
Important notes-
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.
-
-
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. AddAccess control lists
access toCampaign-manager
andCampaign-manager-tags
workspaces. -
When the JavaScript app is running inside the Campaign Manager app, make it call the correct endpoints you’ve created.
-
Define the following references resolvers in your delivery endpoint for fetching the pages' data.
Look here for a full example.
delivery-endpoint.yamlreferences: # For the matching campaign resolution - name: campaignReference propertyName: tag referenceResolver: class: info.magnolia.campaign.manager.rest.reference.CampaignReferenceResolverDefinition # For the fallback campaign resolution (if used) - name: campaignFallbackReference propertyName: fallback referenceResolver: class: info.magnolia.rest.reference.jcr.JcrReferenceResolverDefinition 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": [ "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
orfallback
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.