Email Dynamic Templates

EngagelabのEmail動的テンプレートは、Handlebarsテンプレート言語をサポートしており、APIを介して送信されるパーソナライズされたコンテンツをレンダリングできます。

変数置換

基本的な置換

テンプレート例

Hello {{firstname}}

              
              <p>Hello {{firstname}}</p>

このコードブロックはフローティングウィンドウ内に表示されます

テストデータ

{ "firstName": "Engagelab" }

              
              { "firstName": "Engagelab" }

このコードブロックはフローティングウィンドウ内に表示されます

レンダリング結果

Hello Engagelab

              
              <p>Hello Engagelab</p>

このコードブロックはフローティングウィンドウ内に表示されます

レンダリング結果

テンプレート例

Hello {{user.profile.firstName}}

              
              <p>Hello {{user.profile.firstName}}</p>

このコードブロックはフローティングウィンドウ内に表示されます

テストデータ

{ "user": { "profile": { "firstName": "Engagelab" } } }

              
              {
    "user": {
        "profile": {
            "firstName": "Engagelab" 
        }
    }
}

このコードブロックはフローティングウィンドウ内に表示されます

テストデータ

Hello Engagelab

              
              <p>Hello Engagelab</p>

このコードブロックはフローティングウィンドウ内に表示されます

テストデータ

ormatDateはUnixタイムスタンプまたはISO8601形式の時間を受け取り、以下の表に示すプレースホルダーを使用して指定された形式に変換します。 UTC時間1987-09-20T20:55:00.000Zを例に取ると、変換結果は以下の通りです：

プレースホルダー	結果
YYYY	1987
YY	87
MMMM	September
MMM	Sep
MM	09
M	9
DD	20
D	20
dddd	Sunday
ddd	Sun
hh	08
h	8
HH	20
H	20
mm	55
m	55
ss	00
s	0
A	PM
ZZ	+0000
Z	+00:00

テンプレート例

{{formatDate timeStamp dateFormat}}  {{formatDate timeStamp dateFormat timezoneOffset}}

              
              <p>{{formatDate timeStamp dateFormat}}</p>
<!-- タイムゾーンオフセット例  -->
<p>{{formatDate timeStamp dateFormat timezoneOffset}}</p>

このコードブロックはフローティングウィンドウ内に表示されます

テンプレート例

{ "timeStamp": "1987-09-20T12:55:00.000Z", "dateFormat": "YYYY-MM-DD HH:mm:ss A", "timezoneOffset": "+0800" }

              
              {
  "timeStamp": "1987-09-20T12:55:00.000Z",
  "dateFormat": "YYYY-MM-DD HH:mm:ss A",
  "timezoneOffset": "+0800"
}

このコードブロックはフローティングウィンドウ内に表示されます

レンダリング結果

1987-09-20 12:55:00 PM  1987-09-20 20:55:00 PM

              
              <!-- レンダリング結果 (テンプレート1)  -->
<p>1987-09-20 12:55:00 PM</p>

<!-- レンダリング結果 (テンプレート2)  -->
<p>1987-09-20 20:55:00 PM</p>

このコードブロックはフローティングウィンドウ内に表示されます

Insert

テンプレート例

Thank you for contacting us about {{insert businessName "your business"}}.

              
              <p>Thank you for contacting us about {{insert businessName "your business"}}.</p>

このコードブロックはフローティングウィンドウ内に表示されます

テストデータ

// テストデータ1 {} // テストデータ2 { "businessName": "Engagelab" }

              
              // テストデータ1
{}

// テストデータ2
{
    "businessName": "Engagelab"
}

このコードブロックはフローティングウィンドウ内に表示されます

レンダリング結果

Hello Ben! Thank you for contacting us about your business.  Hello Customer! Thank you for contacting us about Engagelab.

              
              <!-- レンダリング結果1 -->
<p>Hello Ben! Thank you for contacting us about your business.</p>

<!-- レンダリング結果2 -->
<p>Hello Customer! Thank you for contacting us about Engagelab.</p>

このコードブロックはフローティングウィンドウ内に表示されます

条件文

If, Else, Else If

テンプレート例

{{#if user.profile.isTeacher}} Hello, Teacher {{user.profile.firstName}} {{else if user.profile.isStudent}} Hello, Student {{user.profile.firstName}} {{else}} Hello, {{user.profile.firstName}}! Welcome. {{/if}}

              
              {{#if user.profile.isTeacher}}
   <p>Hello, Teacher {{user.profile.firstName}}</p>
{{else if user.profile.isStudent}}
   <p>Hello, Student {{user.profile.firstName}}</p>
{{else}}
   <p>Hello, {{user.profile.firstName}}! Welcome.</p>
{{/if}}

このコードブロックはフローティングウィンドウ内に表示されます

テストデータ

// テストデータ1 { "user": { "profile": { "firstName": "Zhang San", "isTeacher": true } } } // テストデータ2 { "user": { "profile": { "firstName": "Li Si", "isStudent": true } } } // テストデータ3 { "user": { "profile": { "firstName": "Wang Wu", } } }

              
              // テストデータ1
{
    "user": {
        "profile": {
            "firstName": "Zhang San",
            "isTeacher": true
        }
    }
}

// テストデータ2
{
    "user": {
        "profile": {
            "firstName": "Li Si",
            "isStudent": true
        }
    }
}

// テストデータ3
{
    "user": {
        "profile": {
            "firstName": "Wang Wu",
        }
    }
}

このコードブロックはフローティングウィンドウ内に表示されます

レンダリング結果

Hello, Teacher Zhang San  Hello, Student Li Si  Hello, Wang Wu! Welcome.

              
              <!-- レンダリング結果 (テストデータ1)  -->
<p>Hello, Teacher Zhang San</p>

<!-- レンダリング結果 (テストデータ2)  -->
<p>Hello, Student Li Si</p>

<!-- レンダリング結果 (テストデータ3)  -->
<p>Hello, Wang Wu! Welcome.</p>

このコードブロックはフローティングウィンドウ内に表示されます

Unless

テンプレート例

{{#unless license}} WARNING: This entry does not have a license! {{/unless}}

              
              {{#unless license}}
    <p class="warning">WARNING: This entry does not have a license!</p>
{{/unless}}

このコードブロックはフローティングウィンドウ内に表示されます

テンプレート例

{}

{}

このコードブロックはフローティングウィンドウ内に表示されます

レンダリング結果

WARNING: This entry does not have a license!

              
              <!-- レンダリング結果 -->
<p class="warning">WARNING: This entry does not have a license!</p>

このコードブロックはフローティングウィンドウ内に表示されます

比較演算子

比較演算子は、基本および else付きの2つの使用方法をサポートしています。

サポートされている構文は以下の表に示されています：

式	説明
greaterThan	>
lessThan	<
equals	=
greaterThanOrEquals	>=
lessThanOrEquals	<=
notEquals	!=

基本

テンプレート例

{{#greaterThan truckWeight limitWeight}} The truck is not allowed to pass. {{/greaterThan}}

              
              <p> 
{{#greaterThan truckWeight limitWeight}}
The truck is not allowed to pass.
{{/greaterThan}}
</p>

このコードブロックはフローティングウィンドウ内に表示されます

テストデータ

{ "truckWeight": 6, "limitWeight": 5 }

              
              {
    "truckWeight": 6,
    "limitWeight": 5
}

このコードブロックはフローティングウィンドウ内に表示されます

レンダリング結果

The truck is not allowed to pass.

              
              <p> 
The truck is not allowed to pass.
</p>

このコードブロックはフローティングウィンドウ内に表示されます

Else付き

テンプレート例

{{#greaterThan truckWeight limitWeight}} The truck is not allowed to pass. {{else}} The truck is allowed to pass. {{/greaterThan}}

              
              <p> 
{{#greaterThan truckWeight limitWeight}}
The truck is not allowed to pass.
{{else}}
The truck is allowed to pass.
{{/greaterThan}}
</p>

このコードブロックはフローティングウィンドウ内に表示されます

テストデータ

{ "truckWeight": 5, "limitWeight": 5 }

              
              {
    "truckWeight": 5,
    "limitWeight": 5
}

このコードブロックはフローティングウィンドウ内に表示されます

レンダリング結果

The truck is allowed to pass.

              
              <p> 
The truck is allowed to pass.
</p>

このコードブロックはフローティングウィンドウ内に表示されます

in, notIn

比較演算子と同様に、基本およびelse付きの2つの使用方法をサポートしています。

テンプレート例

{{#in fruit favoriteFruits}} Like to eat. {{else}} Do not like to eat. {{/in}}

              
              <p>
{{#in fruit favoriteFruits}}
Like to eat.
{{else}}
Do not like to eat.
{{/in}}
</p>

このコードブロックはフローティングウィンドウ内に表示されます

テストデータ

// テストデータ1 { "fruit": "Apple", "favoriteFruits": [ "Apple", "Banana", "Orange" ] } // テストデータ2 { "fruit": "Grape", "favoriteFruits": [ "Apple", "Banana", "Orange" ] }

              
              // テストデータ1
{
    "fruit": "Apple",
    "favoriteFruits": [
        "Apple",
        "Banana",
        "Orange"
    ]
}

// テストデータ2 
{
    "fruit": "Grape",
    "favoriteFruits": [
        "Apple",
        "Banana",
        "Orange"
    ]
}

このコードブロックはフローティングウィンドウ内に表示されます

Rendering Result

Like to eat.  Do not like to eat.

              
              <!-- レンダリング結果1 -->
<p>
Like to eat.
</p>

<!-- レンダリング結果2 -->
<p>
Do not like to eat.
</p>

このコードブロックはフローティングウィンドウ内に表示されます

繰り返し

ループ (Each)

テンプレート例

<ul> {{#each fruits}} <li>{{this}}</li> {{/each}} </ul>

              
              <ul>
{{#each fruits}}
    <li>{{this}}</li>
{{/each}}
</ul>

このコードブロックはフローティングウィンドウ内に表示されます

テストデータ

{ "fruits": [ "Apple", "Banana", "Orange" ] }

              
              {
    "fruits": [
        "Apple",
        "Banana",
        "Orange"
    ]
}

このコードブロックはフローティングウィンドウ内に表示されます

レンダリング結果

<ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul>

              
              <ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
</ul>

このコードブロックはフローティングウィンドウ内に表示されます

補足事項

each を使用して配列を反復処理する場合、現在のループインデックスを参照するために {{@index}} を使用できます。

{{#each array}} {{@index}}: {{this}} {{/each}}

              
              {{#each array}} {{@index}}: {{this}} {{/each}}

このコードブロックはフローティングウィンドウ内に表示されます

さらに、オブジェクトの反復処理では、 {{@key}} を使用して現在のキー名を参照できます。

{{#each object}} {{@key}}: {{this}} {{/each}}

              
              {{#each object}} {{@key}}: {{this}} {{/each}}

このコードブロックはフローティングウィンドウ内に表示されます

With構文

テンプレート例

{{#with user.profile}} Hello {{firstName}} {{/with}}

              
              {{#with user.profile}}
<p>Hello {{firstName}}</p>
{{/with}}

このコードブロックはフローティングウィンドウ内に表示されます

テストデータ

{ "user": { "profile": { "firstName": "Engagelab" } } }

              
              {
    "user": {
        "profile": {
            "firstName": "Engagelab" 
        }
    }
}

このコードブロックはフローティングウィンドウ内に表示されます

レンダリング結果

Hello Engagelab

              
              <p>Hello Engagelab</p>

このコードブロックはフローティングウィンドウ内に表示されます