ガイド付きランディングページテンプレートの作成

ガイド付きランディングページテンプレートには、特別な構文があります。 この構文を使用して、カスタマイズ可能な内容と、テンプレートから作成された各ランディングページで最終的にコンテンツが生成される場所を指定します。 「ガイド付き」ランディングページエディター内でカスタマイズできるのは、編集可能として指定した地域または変数のみです。

ヒント

命名規則を適切に使用すると、マーケティングチームがあなたを好きになります。

ページ上の何かを編集可能にする必要があると宣言する方法は 2 つあります。

  • オブジェクトを「要素」として宣言します。 ランディングページ作成者は、画像、テキストまたはMarketoのアセットを指定された領域に追加できます。
  • 文字列を「変数」として宣言します。 ランディングページ作成者は、true/false のレバーから、その変数を文字列、色またはブール値の状態に置き換えることができます。

編集可能な要素

要素は、通常の DOM 要素をテンプレートに追加し、その要素をMarketo固有のクラス名で修飾することで宣言されます。

テキスト

地域をリッチテキストとして定義すると、ユーザーはそのコンテンツを編集できます Marketoのリッチテキストエディターの使用.

必須属性:
クラス:"mktoText"
id:ID 文字列。 文字、数字、ダッシュ (-)、アンダースコア (_) のみが含まれます。 スペースは使用できません。 一意である必要があります。
mktoName :文字列。 これは、ランディングページエディターに表示される表示名です。 ベストプラクティスは、わかりやすい名前を使用することです。

任意:
mktoText クラスを持つ要素のコンテンツ(指定されている場合)は、編集可能領域のデフォルト値として使用されます。

例:

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

画像

編集可能な画像要素を定義するには、2 つのオプションがあります。 次のいずれかを使用できます。 <div>:画像を挿入するコンテナ、または <img> タグを使用します。

オプション 1 - a の使用 <div>

必須属性:

クラス:"mktoImg"
id:ID 文字列。 文字、数字、ダッシュ (-)、アンダースコア (_) のみが含まれます。 スペースは使用できません。 一意である必要があります。
mktoName :文字列。 これは、ランディングページエディターに表示される表示名です。 ベストプラクティスは、わかりやすい名前を使用することです。

任意:
mktoImgClass:文字列。 この値は、 <img> div 内の要素

例:

<div class="mktoImg" id="exampleImg" mktoName="Example Image"></div>

オプション 2 - a の使用 <img>

必須属性:
クラス:"mktoImg"
id:ID 文字列。 文字、数字、ダッシュ (-)、アンダースコア (_) のみが含まれます。 スペースは使用できません。 一意である必要があります。
mktoName :文字列。 これは、ランディングページエディターに表示される表示名です。 ベストプラクティスは、わかりやすい名前を使用することです。

任意:
src:文字列 URL。 これは、画像のデフォルト値として使用されます。

例:

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

メモ

を使用する場合、 <img> バージョンの場合、レンダリングされたHTMLには、 <img> タグを使用します。 クラスに設定されます。」mktoImg.mktoGen,"と指定すると、display:inline-block となります。

フォーム

例:必須属性:
クラス:"mktoForm"
id:ID 文字列。 文字、数字、ダッシュ (-)、アンダースコア (_) のみが含まれます。 スペースは使用できません。 一意である必要があります。
mktoName :文字列。 これは、ランディングページエディターに表示される表示名です。 ベストプラクティスは、わかりやすい名前を使用することです。

<div class="mktoForm" id="exampleForm" mktoName="Example Form"></div>

スニペット

必須属性:
クラス:"mktoSnippet"
id:ID 文字列。 文字、数字、ダッシュ (-)、アンダースコア (_) のみが含まれます。 スペースは使用できません。 一意である必要があります。
mktoName :文字列。 これは、ランディングページエディターに表示される表示名です。 ベストプラクティスは、わかりやすい名前を使用することです。

例:

<div class="mktoSnippet" id="exampleSnippet" mktoName="Example Snippet"></div>

共有ボタン

必須属性:
クラス:"mktoShareButton"
id:ID 文字列。 文字、数字、ダッシュ (-)、アンダースコア (_) のみが含まれます。 スペースは使用できません。 一意である必要があります。
mktoName :文字列。 これは、ランディングページエディターに表示される表示名です。 ベストプラクティスは、わかりやすい名前を使用することです。

例:

<div class="mktoShareButton" id="exampleShareButton" mktoName="Example Share Button"></div>

動画

メモ

ランディングページでビデオ要素を使用する場合、MarketoはYouTubeのビデオのみをサポートします。 別のサービスを使用する場合は、リッチテキストボックスを使用してビデオの埋め込みコードに貼り付けることをお勧めします。

必須属性:
クラス:"mktoVideo"
id:ID 文字列。 文字、数字、ダッシュ (-)、アンダースコア (_) のみが含まれます。 スペースは使用できません。 一意である必要があります。
mktoName :文字列。 これは、ランディングページエディターに表示される表示名です。 ベストプラクティスは、わかりやすい名前を使用することです。

例:

<div class="mktoVideo" id="exampleVideo" mktoName="Example Video"></div>

投票

必須属性:
クラス:"mktoPoll"
id:ID 文字列。 文字、数字、ダッシュ (-)、アンダースコア (_) のみが含まれます。 スペースは使用できません。 一意である必要があります。
mktoName :文字列。 これは、ランディングページエディターに表示される表示名です。 ベストプラクティスは、わかりやすい名前を使用することです。

例:

<div class="mktoPoll" id="examplePoll" mktoName="Example Poll"></div>

参照元

必須属性:
クラス:"mktoReferal"
id:ID 文字列。 文字、数字、ダッシュ (-)、アンダースコア (_) のみが含まれます。 スペースは使用できません。 一意である必要があります。
mktoName :文字列。 これは、ランディングページエディターに表示される表示名です。 ベストプラクティスは、わかりやすい名前を使用することです。

例:

<div class="mktoReferral" id="exampleReferral" mktoName="Example Referral"></div>

懸賞

必須属性:
クラス:"mktoSweepstakes"
id:ID 文字列。 文字、数字、ダッシュ (-)、アンダースコア (_) のみが含まれます。 スペースは使用できません。 一意である必要があります。
mktoName :文字列。 これは、ランディングページエディターに表示される表示名です。 ベストプラクティスは、わかりやすい名前を使用することです。

例:

<div class="mktoSweepstakes" id="exampleSweepstakes" mktoName="Example Sweepstakes"></div>

編集可能な変数

すべての変数型は、${ } 文字シーケンスで囲まれた id 属性の値を参照することで使用されます。 これらは、他の変数宣言内を除き、ドキュメント内の任意の場所で使用できます。

例:

${var1}

宣言:

変数は、 <head> 要素を作成します。 使用できる変数は次の 3 種類です。文字列、色、およびブール値。

文字列

必須属性:
クラス :"mktoString",
id:ID 文字列。 文字、数字、ダッシュ (-)、アンダースコア (_) のみが含まれます。 スペースは使用できません。 一意である必要があります。
mktoName :文字列。 これは、ランディングページエディターに表示される表示名です。 ベストプラクティスは、わかりやすい名前を使用することです。

任意:
デフォルト:属性の文字列値。 何も指定しない場合は空白です。
allowHtml:"true"または"false"。 値をエスケープせずに印刷するかどうかをHTMLします。 未設定の場合はデフォルトで「false」に設定されます。

基本的な例:

<meta class="mktoString" id="var1" mktoName="My Variable">

すべての属性の例:

<meta class="mktoString" id="var1" mktoName="My Variable" default="This is my default value" allowHtml="true">

必須属性:
クラス :"mktoColor",
id:ID 文字列。 文字、数字、ダッシュ (-)、アンダースコア (_) のみが含まれます。 スペースは使用できません。 一意である必要があります。
mktoName :文字列。 これは、ランディングページエディターに表示される表示名です。 ベストプラクティスは、わかりやすい名前を使用することです。

任意:
デフォルト:7 桁の 16 進数のカラーコード。 例:"#336699"

基本的な例:

<meta class="mktoColor" id="color1" mktoName="My Color Variable">

すべての属性の例:

<meta class="mktoColor" id="color" mktoName="My Color Variable" default="#336699">

ブール値

必須属性:
クラス :"mktoBoolean",
id:ID 文字列。 文字、数字、ダッシュ (-)、アンダースコア (_) のみが含まれます。 スペースは使用できません。 一意である必要があります。
mktoName :文字列。 これは、ランディングページエディターに表示される表示名です。 ベストプラクティスは、わかりやすい名前を使用することです。

任意:
デフォルト:ブール文字列。 "true"または"false"は、値が ON または OFF の位置で始まるかどうかを制御します。 指定しない場合は「false」です。
false_value:文字列。 変数が OFF 位置にあるときに変数に挿入される値です。 指定しない場合は「false」です。
true_value:文字列。 変数がオンの位置にあるときに変数に挿入される値です。 指定されない場合は"true"。
false_value_name:文字列。 値がオフの位置にあるときにランディングページエディターに表示される表示名です。 指定されていない場合は「OFF」です。
true_value_name:文字列。 値がオンの位置にある場合にランディングページエディターに表示される表示名です。 「ON」(指定されていない場合)

基本的な例:

<meta class="mktoColor" id="color" mktoName="My Color Variable" default="#336699">

<meta class="mktoBoolean" id="boolean1" mktoName="My Boolean Variable">

すべての属性の例:

この例は、CSS で要素を ID で表示/非表示にする CSS 表示プロパティの値を「block」または「none」に設定して、ブール変数が CSS 要素の表示/非表示を制御する一般的な使用例を示しています。 ランディングページエディターでは、「オフ」/「オン」の代わりに、「表示/非表示」という表示名が使用されます。

<meta class="mktoBoolean" id="boolean1" mktoName="My Boolean Variable" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show"> <style> #myConditionalDisplayArea { display: ${boolean1}; } </style>

メモ

プログラムトークン (my.token) は、ガイド付きまたはフリーフォームのランディングページの任意の場所で使用することもできます。

このページ