Insight User Conference Bootcamp - Advanced Templatization
Transcript of Insight User Conference Bootcamp - Advanced Templatization
![Page 1: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/1.jpg)
1
Isaac Kim & Fiona Snoddy
Advanced Templatization
November 3, 2015
![Page 2: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/2.jpg)
2
Fiona Snoddy
• Celebrating 1-year anniversary with SparkPost
• Worked on several SPE implementations, including our very first!
• Lives in Columbia, MD
• Loves working-out, water-skiing and watching rugby & ice-hockey
![Page 3: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/3.jpg)
3
Let’s Go Caps!!!!
![Page 4: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/4.jpg)
4
Isaac Kim
• Been with SparkPost for 8 months
• Supports both SPE and Momentum implementations
• Lives in Columbia, MD
• Loves fishing, CrossFit, and recently started up archery
![Page 5: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/5.jpg)
5
Chris Arnold - Template Guru
![Page 6: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/6.jpg)
6
Objectives
Exposure to Advanced Template
Functionality
Insight into Real-world
Applications
Knowledge of Resources
![Page 7: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/7.jpg)
7
Agenda • Templating Overview
• Conditional Statements
• Personalized Links URL encoding Disabling URL encoding
• Dynamic Content
• Looping Simple Nested
• Q & A
![Page 8: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/8.jpg)
8
Approach: The Bears are Heading to Insight
![Page 9: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/9.jpg)
9
Transmission Substitution Data
Conditional IF not Statement Triple Curly Escape URL Link
Conditional IF Statement Encoded URL Link
Complex Conditional Statement Dynamic Content
Simple Loop Simple Loop with Multiple Objects
Nested Loop with Objects
![Page 10: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/10.jpg)
10
Template features accessible on…
SparkPost SparkPost Elite Momentum
Template Functionality
![Page 11: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/11.jpg)
11
Templating Overview
• Substitution data can be specified at the transmission and/or recipient level
• Defined as a JSON object of key/value pairs • Substitute using double curly brackets • Substitution data can be used in both text and HMTL templates
• Metadata can be also be used as substitution data
JSON substitution data can be combined with a template to personalize the recipient’s text, HTML and subject line
![Page 12: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/12.jpg)
12
Template:
Templating Overview: Real-world Application
{
"firstName” : "Papa Bear”
}
Substitution Data:
Welcome to Insight {{firstName}}!
![Page 13: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/13.jpg)
13
Conditional Statements
• Can be used standalone as well as in expressions • Multiple syntax options
If then else If not Elseif If empty If not empty
• Can be complex combine with basic/robust substitutions Concatenated conditions i.e. if A and B and C = x then
The ability to render different per recipient content based on a given condition(s)
![Page 14: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/14.jpg)
14
Conditional Statements: Syntax Examples
The conditional statement is the following:
if not Syntax
elseif Syntax
{{if not signed_up}}
Don't forget to sign up!
{{end}}
{{if signed_up}}
Welcome, thanks for signing up!
{{elseif rejected_sign_up}}
We won't bother you anymore!
{{else}}
Don’t forget to sign up!
{{end}}
![Page 15: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/15.jpg)
15
Conditional Statements: Syntax Examples
The conditional statement is the following:
if empty Syntax
If not empty Syntax
{{ if not empty(orders) }}
Here is a list of your orders
{{else}}
You have no outstanding orders
{{ end }}
{{ if empty(orders) }}
You have no outstanding orders
{{ else }}
Here is the list of your orders
{{ end }}
![Page 16: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/16.jpg)
16
Conditional Statements: Real-world Application
{{if Attending_Insight}}
You'll be on California's central coast in November, so prepare for multiple scenarios. November temperatures in Monterey average 65/50 with mid to low chance of rain. For up to the minute weather information for the area, check out <a href="#">weather.com</a>!</p>
• <a href="https://www.google.com/?gws_rd=ssl#q=weather+{{local_city}}">Your Local Area Weather Report </a><br>
• <a href="https://www.google.com/?gws_rd=ssl#q=weather+{{dest_city}}">Your Destination Area Weather Report</a><br>
{{else}}
It's not too late to register and attend Insight! Sign up today so you can enjoy the lovely weather on California's central coast. For weather updates, check out <a href="#">weather.com</a>!</p>
{{end}}
Substitution Data: “Attending_Insight” : true,
Template:
![Page 17: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/17.jpg)
17
Conditional Statements: Real-world Application
{{if not Airports[departAirport]}}
Hi {{ firstName or 'there' }}, You do not appear to be traveling anywhere. This email must be a mistake.
{{else}}
{{if Airports[departAirport] and Airports[departAirport].city then}}
Hi {{ firstName or 'there' }}, You are planning a trip from {{departAirport}} in {{Airports[departAirport].city}} to {{arriveAirport}} in {{Airports[arriveAirport].city}}.
{{end}}
{{end}}
Template:
Substitution Data: "arriveAirport":"SFO",
"Airports":{
"SFO":{
"code":"SFO",
"city":"San Francisco",
"name":"San Francisco International Airport”,
![Page 18: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/18.jpg)
18
Personalized Links
• Substitution data can be used to replace part or all of a URL • The substitution engine automatically encodes the
substitution values to handle special characters • Encoding can be disabled on a per substitution basis
(triple curly brackets)
The ability to render a target URL link containing one or more substitutions
![Page 19: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/19.jpg)
19
Personalized Links (URL Encoding): Real-world Application
Personalized Link in Template <a href="https://www.google.com/?gws_rd=ssl#q=weather+{{local_city}}">Your Local Area Weather Report </a>
{
“local_city” : “ellicott city”,
}
<a href="https://www.google.com/?gws_rd=ssl#q=weather+ellicott%20city">Your Local Area Weather Report </a>
Link (with URL encoding) in Email
Substitution Data
![Page 20: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/20.jpg)
20
Personalized Links (Disabling URL Encoding): Real-world Application
Please be sure to refer your fellow coworkers to sign up to the {{year}} INSIGHT Conference by sending them to this <a href="{{registration_link}}">link </a> or this <a href="{{{registration_link}}}">link here</a></a>!</p>
"registration_link": "https://www.regonline.com/register/checkin.aspx?EventId=1693737&MethodId=0& EventSessionId=&startnewreg=1",
https://www.regonline.com/register/checkin.aspx?EventId=1693737&MethodId=0&EventSessionId=&startnewreg=1
Template:
Substitution Data:
Actual Link:
![Page 21: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/21.jpg)
21
• Use render_dynamic_content macro to display chunks • Links (including the ability to track them) may appear in
either HTML or text chunks • Substitution statements may appear in these chunks
• Dynamic content must be specified at the transmission level
• Define substitution as “dynamic_html” and/or “dynamic_text”
Dynamic Content
The ability to embed entire chunks of text or HTML within substitution data rather than within the template
![Page 22: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/22.jpg)
22
Dynamic Content: Real-world Application
{{if dynamic_html.Options}}
{{render_dynamic_content(dynamic_html.Options[REGISTRATION_OPTION])}}
{{end}}
"REGISTRATION_OPTION": "2",
"dynamic_html": {
"Options":{
"1": "<a href=\"https://www.regonline.com/register/checkin.aspx?EventId=1693737&MethodId=0&EventSessionId=&startnewreg=1\" target=\"_blank\" style=\"font:14px arial,helvetica,sans-serif; color:#003a6f; text-decoration:underline;\" title=\"Register Now\">Register Here Today</a>",
"2": "<a href=\"https://www.messagesystems.com/insight/agenda\" target=\"_blank\" style=\"font:14px arial,helvetica,sans-serif; color:#003a6f; text-decoration:underline;\" title=\"Insight Conference Agenda\">Check Out the Agenda Here</a>",
"3": "<a href=\"https://www.messagesystems.com/insight/about\" target=\"_blank\" style=\"font:14px arial,helvetica,sans-serif; color:#003a6f; text-decoration:underline;\" title=\"About Insight 2015\">Learn More About Insight Here</a>” }
Substitution Data
Template Statement:
![Page 23: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/23.jpg)
23
Looping
The ability to iterate over a sequential array of objects or values (strings)
• Implement using the “each” keyword and “loop_var” variable • Can iterate over more complex data structures, going multiple
levels down (nested looping) using “loop_vars” variable
• Can use HTML within the loop to generate template content (tables, text, bullets, lists, etc.)
![Page 24: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/24.jpg)
24
Looping (Simple): Real-world Application
Template Statement: {{each key_people}}
• {{loop_var }}<br>
{{end}}
"key_people": [
"George Schlossnagle",
"Alec Peterson",
"Mitch Harris",
"Laura Rose",
"Theo Allen"
],
Substitution Data:
![Page 25: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/25.jpg)
25
Looping (Simple): Real-world Application Template Statement: {{each districts}}
Key Attraction: {{loop_var.name}}
Distance from Hotel: {{loop_var.proximity_hotel}}
{{end}}
”districts" : [ {
"name" : "Monterey Bay Aquarium",
"proximity_hotel" : "Close",
}, {
"name" : "Lighthouse District",
"proximity_hotel" : "Closer",
}, {
"name" : "Cannery Row",
"proximity_hotel" : "Closest",
} ],
Substitution Data:
![Page 26: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/26.jpg)
26
Looping (Nested): Real-world Application Template Statement:
”districts" : [
{
"name" : "Monterey Bay Aquarium",
"tourist_attraction" : [
{"location" : "Cindy's Waterfront"},
{"location" : "Jellies Experience (Aquarium)"},
{"location" : "The Aquarium!"}, ]
{{each districts}}
{{loop_vars.districts.name}}
Nearby Places to Visit
{{each loop_vars.districts.tourist_attraction}}
{{loop_vars.tourist_attraction.location}}
{{end}}
{{end}}
Substitution Data:
![Page 27: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/27.jpg)
27
Resources
SparkPost documentation https://www.sparkpost.com/api#/reference
Momentum documentation https://support.messagesystems.com/docs/
SparkPost Blog https://www.sparkpost.com/blog/
SparkPost YouTube channel https://www.youtube.com/channel/UC5vz6wEfpJjGipY_alrYuhQ
Technical Account Manager/Engagement Manager
![Page 28: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/28.jpg)
28
• SparkPost documentation
• Momentum documentation
• SparkPost Blog
• SparkPost YouTube channel
• Engagement Manager/Technical Account Manager
Resources
• Personalized subject lines
• Default values for null values
• Render different content
• Registration status
• Departure & arrival airports
• Customer orders
• Different weather links
• Display lists
• Key people to meet
• Tourist districts
• Local attractions per district
Real World Application
• Conditional Statements
• Personalized Links
• URL encoding
• Disabling URL encoding
• Dynamic Content
• Looping
• Simple
• Nested
Objectives: Recap
Advanced Functionality
Advanced Functionality
Real-world Applications Resources
![Page 29: Insight User Conference Bootcamp - Advanced Templatization](https://reader031.fdocuments.in/reader031/viewer/2022030316/5876d9131a28ab1d238b65fb/html5/thumbnails/29.jpg)
29
Q & A