Page tree
Skip to end of metadata
Go to start of metadata

Marketoの新しいメール2.0環境では、メールテンプレートは要素、変数、モジュール、コンテナーで構成されます。それぞれを定義するには、Marketo固有の構文をHTMLに追加します。古いメールテンプレート(v1.0)もEmail Editor 2.0でサポートされますが、新しいエディターの機能をすべて使えるわけではありません。

Note

Marketo Supportは、CSS/HTMLについては対応できません。CSS/HTMLに詳しくない場合は、開発者にご相談ください。

要素

要素とは、メールテンプレートで編集可能として定義されるコンテンツ領域です。要素を編集する操作はタイプごとに独自ですが、簡単な方法でコンテンツを操作できます。メールテンプレートに追加できる要素は、リッチテキスト、画像、スニペット、および動画です。 

リッチテキスト

領域をリッチテキストとして定義すると、ユーザーがMarketoのリッチ・テキスト・エディターを使用して、コンテンツを編集できるようになります。メールテンプレートのリッチテキスト要素を定義するには、mktEditableとmktoTextの2つの方法があります。リッチテキスト要素は、メールエディター内から、いつでもスニペットに変換できることを覚えておいてください。

方法1 - mktEditable

Email Editor 2.0には下位互換性があるので、一部の古いメールテンプレートでは、任意のHTML要素でclass="mktEditable"を追加して、リッチテキスト要素を指定できます。これは引き続きサポートされ、要素のIDは、メールエディター内部で表示名として使用されるものになります。

必須の属性
class:"mktEditable"
id:ID文字列。使えるのは文字、数字、ダッシュ、ハイフン(-)、アンダースコア(_)だけです。スペースを入れることはできません。一意でなければなりません。

オプションの属性
mktoName文字列。Email Editor 2.0で表示される表示名です。わかりやすい名前を付けることをお勧めします。

デフォルト値 
class="mktEditable"を指定したHTML要素の内容(指定されている場合)が、リッチテキスト要素のデフォルト値として使用されます。 

例:

<div class="mktEditable" id="exampleText" mktoName="Main Body Text">
Optionally add default text for the editable text area.
</div>
方法2 - mktoText

リッチテキスト要素の指定には、class="mktoText"構文を使用することをお勧めします。要素の表示名が常に正しく表示されるからです。 

必須の属性
class:"mktoText"
id:ID文字列。使えるのは文字、数字、ダッシュ、ハイフン(-)、アンダースコア(_)だけです。スペースを入れることはできません。一意でなければなりません。

mktoName:文字列。Email Editor 2.0で表示される表示名です。わかりやすい名前を付けることをお勧めします。

デフォルト値 
class="mktoText"を指定したHTML要素の内容(指定されている場合)が、リッチテキスト要素のデフォルト値として使用されます。 

例:

<div class="mktoText" id="exampleText" mktoName="Main Body Text">
Optionally add default text for the editable text area.
</div>

画像

編集可能な画像要素を定義するには、2つの方法があります。<div>タグを使用して、<img>を挿入するコンテナーを指定するか、または<img>タグを使用するかのいずれかです。エンドユーザーが画像を選択すると画像のURLが返される(DOMではなく)ようにする場合は、後述する「画像の変数」を参照してください。HTMLの<img>要素を挿入するには、以下の2通りの方法があります。

方法1 - <div>を使用する

必須の属性
class"mktoImg"
id:ID文字列。使えるのは文字、数字、ダッシュ、ハイフン(-)、アンダースコア(_)だけです。スペースを含めることはできません。一意でなければなりません。
mktoName文字列。Email Editor 2.0で表示される表示名です。わかりやすい名前を付けることをお勧めします。

オプションの属性
mktoImgClass:文字列。ここで指定する値は、<div>内部の<img>要素のclass属性に追加されます。
mktoImgSrc:この<div>内に配置される画像のデフォルト値として使用されます。省略した場合は、プレースホルダーが使用されます。
mktoImgLink:<img>を、この宛先URLを示す<a>タグで囲むことを指定します。ユーザーはこれをメールエディターで変更できます。
mktoImgLinkTarget:mktoImgLink属性の<a>タグで、このターゲットを使用することを指定します。mktoImgLinkと一緒に使用しなければ、効果はありません。
mktoImgWidth:コンテナー内の<img>でwidthとして使用されます。
mktoImgHeight:コンテナー内の<img>でheightとして使用されます。

デフォルト値(オプション)
<img>:画像を配置する<img>要素として使用されます。インラインのスタイル指定を画像に追加したい場合に便利です。ユーザーがリンクを追加する場合に、スタイル指定が削除されないように、<a> </a>タグで囲むことを忘れないでください。

例:

<div class="mktoImg" id="exampleImg" mktoName="Example Image" mktoImgLink="http://www.marketo.com">  
  <a><img style="border:10px solid red;"></a>
</div>
方法2 - <img>を使用する

Note

このオプションでは、ユーザーが画像にリンクを追加することはできません。テンプレートでリンクの追加が重要な場合は、方法1を使用してください。

必須の属性
class:"mktoImg"
id:ID文字列。使えるのは文字、数字、ダッシュ、ハイフン(-)、アンダースコア(_)だけです。スペースを含めることはできません。一意でなければなりません。
mktoName文字列。Email Editor 2.0で表示される表示名です。わかりやすい名前を付けることをお勧めします。

デフォルト値(オプション)
src:画像のデフォルト値として使用されます。省略した場合は、プレースホルダーが使用されます。

例:

<img class="mktoImg" id="exampleImg" mktoName="Example Image">

スニペット

領域をスニペットとして定義すると、この領域に挿入する承認済みのスニペットを、エンドユーザーが選択できるようになります。メールエディター内で、リッチテキスト要素をスニペットに変換できますが、スニペットとして指定した領域を、リッチテキストに変換することはできません。スニペット領域を指定するには、<div>でclass="mktoSnippet"を使用します。

必須の属性
id:ID文字列。使えるのは文字、数字、ダッシュ、ハイフン(-)、アンダースコア(_)だけです。スペースを含めることはできません。一意でなければなりません。
mktoName文字列。Email Editor 2.0で表示される表示名です。わかりやすい名前を付けることをお勧めします。

デフォルト値(オプション)
デフォルトで表示されるスニペットのID(そのIDのスニペットが存在し、ワークスペースで承認されている場合にのみ機能します)。

例:

<div class="mktoSnippet" id="unsubscribeFooter" mktoName="Unsubscribe Footer"></div>

動画

領域を動画として定義すると、メール内でサムネイル画像(「再生」ボタン付き)として表示されるYouTubeまたはVimeoのURLを、エンドユーザーが挿入できるようになります。動画領域を指定するには、<div>でclass="mktoVideo"を使用します。

必須の属性
id:ID文字列。使えるのは文字、数字、ダッシュ、ハイフン(-)、アンダースコア(_)だけです。スペースを含めることはできません。一意でなければなりません。
mktoName文字列。Email Editor 2.0で表示される表示名です。わかりやすい名前を付けることをお勧めします。

オプションの属性
mktoImgClass:文字列。ここに指定する値は、<div>内部にある動画サムネイル<img>のclass属性に追加されます。

例:

<div class="mktoVideo" id="productVideo" mktoName="Product Announcement Video"></div>

変数

変数とは、トークンのようなものです。最初に、<meta>タグを使用して、メールテンプレートの<head>セクションに変数を定義すれば、あとはテンプレート中で何度でも使用できます。変数はテンプレートで定義されるので、エンドユーザーがルールに従ってその値を変更できるようになります。モジュール(後述)内で変数を使用すると、変数値がグローバルになることに注意してください。エンドユーザーがモジュールを複製する場合、変数の値は両方のモジュールに適用されます。

文字列

変数を文字列として指定すると、メールエディターを使用するエンドユーザーが、テキストボックスにテキストを入力できるようになります。文字列変数を指定するには、<meta>でclass="mktoString"を使用します。

必須の属性
id:メールテンプレートで変数を参照する方法。
mktoName文字列。Email Editor 2.0で表示される表示名です。わかりやすい名前を付けることをお勧めします。

オプションの属性
allowHTML:ブール値。変数の値がHTMLをエスケープされるかどうかを制御します。省略した場合のデフォルト値は、Falseです。

default:文字列のデフォルト値。省略した場合は空白です。

 

例:

<meta class="mktoString" id="textHeader" mktoName="Text Header" default="Edit Me">

リスト

変数をリストとして指定すると、定義した値のセットから、エンドユーザーがメールエディターで選択できるようになります。リスト変数を指定するには、<meta>でclass="mktoList"を使用します。

必須の属性
id:メールテンプレートで変数を参照する方法。
mktoName文字列。Email Editor 2.0で表示される表示名です。わかりやすい名前を付けることをお勧めします。
values:カンマ区切りの値リスト。少なくとも1つの文字列が必要です。

オプションの属性
default:選択ドロップダウンのデフォルト値。省略した場合は、"values"属性の最初の値が使用されます。

例:

<meta class="mktoList" id="textFontFamily" mktoName="Main Text Font Family" values="Arial,Verdana,Times New Roman">

数値

変数を数値として指定すると、メールエディターを使用するエンドユーザーが、数値を入力できるようになります。数値変数を指定するには、<meta>でclass="mktoNumber"を使用します。

必須の属性
id:メールテンプレートで変数を参照する方法。
mktoName文字列。Email Editor 2.0で表示される表示名です。わかりやすい名前を付けることをお勧めします。
default::変数のデフォルト数値。

オプションの属性
min:許容最小値。
max:許容最大値。
units:メールエディターと結果コードで表示されるとき、数値に添加する単位(例:px、pt、emなど)。
step:数値変数を増分/減分する単位(0.1、1、10など)。省略した場合は、デフォルトで1になります。

例:

<meta class="mktoNumber" id="textFontSize" mktoName="Main Text Font Size" default="12" min="8" max="18" units="px" step="1"> 

変数を色として指定すると、エンドユーザーがメールエディターで16進数の色コードを入力するか、カラーピッカーから色を選択できるようになります。色変数を指定するには、<meta>でclass="mktoColor"を使用します。

必須の属性
id:メールテンプレートで変数を参照する方法。
mktoName文字列。Email Editor 2.0で表示される表示名です。わかりやすい名前を付けることをお勧めします。

オプションの属性
default:色のデフォルト値。6桁の色コード。例:#ffffff。

例:

<meta class="mktoColor" id="textColor" mktoName="Main Text Color" default="#FFFFFF">

ブール値

変数をブール値として指定すると、メールエディターを使用するエンドユーザーが、オプションのオン/オフを切り替えられるようになります。ブール値変数を指定するには、<meta>でclass="mktoBoolean"を使用します。

必須の属性
id:メールテンプレートで変数を参照する方法。
mktoName文字列。Email Editor 2.0で表示される表示名です。わかりやすい名前を付けることをお勧めします。

オプションの属性
default:トグルスイッチのデフォルト状態を決めるブール値。省略した場合はFalse。
false_value:トグルがオフ位置のときに挿入する値。省略した場合はFalse。
true_value:トグルがオン位置のときに挿入する値。省略した場合はTrue。
false_value_name:オフ位置のときトグルに表示されるUI。省略した場合はFalse。
true_value_name:オン位置のときトグルに表示されるUI。省略した場合はTrueです。

例:

<meta class="mktoBoolean" id="showFooter" mktoName="Show Footer BG?" default="false" false_value="transparent" true_value="black" false_value_name="NO" true_value_name="YES">

HTMLブロック

変数をHTMLブロックとして指定すると、エンドユーザーが、メールエディター内からHTMLをそのまま入力できるようになります。HTMLブロック変数を指定するには、<meta>でclass="mktoHTML"を使用します。

必須の属性
id:メールテンプレートで変数を参照する方法。
mktoName文字列。Email Editor 2.0で表示される表示名です。わかりやすい名前を付けることをお勧めします。

オプションの属性
default:デフォルトのブロックコンテンツとして機能する、HTMLエンコードされた値。

例:

<meta class="mktoHTML" id="trackingPixel" mktoName="Add Tracking Pixel">

画像変数

変数を画像として指定すると、メールエディターを使用するエンドユーザーが、画像ピッカーから画像を選択できるようになります。選択した画像URLが、変数の値になります。画像変数を指定するには、<meta>でclass="mktoImg"を使用します。

必須の属性
id:メールテンプレートで変数を参照する方法。
mktoName:文字列。Email Editor 2.0で表示される表示名です。わかりやすい名前を付けることをお勧めします。

オプションの属性
default:要素のデフォルト画像URL。

例:

<meta class="mktoImg" id="heroBackgroundImage" mktoName="Hero Background Image" default="http://www.company.com/image.jpg">

モジュール

モジュールとは、テンプレートレベルで定義される、テンプレート化されたセクションで、エンドユーザーがメールに挿入するときに表示されます。モジュールはあらかじめ作成済みなので、メールコンテンツの他の部分ともスムーズに連携します(完全な応答性を備えています)。モジュールは、コンテナーにしか配置できません。

コンテナーのタイプが<table>、<tbody>、<thead>、<tfoot>の場合

<tr>でclass="mktoModule"を使用して指定します。

コンテナーのタイプが<td>の場合

<table>でclass="mktoModule"を使用して指定します。

必須の属性
id:メールテンプレートにおけるモジュールの参照方法。
mktoName:文字列。Email Editor 2.0で表示される表示名です。わかりやすい名前を付けることをお勧めします。

オプションの属性
mktoActive:このモジュールが、メールエディターでモジュールリストに表示されるかどうかを決定します。デフォルトはtrueです。falseに設定すると、エンドユーザーがメールにモジュールを追加することはできません。
*近日導入予定* -- mktoAddByDefault:このモジュールが、このテンプレートを使用して新規作成されるメールのキャンバスに配置されるかどうかを決めます。デフォルトはtrueです(mktoActiveがfalseの場合、この値は無視されます)。

コンテナー

コンテナーはモジュールを保持し、モジュールの配置を決定します。エンドユーザーがモジュールを並べ替えたり、メールに挿入したりするとき、その位置がコンテナーによって決まります。

<table>、<tbody>、<thead>、<tfoot>、<td>でclass="mktoContainer"を使用して指定します。

必須の属性
id:メールテンプレートにおけるモジュールの参照方法。

 

Caution

コンテナーに含めることができるのは、モジュールだけです。モジュール以外のものが存在する場合、コンテナーは無効とみなされます。テンプレートごとに使用できるコンテナーは、1つだけです。

  • No labels