Dynamic Content Campaigns – Dynamic Yield Knowledge Base

The Dynamic Content module allows you to replace static web components and turn them into dynamic experiences by controlling them directly from the Dynamic Yield Admin. Some use case examples for Dynamic Content are dynamic rule-based banners, smart referrals to additional content (rather than static lists subject to manual updates), dynamic sliders with data feed based content etc.

Creating a Dynamic Content Campaign

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

Dynamic Content Campaign Settings

Layout

Once you provide a campaign with a unique name, select its layout type.

Single – One variation out of all available variations will be chosen and displayed to the visitor.
Item List – Group of banners that are served together. Dynamic Yield will choose the best set of variation, automatically sorting it by performance (best variation first, and so on), according to the primary metric.
Slider – Similarly to Item List, but already wrapped in a carousel UI.

Location

Dynamic Content can be inserted and placed onto any page of your website using the following methods:

Replace Element: Dynamic Yield will render 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.
Add After Element: The same as "replace element", but the element is placed just after a specific CSS selector.
Add Before Element: The same as "replace element", but 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 publishing the campaign, hover over the campaign name and click on the code icon to locate the code.

For the first three options, you also specify which pages Dynamic Yield should render the campaign on.

Defining 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:

When creating or editing a Dynamic Content Item List, in the Item List Layout area select Custom.
You can define a Tag wrapping all variations to replace the default <div> tag wrapping all the variations with a different HTML tag, for example, <ul>
You can define a Tag wrapping each variation to replace the default <div> tag wrapping each variation with a different HTML tag, for example, <il>
You can add CSS or JS which will be added to the item list container and will apply to all variations in the code editor.
You can add HTML Before Items or HTML After Items. This is useful for header and footer text.

Advanced Settings

Fire Google Analytics Event: Only visible 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 a 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 (classic) 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 per Experience.

Note: Pinning variations is not supported for variations created using Variation Feeds.

Item List Custom Layout Code Examples

You can use the following same 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;
  }
}