Tags:
Related
Recommended

Instant Campaign v1.1

Niclas Cedermalm
The Instant Campaign extension for SDL Web v1.1 is now available for download from SDL’s App Store:
 
It is also available on Github as open source:
 
It is formerly known as the ‘HTML Campaign Upload Connector’, but has now got a new shiny marketing name. The extension is available for SDL Web 8.1.1/8.5 and DXA 1.7 (both java and .NET). In the new version (v1.1) the Instant Campaign extension has been improved with the following:
  • Support for upload of campaign images into SDL Web so they can be managed from within the CMS
  • Support for properties in campaigns to control for example style, background images, positions etc
  • Dedicated controller for assets with support for HTTP-304 (to improve performance of image delivery)

Empowers digital agencies 

The extension makes it possible for digital agencies to create HTML based campaigns/landing pages with a rich experience in their own tool suites. When ready they can package all campaign assets (HTML, CSS,JS, images etc) into a ZIP and upload it into SDL Web. The benefit of this extension is that digital agencies are given the freedom (within defined boundaries of the brand guidelines, used CSS framework etc) to build campaign content with unique layout and interaction elements. And that without the need of creating specific templates in SDL Web for the created campaign.
 
When uploading the campaign ZIP all editable content, images and properties are extracted so it can be modified. In addition, the campaign can be localized and sent for translation using the SDL Web translation connectors for WorldServer, TMS or BeGlobal. The agency annotate the content, images and properties in the campaign HTML with some simple data attributes. Then the extension does the rest to extract the data from HTML and make it editable and localizable. The extension also comes with DXA modules for Java and .NET to render the campaigns on web sites. The DXA modules also make all editable texts and images inline editable through Experience Manager (XPM).
 
The campaign component can then be dropped onto a SDL Web managed page and published to Digital Experience Accelerator (DXA).  
 
 
 
Figure 1: Drag & drop of an uploaded HTML campaign into a SDL Web page
 
On the DXA side there is a DXA module that extracts all campaigns assets and make all editable texts and images inline editable through SDL Web Experience Manager (XPM). Properties can be modified through the metadata dialog for the campaign component.
 
Figure 2: Edit campaign texts
 
 
Figure 3: Edit campaign images
 

Figure 4: Edit campaign properties 

Localization

As the campaign is an ordinary SDL Web component it can be localized and sent for translation as any other component. This makes Instant Campaign a powerful tool to create one HTML campaign and use it for several markets and languages. Tagging images in the campaign can be localized for certain markets. In addition using properties can style etc be parameterized to localize look & feel. This allows campaigns to be reused for several purposes.

Figure 5: Send campaign for translation

 Figure 6: Localized campaign

Building HTML Campaigns

You can create new HTML campaigns in any HTML design/code tool. A campaign ZIP package can contain the following:

• index.html - the main HTML markup for campaign content. Is not a full HTML page, only a HTML fragment for the actual campaign.
• header.html - additional CSS/JS to be included on top of the page (optional)
• footer.html - additional JS to be included on the bottom of the page (optional)
• All needed assets such as needed CSS and javascripts (both custom ones and standard 3PPs not provided by the standard site design). Plus images and other assets that referred from the HTML/CSS. The assets can be in different folders if needed.
 
You have to add the following data attribute (on any HTML element) for all textual content that you want to editable and translatable:
<h1 data-content-name="intro-text">Some texts some can be editable</h1> 
To specify that an image is replaceable by the CMS you use the following data attribute on image elements:
<div>
   <img data-image-name="booknow" class="book-image" src="images/booknow.png">
</div>
You can also use properties in your HTML markup that can be managed by CMS. The properties replace certain HTML element attribute values such as background image, CSS class/style etc. You use the following data attributes to accomplish that:
<div data-property-name="quote2-position" data-property-target="style"
     class="quote-block" style='top: 40%; left: 25%;'>
   <p data-content-name="quote2" class="quote">"Highly recommended!"</p>
   <p class="quote-name">Phillipe Leblond, Paris</p>
 </div> 
The ‘data-property-name’ is used to define property name and the ‘data-property-target’ is used to define the target attribute for substitution. It is also possible to have several properties on one single HTML element. For the additional properties you postfix the data attribute with an index, e.g. 'data-property-name-2' and 'data-property-target-2'. Example of markup: 
<div
    data-property-name="hero-background-style"
    data-property-target="style"
    style='background-image: url(img/default-background-image.jpg);'
    data-property-name-2="hero-class"
    data-property-target-2="class"
    class="hero">
      <img data-image-name="img/default-hero-image.png"></img>
 </div>
When uploading the campaign into SDL Web all marked textual content, images and properties are extracted into a list of embedded schema fields.
All non-absolute references to assets will be rewritten to unique campaign URLs on the DXA side.
The digital agency/internal web team should share the base HTML, CSS, JS which form the brand look & feel. Which is also used when develop and test
the campaign HTML. All CSS/JS not part of the base look & feel needs to be included in the campaign ZIP. Plus all other assets such as images, fonts, movies etc.
 
As the data attributes are non-intrusive the digital agency can use any CSS/JS framework when building the campaign. They can test the whole campaign standalone in their tool suite as all markup is still valid HTML. The texts might be just lorum ipsum which the SDL Web editor will change when the campaign has been uploaded into the CMS. 
Figure 7: Building campaigns in ordinary HTML tool 

A simple approach of running campaigns standalone using the DXA white label design is found here: 
https://github.com/sdl/dxa-flexible-campaign-content/tree/master/cms/example-campaign 

A simple example

index.html:

<div class="main" data-property-name="mainClass" data-property-target="class">
  <div class="intro">
    <img data-image-name="intro-image" src="images/image1.jpg"/>
    <h1 data-content-name="intro-text">Campaign intro</h1>
  </div>
  <div data-content-name="body-text">
    <h3>some rich content comes here</h3>
    <p>And some more text comes here. 
    All this text can be modified in SDL Web.</p>
  </div> 
</div>

header.html (to be injected in the page header):

<link rel="stylesheet" href="css/jquery-ui.min.css">
<link rel="stylesheet" href="css/example.css">

footer.html (to be injected in the page footer):

<script src="scripts/jquery-ui.min.js"></script>
<script src="scripts/example.js"></script>

example.css:

 .intro {
  background: url(../images/image2.jpg) no-repeat center center fixed;
  background-size: cover;
  padding-top: 100px;
 }

Files to be included in the campaign ZIP:

  • index.html
  • header.html
  • footer.html
  • images/image1.jpg
  • images/image2.jpg
  • css/jquery-ui.min.css
  • css/example.css
  • scripts/jquery-ui.min.js
  • scripts/example.js

See picture below what data that are extracted from the campaign into metadata of the multimedia component.

Figure 8: Campaign multimedia component metadata

All images belonging to the campaign is created under a dedicated folder for the campaign. The new folder is created in the same directory where the campaign component has been created. The name of the created folder follows the format: “[Campaign Name] Images”, e.g. “Example Campaign Images”.

How it works

The Instant Campaign extension consists of the following parts:

  • Event system extension
  • Multimedia schema for campaign ZIP files with metadata fields for extracted content, images and properties
  • DXA modules for DXA.Java and DXA.NET

Event system extension

The event system extension triggers when saving a multimedia component using the Campaign ZIP multimedia schema. If no content is associated with the ZIP component then it extracts the ZIP file and process the index.html for tagged content, images and properties. All found data is extracted from the HTML file (if textual content) or from the ZIP file (if images) and saved in the metadata fields of the multimedia component.

Multimedia schema

There is dedicated multimedia schema for campaign ZIPs. It has the following metadata fields defined:

  • tagged content - list of embedded schema fields (name, RTF content field) storing the extracted content.
  • tagged images - list of embedded schema fields (name, multimedia link) storing the extracted images.
  • tagged properties - list of embedded schema fields (name, value, target, index) storing the extracted properties. The 'target'-field is used to define what element attribute to modify. The 'index'-field is used when having several properties on the same element.

The metadata fields are automatically populated with data from the campaign, when the campaign ZIP multimedia component is saved for the first time (via the event system extension).  

DXA module

The DXA module contains two controllers:

  • Campaign controller - an DXA entity controller that renders the campaign. It will extract the campaign ZIP in the BinaryData folder (where all other cached data is stored in DXA). It will then process the index.html file and inject CMS content and process asset links. And do substitution of property values in the output HTML. In addition all editable content and images is surrounded with XPM markup to make them inline editable.
  • Campaign asset controller - delivers all campaign assets (CSS, JS, images etc) in the campaign ZIP. It fully supports localized URLs etc.

For more details about the implementation of Instant Campaign, please see the Github repository: https://github.com/sdl/dxa-flexible-campaign-content

  • If an implementation starts approaching hundreds of Schemas and as many Component Templates or more, it's a sign that you could benefit from something like the Instant Campaign module.

    A good number of my Content Modeling blog posts were dedicated to solving challenges related to this kind of HTML-driven, flexibile campaign or promotional content types. :-)