Dynamic Content Campaigns

The Dynamic Content module enables you to replace static web components and turn them into dynamic experiences by controlling them directly from the Experience OS console.Use cases for Dynamic Content include dynamic rule-based banners, smart referrals to additional content (rather than static lists subject to manual updates), dynamic sliders with data feed-based content, and more.

Create a Dynamic Content campaign

1. Go to Site Personalization › New Campaign and click Dynamic Content.
2. Enter a name and, optionally, add notes and labels.
3. Specify the campaign settings, such as layout, location, and advanced settings. For details, see Dynamic Content campaign settings.
4. Configure the targeting settings of the experience to determine when, where, and for whom the experience is displayed.
5. Create variations using templates, based on other experiences, or by using a data feed. When you are done with each variation, click Save Variation.
6. Set the allocation, primary metric, and advanced experience settings.
7. Configure how much traffic to allocate to each variation and to the control group.
8. Click Save Experience. 
9. You can create additional experiences in this campaign by clicking the plus icon.
10. For campaigns using an embed code as the location, copy and paste the code to your site's source code. To grab the code, after a campaign is saved, hover over the campaign name and click the code icon for the embed code dialogue.
    
    Note that you can't preview the campaign until the code is embedded on your site. 

Learn more about targeting based on local weather conditions!

Dynamic Content campaign settings

Layout

After giving the campaign a unique name, select its layout type.

• Single: One variation out of all available variations is displayed to the visitor.
• Item List: A group of banners that are served together. Dynamic Yield will choose the best set of variations, automatically sorting them by performance (best variation first, and so on), according to the primary metric. 
• Slider: Similar to Item List, but already wrapped in a carousel display. 

Location

Dynamic content can be inserted and placed onto any page on your website using the following methods (for the first three options, you must specify the pages upon which Dynamic Yield should render the campaign):

• Replace Element: Dynamic Yield renders the Dynamic Content, replacing an existing element on your site with no technical or IT resources. You specify the element to replace as a CSS selector, and Dynamic Yield hides all the existing tags within the element and adds the campaign content.
• Add After Element: The element is placed just after a specific CSS selector. 
• Add Before Element: The element is placed just before a specific CSS selector. 
• Embed with Code: Implement dynamic content directly into your website’s source code (Dynamic Yield will not render it). After you publish the campaign, hover over the campaign name and click the code icon to locate the code. 

  Syntax

  DYO.smartObject(smartObjectId, props)

  Parameters:

  • smartObjectId: ID or name of the dynamic content or recommendation
  • props:
    Rendering properties:
    target: Selector ID used as rendered tag target
    afterRenderCallback: An optional function to execute after the item is rendered

  Example:

  DYO.smartObject('Car Ad', {
    target: 'car_ad_div_id',
    inline: true
  });

Defining the item list layout

You can configure an item list to display variations horizontally or vertically using the predefined item list layout options.

However, if you want to configure a different layout, such as a grid, or add some HTML to the layout, you can create your own custom layout as follows:
(See custom layout code examples)

1. While creating or editing a dynamic content item list, select Custom in the Item List Layout area.
2. Do one of the following:
   • Define a Tag wrapping all variations to replace the default <div> tag wrapping all the variations with a different HTML tag. For example: <ul>
     
   • Define a Tag wrapping each variation to replace the default <div> tag wrapping each variation with a different HTML tag. For example: <li>
     
   • Add CSS or JS to the item list container. This applies to all variations in the code editor.
     
   • Add HTML Before Items or HTML After Items. This is useful for header and footer text.  
     

Advanced settings

Setting	Description
Fire Google Analytics Event	Visible only if Google Analytics integration is enabled. This option is enabled by default, but you can disable it to prevent reporting data to Google Analytics about a specific Dynamic Content.
Execute custom integrations	Fire a custom JavaScript code when a variation is served. Custom integrations are managed in the integration screen under site settings. This option is only visible if a custom integration is enabled.
Serve on Every SPA Event	Relevant for single-page applications that don’t generate a browser refresh with every change of screen. If you require the Dynamic Content to relaunch or reevaluate its targeting conditions upon each screen change in your single-page application, fire a track_pageview event, and enable this option. For more information on working with single-page applications, please refer to this article.
Optimize Site Loading Time	Stores the experience offsite to maximize overall site loading speed. Recommended primarily for experiences below the fold to reduce the risk of flicker.
Wait for	Prevent rendering the Dynamic Content until an element has loaded or a condition has been met. Used primarily for troubleshooting purposes or to ensure that google analytics is tracking the Dynamic Content properly. Select one of the following options:
Nothing (trigger on page load)	Do not wait for anything before rendering the Dynamic Content
Element load	Wait for an element to load on the page defined as a CSS Selector
JQuery library	Wait for the JQuery library to load
Google Analytics (Classic)	Wait for Google Analytics (Classic) to load
Google Analytics (Universal)	Wait for Google Analytics (Universal) to load
Dynamic Yield data	Wait for Dynamic Yield data (such as social proof metrics) to load
External component	Wait for any custom-defined JavaScript function to load on the page

Pinning a variation

When using Item lists and Slider layouts, you can select a variation to always be first to appear. Under the variation actions select Pin Variation. Only one variation can be pinned in each experience.

Item list custom layout code examples 

You can use the following CSS code examples to create your own custom item list layout.  

Horizontal layout 

Display the items one next to each other in a single row:

 

CSS:

 .dy-container-${dyTagId} { 
  display: flex;
}

.dy-item-${dyTagId} {
  flex:1;
  margin-right:20px;
}

.dy-item-${dyTagId}:last-of-type {
  margin-right:0px;
}

Vertical layout 

Display the items one on top of the other in a single column:

 

CSS:

.dy-item-${dyTagId} {   
  margin-bottom:20px;

Grid layout: Large banners

Display the items in a grid with a maximum of three items per row. The number of items per row may be lower depending on the screen size. 

• 768px or higher: 3 items per row
• 321 - 767px: 2 items per row
• 320px or lower: 1 item per row 

This example is designed for experiences with at least 6 variations.

CSS:

.dy-container-${dyTagId} {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 20px;
}

@media only screen and (max-width: 767px) {
  .dy-container-${dyTagId} {
    grid-template-columns: auto auto;
  }
}

@media only screen and (max-width: 320px) {
  .dy-container-${dyTagId} {
    grid-template-columns: auto;
  }
}

Grid layout: Small banners

Display the items in a grid with a maximum of 6 items per row. The number of items per row may be lower depending on the screen size:

• 1681px or higher: 6 items per row
• 1023px - 1366px: 5 items per row
• 768px - 1024px: 4 items per row
• 321px - 767px: 3 items per row
• 320px or lower: 2 items per row

This example is designed for experiences with at least 12 variations.

CSS:

.dy-container-${dyTagId} {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 20px;
}

@media only screen and (max-width: 1366px) {
  .dy-container-${dyTagId} {
    grid-template-columns: auto auto auto auto auto;
  }
}

@media only screen and (max-width: 1024px) {
  .dy-container-${dyTagId} {
    grid-template-columns: auto auto auto auto;
  }
}

@media only screen and (max-width: 767px) {
  .dy-container-${dyTagId} {
    grid-template-columns: auto auto auto;
  }
}

@media only screen and (max-width: 320px) {
  .dy-container-${dyTagId} {
    grid-template-columns: auto;
  }
}