Page tree
Skip to end of metadata
Go to start of metadata

Campaign management module

  • Time based  scheduled campaigns
  • Decoupling & reusing content
  • Rich visual editing 
    • Not forms like Content apps
    • As rich and flexible as Pages app
  • Multi-language support
  • Workflow support
  • Publish in one click → automatic distribution to pages


Lets learn the features of the module with an use case: promote tour(s) based on the season

Maven dependency

<dependency>
  <groupId>info.magnolia.campaign</groupId>
  <artifactId>magnolia-campaign-manager</artifactId>
  <version>2.0.6</version>
</dependency>

Manage Campaigns

Create a campaign for each season


Template based campaigns

Campaigns can use multiple page templates for different renderings, although one is usually enough for one site.

Needed config

campaign.yaml needs to be configured in campaign-manager's config folder. All the needed nodes/properties need to be created manually. Follow Campaign Manager#Usage


Inside the page template, you need to configure which component template(s) you are going to use in your campaigns.

Lets create a page template with teaser as the component available for the main area

Its important to include css and js files from travel theme

campaign-demo/templates/pages/campaign.yaml
renderType: freemarker
templateScript: /campaign-demo/templates/pages/campaign.ftl
areas:
  main:
    availableComponents:
      teaser:
        id: travel-demo:components/teaser
class: info.magnolia.module.site.templates.PageTemplateDefinition
cssFiles:
  bootstrap:
    addFingerPrint: true
    link: /.resources/travel-demo-theme/libs/twitterbootstrap/css/bootstrap.min.css
    media: all
  roboto-condensed:
    addFingerPrint: true
    link: https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700
    media: all
  slick:
    addFingerPrint: true
    link: /.resources/travel-demo-theme/libs/slick-carousel/css/slick.css
    media: all
  slick-theme:
    addFingerPrint: true
    link: /.resources/travel-demo-theme/libs/slick-carousel/css/slick-theme.css
    media: all
  travels-magnolia:
    addFingerPrint: true
    link: /.resources/travel-demo-theme/css/travels-magnolia.css
    media: all
jsFiles:
  respimage:
    addFingerPrint: true
    link: /.resources/travel-demo-theme/libs/lazysizes/respimage.min.js
  lazysizes:
    addFingerPrint: true
    link: /.resources/travel-demo-theme/libs/lazysizes/lazysizes.min.js
  modernizr:
    addFingerPrint: true
    link: /.resources/travel-demo-theme/js/modernizr-2.6.2.min.js
  jquery:
    addFingerPrint: true
    link: /.resources/travel-demo-theme/js/jquery-1.10.2.min.js
  js.cookies:
    addFingerPrint: true
    link: /.resources/travel-demo-theme/js/js.cookies-2.1.2.js
  jquery.object-fit-cover-simple:
    addFingerPrint: true
    link: /.resources/travel-demo-theme/js/jquery.object-fit-cover-simple.js
  slick:
    addFingerPrint: true
    link: /.resources/travel-demo-theme/libs/slick-carousel/js/slick.min.js

Create the template script for the campaigns. Lets use a similar HTML as the travel demo prototype

Its important to include "@cms.page" and  "@cms.area" directives

campaign-demo/templates/pages/campaign.ftl
<!DOCTYPE html>
<html class="no-js" xml:lang="${cmsfn.language()}" lang="${cmsfn.language()}"><!--<![endif]-->
<head>
    [@cms.page /]

[#if def.cssFiles??]
    [#list def.cssFiles as cssFile]
      <link rel="stylesheet" type="text/css" href="${cssFile.link}" media="${cssFile.media}" />
    [/#list]
[/#if]
[#if cmsfn.editMode]
      <link rel="stylesheet" type="text/css" href="${ctx.contextPath}/.resources/travel-demo-theme/css/travels-magnolia-author.css" media="all" />
[/#if]
[#list def.jsFiles as jsFile]
      <script src="${jsFile.link}"></script>
[/#list]
</head>
<body>

[@cms.area name="main"/]

</body>
</html>

Tagging campaign contents

Tags are used to group contents from different campaigns. For example:

  • Tag all teasers of season campaigns with tag teaser

Create a tag for the teaser

Campaign contents

Finally we have all the elements needed for the seasons campaign.

Let's add teasers for each campaign


And click on configure item in order to edit the content visually

Here, you can finally add the content

Using campaign in pages

In order to add a managed campaign to a page, a special component is needed: campaign-manager:components/managed-campaign


Let's add it to travel's prototype main area

campaign-demo/decorations/travel-demo/templates/pages/prototype.yaml
areas:
  main:
    availableComponents:
      campaign:
        id: campaign-manager:components/managed-campaign

Then, add a managed campaign as the first component of contact page

And select the teaser tag


You will finally see the configured content depending on the season (smile)


  • No labels