Dynamic Content Insertion

Content passed into Ion pages on the query string and/or saved to a data field can be displayed on a page and used within tracking scripts by publishing a content variable on a page or within a tracking script, respectively. Content variables are defined using two curly brackets on either side of a data name. For example, you may want to display a respondent’s first name on a Thank You page after they submit a form. In this scenario, you may publish {{FirstName}} into any text editor on the Thank You page.

*Note: The above example assumes form uses the FirstName data field to collect the respondent’s first name.

*Note: if you used the platform before October 8th, this will replace the use of @@ substitution which was previously used for content insertion.

Different types of content variables are used to accomplish different things. Below, please find a list of different types of content variables and what they would be used for:  

{{dataName}}  For standard value (HTML encoded)
{{:dataName}} For raw value
{{#dataName}}  For URL encoded value
{{~dataName}} For string encoding (used in JavaScript)
{{dataName}}  Use for dynamic insertion into pages and rules
{{:dataName}}  Use to output a raw, non-HTML encoded value
{{#dataName}}  Use when inserting/appending values to a URL:

  • Append value to an external URL in a handoff from link
  • Substitute value directly into an integration endpoint URL
  • Only supported in the context of creatives
  • Not supported in integration mash-up fields

{{~dataName}}  Use when a value includes quotes, and is being inserted into a line of JavaScript surrounded in quotes.

  • Substitute a value that includes quotes into Javascript
  • Only supported in the context of creatives
  • Not supported in integration mash-up fields

{{value}}  To literally print a value enclosed in curly braces onto the page, use “\” to escape the content variable. 

In-Page Math

Content variables can also be used to perform calculations on your page without using rules. For example, you may want to calculate the average item cost within an interactive calculator experience. You may use the below syntax directly within a text editor to divide the total order value by the total number of items to find the average item cost.

$ {{=Total_Cost / Total_Items}}  

The main components of in-page math are the two curly brackets on either side of the equation and an equals sign to begin the equation. You can then reference Ion data names within the equation as needed. When the page is viewed live, this will be replaced by the actual value with a dollar sign in front of it since it is outside of the content variable.

You can also use content variables to format numeric values in the same way you would within rules as described in the Save Formatted Numeric Data support post. When setting this up within a content variable, you would not need additional curly brackets since it is already baked into the syntax. 

For example, if you wanted to format the average item cost automatically (including the dollar sign), you could use the below syntax directly within a text editor.

Your average item value is  {{={0:$0,0.00} Total_Cost / Total_Items}}  

When this content variable is set up within a text editor, live visitors will see the average item value displayed on the page in the $0,000.00 format.

*Note:These values are not saved into your Ion console. Rules should continue to be used for any value that needs to be saved into your console and/or exported.

Share this:

Charmaine Yu is a UX/UI designer at Rock Content. With over a decade of experience in visual arts, Charmaine combines her eye for design with her love of UX to create memorable interactive content at Rock. With a UX design diploma from Brainstation, she spent the last couple of years learning and creating new content in the world of UX. Outside of work, you can find her cuddling her dog, at the next music festival or coach-potating at home.