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 allow you to push changes to several variations at once instead of changing the code to each of them individually.

Dynamic Yield offers a variety of templates to support common use cases that are only available when creating variations. You can see the list of templates when creating or variation, or on our website (they are not visible in the Assets > Templates area). While we test these templates on a variety of use cases, you may need to adjust them to work properly in your environment. 

A developer can also design and build a custom template, which can later be selected when creating a variation. Just like in variations, a template can contain variables in the code, to make part of the code accessible to marketers. Variables also allow you to change the content of different variations which are based on the same template.

When basing your variation on one of Dynamic Yield's templates, you can edit the variation code with no effect on other experiences using the same template. However, if you edit a custom template, it affects all experiences using that template. 

Creating a template

1. Go to Assets › Templates and click Add New. 
2. Enter a name, and notes and labels (optional).
3. In the Template type drop-down, choose the type of campaign the template is designed for (e.g. Dynamic Content, Overlay) that will be using this template. Once selected, this cannot be changed. 
4. In More Options, you can upload a custom thumbnail that is displayed in the Dynamic Yield user interface when creating a new variation (max. 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 which 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.
10. Template will be listed in the Templates main list table as well as in the variation creation flow of the relevant campaign type (Dynamic Content, Recommendations, etc.).

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.

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 Variable Types below. 

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: Allows the users to enter a text.
• Image: Allows the user to upload a different image (up to 2MB).
• Color Picker: Allows the user to choose a color from a color pallete.
• Number
• Dropdown: Allows the user to choose from a list of values that developer determined in advanced.
• CSS Selector: 
• Product Performance: This variable will dynamically render the number of a product’s viewers or purchasers in a given timeframe.
• User Location: Dynamically replace variable with the visitor’s location as its value (City, US State or Country), and can be accompanied by a text before and after the location name. User can enter a fallback text in case the visitor location cannot be determined.
• Cookie:  Dynamically replace variable with the visitor's cookie value (cookie name is determined by the developer). User can enter a fallback value in case cookie does not exist.
• Evaluator: Dynamically replaces variable with the Evaluator value (evaluator is chosen by the developer). User can enter a fallback value in case evaluator does not 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: Allows 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.
• External ID: (only for triggered emails) The ID used to identify users instead of an email address. 
• Hashed Email: (only for triggered emails) The user's email address in hashed format. 
• Encrypted Message (HMAC): (only for triggered emails)
• Plain Text Email: (only for triggered emails)
• Product Selection Strategy: (only for push notifications)
• Composite: (only for push notifications) 

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 to trace the source of a problem (troubleshooting) or retrieve a previous version of your code. 

You can view the Template History of each template by clicking more next to each template in the template list and clicking 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. 

Viewing 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 site

You can copy a template to one or more different sites in the same Dynamic Yield account. To do so, hover over a template and click Copy on the right. Select the target sites and a copy of the template will be created in those sites. 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.  

Native mobile templates

Mobile templates are built using HTML, CSS, and JavaScript that use WebView to render the experience. There is also a native Dynamic Yield Template for overlays that do not use WebView and thus loads faster.