Creating Templates

Dynamic Yield campaigns are built from experiences, which contain the variations you serve your visitors. Most variations are created based on a template. Templates enable you to push changes to several variations at once instead of changing the code of each of them individually.

Each Experience OS app that is also a channel includes a Templates tab where you can create, view, and edit your templates. Template types can vary between apps. Dynamic Yield offers a variety of out-of-the-box templates to support common use cases – the relevant templates are available to you when you create a variation. See our website to see some of our templates that support personalization.

You can edit these templates to suit your business needs, or create your own. You might need developer assistance to create custom templates using variables. Note that when you edit variation code in Dynamic Yield templates, this doesn't affect other experiences using the same template, but edits to custom templates affect all experiences using them. 

Learn more about Reconnect templates and Experience Email templates in their respective areas.

Creating a template for script-based campaigns

Used by: Web Personalization

1. Click Create Template.
2. Select a Template type (for example, Dynamic Content or Overlay). Note that this can't be changed later. 
3. Enter a name (and optionally, notes and labels).
4. In More Options, you can upload a custom thumbnail that is displayed in the Dynamic Yield user interface when creating a new variation (maximum file size: 2MB).
5. Write the code that will define the template. Use the tabs to select the language, such as HTML or JavaScript. 
6. In some types of templates, you can add external stylesheets and code in the CSS and JS tabs by specifying a URL where the resources are located. 
   
7. Preview how your template will look in different device types or sizes. In overlays and notifications, you can also choose the position on screen.
   
8. After writing the code, create variables based on the use cases for the template. Any elements that may need to be modified when using the template should be turned into variables by highlighting a string and clicking Convert to Variable. Common examples are title text, background color, button text, etc. When the template is used to create variations, users will be able to specify values for each variable in a simple form. For more details, see Variables below.
9. Save the template.

The template now appears in the Templates tab as well as in the variation creation flow of the relevant campaign type (Dynamic Content, Recommendations, and so on).

Note: Any change done to the template will affect the variations that are connected to it, so you can apply changes to all variations at once. If you add a new variable, all connected variations will receive the value that is entered in the template.

Creating a template for API-based campaigns

Used by: Web Personalization, App Personalization

There are two types of API campaign templates. The procedure to create them is the same:

• API Custom Code: What you create in the template is the data returned inside the variations list in the API response.
• API Recommendations: What you define in the template is returned in addition to the recommended products.

To create a template:

1. In your app's Templates tab, click Create Template and select either API Custom Code or API Recommendations.
2. Create and edit variables in the Variables tab, and edit the code in the JSON tab.
3. Save. The template now appears on the list in the Templates tab.

Template variables

Variables can be used in your templates to allow users to modify aspects of the template without changing the template itself. For example, if you defined a button with text in a template, you can turn the text into a template variable to allow users to easily change the text every time the template is used. 

Variables can also be used to modify your templates based on data such as the user's location, a property of a product from your feed, or even the cookies in a user's browser.  

1. To transform a string in your code to a variable, highlight a section of text in a template and click “Convert to Variable” or manually write ${variable_name}.
   
2. Define the variable type and value. For details, see the Variable Types section. 

3. To improve the usability of your variables, you can define tooltips for each variable as well as a placeholder text for some of the variable types. The placeholder text is gray displayed in the selector field before the user enters their value, typically used to include an example value or a description of what should be entered (e.g. "Enter button text here"). 
   

4. Under the Variables tab in the web authoring view, a new field will appear for every variable in your code, allowing you to reuse the code and choose a different value for everyone of the different variations in your campaign variations.
   

Variable types

Different variable types can help you build a better and smarter "form" for this template, so the value will replace the variable in the code:

• Text: Enables users to enter text.
• Image: Enables users to upload a different image (up to 2MB).
• Color Picker: Enables the user to choose a color from a color palette.
• Number
• Dropdown: Enables the user to select from a list of values that the developer determines in advance.
• CSS Selector
• Product Performance: This variable will dynamically render the number of a product’s viewers or purchasers in a given timeframe.
• User Data Feed Property: Enables the user to generate a specific value from an existing user data feed. The user can select a specific column in the selected data feed and add text before or after to create a full sentence. The choose call response will include the specific value per user in the JSON file.
  
• User Location: Dynamically replace the variable with the visitor’s location as its value (city, US state, or country), and can be accompanied by text before and after the location name. Users can enter a fallback text in case the visitor's location can't be determined.
• Cookie:  Dynamically replace the variable with the visitor's cookie value (cookie name is determined by the developer). Users can enter a fallback value in case no cookie exists.
• Evaluator: Dynamically replaces the variable with the evaluator value (the evaluator is determined by the developer). Users can enter a fallback value in case the evaluator doesn't return any value.
• URL parameter: Dynamically renders for each visitor the URL parameter value that each visitor receives for the defined parameter; a fallback is required in case the visitor arrives without the URL parameter or without its value.
• Unique Key: Enables the user to generate a random key. Key generation is done only when creating the variation; the same selected key will be used for all visitors viewing the variation.
• Strategy Title: Displays the title of your recommendation strategy.

There are additional variables that allow you to dynamically render information about the Dynamic Yield campaign, such as campaign name and variation name:

• ${dyTagName} – renders the campaign name
• ${dyTagId} – renders the campaign ID
• ${dyExperienceName} – renders the experience name
• ${dyExperienceId} – renders the experience ID
• ${dyVariationName} – renders the variation name
• ${dyVariationId} – renders the variation ID  

Viewing template activity (change history)

You can view the history of changes made to the code of your templates. This can be used  for troubleshooting or to retrieve a previous version of your code. 

Click the Additional Optionsicon for the template, and then click Activity. 

You can also view the template activity when editing a template by clicking on the activity icon:

In the template's activity page, you can download a detailed log in CSV format:

The CSV file contains one line for every change to a property in the template. The following columns are included:

• Date: The date and time the change was saved.
• User: The Dynamic Yield user who made the change.
• Property: The area of the template that was changed. 
• From: The original value of the property.
• To: The changed value of the property. 

Note: This log is only available for templates that were edited or created after July 2019. 

See which experiences use each template

In the templates list, you can use the experience column to see how many experiences are currently using each template.

Click the number to see more details. If you want to archive or delete the template, you can use this window to quickly unlink all experiences. The experiences will maintain their look and feel, but will no longer be linked to a template.  

Deleting and archiving templates

You can delete or archive a template at any time by clicking the More icon next to any template in the list and selecting Delete or Archive. When you delete a template, it is permanently removed. When you archive a template, it can be unarchived at any time.

In both cases, if the template was being used by one or more experiences, they will retain the template code, but it will no longer be linked to a template.

Copying templates to a different section

You can copy a template to one or more different sections in the same Dynamic Yield account. To do so, click the More icon and then click Copy to Another Site.

Select target sections and a copy of the template is then created in those sections. If a template already exists with the same name, you will be asked if you want to replace the template or cancel the copy operation. 

The copies are not linked, so future changes to either the original copy or the new copies will not affect each other. Remember also that the copy is not linked to any campaigns, so to use it, select it from the Template screen when editing a variation.