Tags:
Related
Recommended

Getting started with Instant Campaign

Niclas Cedermalm

Introduction

The Instant Campaign extension for SDL Tridion Sites has been designed to make it easy for digital agencies to create campaigns/landing pages and publish them through SDL Tridion Sites. When the campaign has been uploaded into SDL Tridion it can be edited and localised for different languages. However Instant Campaign can be used for any scenario when a "schema-less” and “template-less" approach could be a nice fit, for example short lived campaign content, product detail pages with unique experience (for example Apple’s detail pages for iPhone, iPad etc), SPA applications etc. For example one retail company is using Instant Campaign to drive their home page where the page change for each week with new unique content & interaction elements. Here is Instant Campaign a good alternative to traditional CMS templating when the marketing division often wants to push out content with unique experience to the site.

Below is a video demonstrating on how a HTML campaign is created in an external tool and uploaded into SDL Tridion Sites. After that it edited in XPM and send for translation:

How it works

A ZIP file is created with all needed assets (CSS, JS, images etc) alongside a HTML file. In HTML file all content, images, links and properties that can be edited through the CMS is annotated with standard HTML data attributes. For example:

<body>
  <h1 data-content-name="intro-text">Some texts some can be editable</h1>
  <div>
    <img data-image-name="booknow" class="book-image" src="images/booknow.png">
  </div>
  <div>
    <a href="https://en.wikipedia.org/wiki/Monument_Valley" data-link-name="monument-valley-link">
      <span data-content-name="monument-valley-link-text">Read more</span>
    </a>
  </div>
</body>

Example of files that are included in a campaign ZIP file:

  • index.html (the main HTML for the campaign)
  • header.html (additional CSS/JS includes for the campaign)
  • footer.html (additional JS includes for the campaign)
  • images/image1.jpg
  • images/image2.jpg
  • css/jquery-ui.css
  • css/example.css
  • scripts/jquery-ui.min.js
  • scripts/example.js

This make it possible to use any HTML tool to create the markup. When the ZIP file is uploaded into SDL Tridion Sites an extension is triggered (an event system extension) that extract all editable items (content, images etc) into the CMS. This makes it possible to edit all annotated items in Tridion (either in CME or inline on the staging site via XPM).

A companion DXA module (available both for Java and .NET) is used to render the HTML campaign on the web site. The code for the DXA module (available as open-source on Github) can be used as reference to implement Instant Campaign for other stacks such as DD4T etc.

Quick Setup for SDL Web 8.5 and DXA.NET 2.0

Below is a quick setup description for SDL Web 8.5 (support for SDL Tridion Sites 9.0 & DXA 2.1 will follow shortly).

  1. Download latest version from SDL AppStore: https://appstore.sdl.com/web-content-management/app/instant-campaign/748/ (select version 1.2.0)
  2. Install the event system extension:
    • Pick the DLL ' cms/campaign-upload-extension/campaign-upload-extension-v1.2.0.dll’ from the install package and place it somewhere on your SDL Web 8.5 CMS server.
    • Add the following in your %SDLWEB_HOME%\config\Tridion.ContentManager.config in the <extensions> tag:

       <add assemblyFileName="[PATH TO DLL]"/>

    • After that restart the services 'SDL Web Content Manager Service Host' and 'SDL Web Transport Distributor Service’

  3. Install the Instant Campaign schemas & templates by using the provided Content Porter package In the ‘cms/import’-directory of the install package. Open up PowerShell to execute scripts to import it (you can use the Content Porter tool as well) by issuing the following command:

          .\cms-import.ps1 –cmsUrl [url] -moduleZip CampaignContent-Module-v1.2.0.zip
    • Verify so all schemas and templates has been imported correctly by going to your DXA master publication (typically ‘100 Master’) and locate the Building Blocks/Modules/CampaignContent’ folder. Make sure there are schemas & templates created in this directory.

  4. The DXA.NET artifacts are located under ‘dxa/dotnet’ in the install package. To install the module to your DXA instance you need to do the following:
    • Copy the files under ‘Areas’ to your %DXA_HOME%/Areas
    • Copy bin/Sdl.Web.Modules.CampaignContent.dll and bin/NSoup.dll to your %DXA_HOME%/bin
    • After that recycle your DXA application pool.

  5. Now you are all set to test an Instant Campaign ZIP package. There is an example package here in the install package:  ‘example-campaign/ExampleCampaign.zip’.
    • Upload it to SDL Tridion Sites as a multimedia component using the multimedia schema ‘Campaign Content ZIP’. 
    • Save the component. When saving the component all editable content, images etc are extracted from the ZIP file. 
    • Open up the multimedia component and verify so all content has been extracted. See below example:


  6. Create a new CMS page in CME using the new page template ‘Campaign Page’. Select the uploaded campaign component and add it to the created page using the component template ‘Campaign Content ZIP Template’. Save the page and publish to your staging site. After the page has been successfully published you should see the following example campaign on your staging site:
  7. If you have XPM enabled on your staging site you can go into edit mode on this page and verify so you can inline edit content and replace images:

       

More details are given the provided install guide in the install package which contains info on how to prepare the schemas for translation management, distribute DXA DLL packages as NuGet packages etc. All source code for Instant Campaign is available as open-source on Github: https://github.com/sdl/dxa-flexible-campaign-content

A example campaign is described in my previous blog post: https://community.sdl.com/product-groups/sdl-tridion-dx/tridion-sites/tridion-developer/b/weblog/posts/instant-campaign-v1-1

Let me know your experiences using Instant Campaign. If you have any questions do not hesitate to either comment below or drop me an email at ncedermalm@sdl.com.