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

Deep Dive

文章を読むのに飽きてきましたか? わかりやすいビデオを用意しました。段階的に手順を説明してあります。

ガイド付きランディング・ページ・テンプレートには、特殊な構文があります。カスタマイズできる内容と、テンプレートから作成した各ランディングページでコンテンツを配置する位置を、この構文で指定します。「ガイド付き」ランディング・ページ・テンプレートでカスタマイズできるのは、編集可能として指定した領域または変数だけです。

Tip

適切な命名規則を運用し、チーム全体で共有しましょう。

ページ上のオブジェクトや文字列を編集可能と宣言するには、2つの方法があります。

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

編集可能な要素

要素を定義するには、通常のDOM要素をテンプレートに追加してから、その要素をMarketo固有のクラス名で修飾します。

テキスト 

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

オプション:
classにmktoTextを指定した要素の内容(指定されている場合)が、編集可能な領域のデフォルト値として使用されます。

例:

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

画像

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

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

必須の属性:
class:"mktoImg"

id:ID文字列。使えるのは文字、数字、ダッシュ、ハイフン(-)、アンダースコア(_)だけです。空白は含めないでください。一意でなければなりません。
mktoName :文字列。これは、ランディング・ページ・エディターで表示される表示名です。わかりやすい名前を付けることをお勧めします。

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

例:

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

方法2 - <img>を使用する

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

オプション:
src:文字列URL。これは画像のデフォルト値として使用されます。

例:

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

Note

<img>オプションを使用した場合、表示されるHTMLでは、生成されたdivラッパーによって<img>タグが囲まれます。classは"mktoImg.mktoGen"に設定され、inline-blockと表示されます。

Form

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

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

Snippet

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

例:

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

Share Button

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

例:

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

Video

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

例:

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

 

Poll

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

例:

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

Referral

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

例:

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

Sweepstakes

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

例:

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

編集可能な変数

どのタイプでも、変数を使用するには、${ }文字シーケンスの内部に囲まれたid属性の値を参照します。変数は、他の変数宣言の内部を除いて、文書のどこででも使用できます。

例:

${var1}

 

宣言:

変数は、テンプレートの<head>要素内部のメタタグとして宣言されます。使用できる変数には、文字列、色、ブール値の3種類があります。

文字列

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

オプション:
default:属性の文字列値。指定しない場合は空白。
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">

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

オプション:
default:7桁の16進の文字色コード:"#336699"など

基本的な例:

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

すべての属性を使用した例:

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

ブール値

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

オプション:
default:ブール文字列。"true"または"false"で、ON位置とOFF位置のどちらで値が始まるかを制御します。指定しない場合は"false"。
false_value:文字列。OFF位置にあるときに変数に挿入される値。指定しない場合は"false"。
true_value:文字列。ON位置にあるときに変数に挿入される値。指定しない場合は"true"。
false_value_name:文字列。値がOFF位置にあるときにランディング・ページ・エディターで表示される表示名。指定しない場合は"OFF"。
true_value_name:文字列。値がON位置にあるときにランディング・ページ・エディターで表示される表示名。指定しない場合は"ON"。


基本的な例:

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

すべての属性を使用した例:

ここでは、css表示プロパティの値を"block"または"none"に設定し、CSSを使用してidごとに要素の表示/非表示を切り替えることによって、css要素の表示をブール変数で制御する一般的な使用例を示しています。ランディング・ページ・エディターでは、OFF/ONのかわりにShow/Hideという表示名が使用されます。

 

<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>

Note

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

  • No labels