【Marketo】オリジナルのランディングページを作ろう(3)

こんにちは、マルケト担当の山下です。

早速ですが、本題であるガイド付きランディングページのテンプレートHTMLの作り方をご紹介します。

テンプレートといっても、まずは「普通にHTMLを」コーディングします。
CSS等も利用し、レイアウトを作ってください。
その中で、変更する予定のない箇所(例えばヘッダ等)は、テンプレートに直接コーディングします。
変更したい部分(例えば本文)のみを下記で紹介するマークアップのルールに従ってマークアップします。

変更したい部分のマークアップ時の前提ルールとして、まず3点をご理解ください。

1)divで変更したい部分をマークアップします。
classにはmktoText、mktoSnippet 等、事前にマルケト側で指定されている「スタイル」=編集可能とするコンテンツの種別を設定します。
スタイルの具体的な種類はこちら。テキスト、画像、フォーム等があります。
なので、テンプレートを作るときは、「ここに何を入れても良いか」を事前に設計しておく必要があるのです。

2)idの設定が必須で、ユニークなIDを設定します。HTMLの構文で通常使うidと考え方は同じで、任意の文字列を指定します。

3)各divにmktonameというプロパティを設定します。ランディングページの作成画面の「要素」欄に項目の説明文章として表示されますので、ページを作る人にわかりやすい内容を項目名や文章で記載します。

では具体的なマークアップ例をご紹介します。

・テキスト
<div class=”mktoText” id=”TitleText” mktoname=”Title Text”>
Title
</div>
これは文字列を入れるためのブロックになります。
Titleと入っている箇所を、ランディングページの編集画面で、テキストやタグで置き換えることができます。

・スニペット
<div class=”mktoSnippet” id=”exampleSnippet” mktoName=”Snippet”></div>
マルケトにはスニペットという、タグや文字列を共通化して使い回すことができるパーツが用意されています。
そのスニペットを適用するためのブロックです。
※スニペットは便利な機能なので、別途解説します!

・フォーム
<div class=”mktoForm” id=”Form” mktoname=”Form”></div>
マルケトで作ったフォームのパーツを入れることができるブロックです。

・画像
マルケトのデザインスタジオにアップロード済みの画像を挿入するためのブロックです。
■パターン1)divで入れる場合
<div class=”mktoImg” id=”exampleImg” mktoName=”Example Image” mktoImgClass=”imgstyle”></div>
→mktoImgClassに、任意のclass名を入れると、imgタグ内にclassが付与されます。
■パターン2)imgで入れる場合
<img class=”mktoImg” id=”exampleImg” mktoName=”Example Image”>
→こちらはimg内のclassが不要な場合に。

他にも利用可能な種類がありますが、まずは上記を押さえると基本的なガイド付きテンプレートが作成可能になります。
全種類のガイド付きテンプレートのマークアップサンプル例はこちらをどうぞ。

テンプレートの作成時は、自動で構文チェックをしてくれます。
IDの重複などがあるとエラーを返してくれるので便利ですね!

各要素に対してページ作成時に内容を当てはめていくのですが、要素に当てはめるものがない場合は、空欄でも許容されます。
ですので、フォームを置くページとサンクスページは、同じテンプレートで作成可能です。

「どこはページ固有で編集させるか」「どこは事前にスニペットで共通化させるか」などの設計が重要になってきます。
そこがテンプレート設計時の腕の見せ所になってきますね。

この記事の著者

Emi Yamashita
CG/ポストプロダクション業界からWeb業界へ転身し早15年。現場を愛す軍曹型ディレクター。ポリシーは「未来に楽をするためなら今の苦労を厭わない」。初級Web解析士/Marketo Certified Expert。
2015年10月17日 by
ホーム  |  サービス紹介  |  コラム  |  お問い合わせ