レイアウトを作成

レイアウトは、ページ上で提案がどのように表示されるかを決定します。最も一般的なレイアウトタイプは、オーバーレイと埋め込みです。

レイアウトを追加

1. my.rokt.com にログオンします。
2. 取引をクリックします。
3. レイアウトをクリックします。
4. レイアウトを追加を選択します。
5. レイアウトテンプレートを選択します。

テンプレートをデザイン

注記

画面の上部にあるボタンを使用して、レイアウトのデスクトップビューとモバイルビューを切り替えることができます。

1. レイアウトの名前を入力します。

2. テーマをパーソナライズします：

   1. 設定

      設定	説明
      提案	レイアウトに表示する提案の最小および最大数を設定します。
      頻度制限	訪問者が戻ってきたときにレイアウトを抑制する期間を設定します。
      言語	レイアウトを表示する言語を選択します。
      プラットフォーム	レイアウトを表示するプラットフォームを選択します。

   2. 一般スタイル

      設定	説明
      背景	レイアウトの背景色を設定します。
      外枠	外枠の太さ、半径、色を設定します。
      間隔	レイアウトの余白とパディングをピクセル（px）で設定します。
      上部の区切り線	上部の区切り線のデザインパラメータを設定します。 上部の余白が >0 の場合のみ上部の区切り線が表示されます。
      下部の区切り線	下部の区切り線のデザインパラメータを設定します。 下部の余白が >0 の場合のみ下部の区切り線が表示されます。

      

   3. 進捗トラッカー

      設定	説明
      進捗トラッカーを表示	オンまたはオフを切り替えます。
      進捗トラッカーの外観	レイアウト内の進行状況を表示するために、番号付き、塗りつぶしされた円、またはダッシュを選択します。
      開始位置	進捗トラッカーを表示し始める場所を選択します。最初または2番目の広告から開始します。
      番号付きカウンターの開始番号	これは開始位置の設定に直接関連します。最初の広告から番号を付け始めることを選択した場合、ここで1を選択します。2番目から開始する場合は2を選択します。
      場所	進捗トラッカーを配置する場所を上または下から選択します。
      訪問済み	進捗トラッカーでどの広告が訪問済みかを示す色を設定します。
      未訪問	進捗トラッカーでまだ訪問されていない広告を示す色を設定します。

      

   4. テキストスタイル

      ドロップダウンからレイアウトに使用するフォントを選択します。

      最初は少数のフォントから選択できますが、以下の手順で自分のブランドフォントをアップロードすることもできます。

      カスタムフォントを追加する

      :::注意

      このプロセスを始める前に、フォントファイル (.tff, .otf, .woff, または .woff2) をダウンロードしておく必要があります。

      :::

      以下の手順でフォントをレイアウトに追加できます:

      1. カスタムフォントを管理をクリックします。
      2. 新しいフォントを追加をクリックします。
      3. フォントを使用するプラットフォームを選択します（複数選択可）。
      4. アップロードをクリックし、ファイルを検索して選択します。
      5. （オプション）オプションスタイルを表示をクリックし、フォントの太字または_斜体_バージョンをアップロードします。
      6. 保存をクリックします。

      これで新しいフォントがドロップダウンから選択可能になります。

      レイアウトの各テキストセクションでフォントサイズ、色、マークダウンスタイリング（太字、斜体、または下線オプション）などのテキストプロパティを編集できます。どのテキストセクションを編集しているのか理解するためには、レイアウトおよびエディタ内に表示されている名前を確認してください。この例では、レイアウトのタイトルセクションを編集しています。

      

   5. ボタン

      設定	説明
      一般
      フォント	ボタンに使用したいフォントとフォントサイズを選択します。
      ボタンの半径	ボタンのエッジがどれくらい丸くなるかを決定します。0 pxだと四角いエッジになり、16 pxだと最も丸いエッジになります。
      ボタンサイズ	ボタンの最小の高さと幅を設定します。
      CTAの文字ケース	入力されたとおりに表示する入力されたとおりに、各単語の最初の文字を大文字として表示するタイトルケース、またはすべての文字を大文字で表示する大文字から選択します。
      フォーメーション	ポジティブまたはネガティブの応答を最初に表示するか選択します。
      モバイルビュー	モバイルデバイスでボタンをスタックまたはアンスタックで表示するか選択します。
      プライマリおよびセカンダリ
      	これらを使用して、ボタンのスタイルや色を個別に設定できます。

   6. ハイパーリンク

      設定	説明
      フッター
      デスクトップデフォルト	デスクトップで表示される場合、レイアウトのフッター内のハイパーリンクのデフォルトのスタイルと色を設定します。
      デスクトップホバー	デスクトップで表示される場合、レイアウトのフッター内のハイパーリンクのホバースタイルと色を設定します。
      モバイルデフォルト	モバイルデバイスで表示される場合、レイアウトのフッター内のハイパーリンクのスタイルと色を設定します。
      一般
      デフォルト	レイアウトの本文内のハイパーリンクのデフォルトスタイルを設定します。
      ホバー	レイアウトの本文内のハイパーリンクのホバースタイルを設定します。

   7. オファー終了時の動作

      設定	説明
      コンテンツ
      タイトル	レイアウトの最終ページのタイトルを設定します。つまり、すべてのオファーが提示された後です。
      メッセージ	レイアウトの最終ページで表示されるメッセージを追加します。
      スタイル
      テキストの配置	レイアウトの最終ページのテキストの配置を設定します。

3. セクションを個別に設定します。

   1. ヘッダー

      設定	説明
      コンテンツ
      テキスト	レイアウトのヘッダーセクションに表示されるテキストを追加します。 **このテキストは、レイアウトで黒 (#000000) でレンダリングされます。
      スタイル
      背景	ヘッダーの背景色を設定します。
      ボーダー	(オプション) ヘッダーの重み、半径、および色を設定します。
      ヘッダーのスペーシング	ヘッダーのマージンとパディングをピクセル (px) 単位で設定します。
      テキストの配置	ヘッダーのテキストの配置を設定します。
      セクションディバイダー	トグルオンにすると、ヘッダーの下に水平線が表示されます。

      

   2. オープニングパラグラフ

      設定	説明
      コンテンツ
      最初の段落	これは事前にテキストが入力されていますが、編集可能です。
      第二段落	(オプション) 必要に応じてさらにテキストを追加するスペースです。
      スタイル
      背景	オープニング段落の背景色を設定します。
      境界線	(オプション) オープニング段落の境界線の太さ、半径、および色を設定します。
      オープニング段落の間隔	オープニング段落のマージンとパディングをピクセル（px）単位で設定します。
      テキストの配置	オープニング段落のテキストの配置を設定します。

   3. Offers

      設定	説明
      スタイル
      背景	オファーの背景色を設定します。
      境界線	(オプション) オファーの境界線の太さ、半径、および色を設定します。
      オファーの間隔	オファーのマージンとパディングをピクセル（px）単位で設定します。
      設定
      画像	レイアウトに画像を表示するタイミングと場所を決定します。
      配置	コンテンツの配置を選択します。
      クリエイティブコピーの位置	クリエイティブコピーを表示する場所を選択します。
      ボタン	ボタンの配置を選択します。
      否定的な反応で閉じる	このトグルを選択すると、いずれかのクリエイティブに否定的な反応がある場合、レイアウトが閉じます。
      反応タイプ	表示される反応のタイプを選択します。

   4. 確認メッセージ

      設定	説明
      確認メッセージを表示	確認メッセージをすべてのポジションで表示するか、ポジション2以降にのみ表示するか、全く表示しないかを選択します。

   5. クロージング段落

      設定	説明
      コンテンツ
      テキスト	(オプション) レイアウトのボタンの下に表示されるクロージング段落のテキストを入力します。 2つのテキストボックスがあり、1つはポジション1用、もう1つはポジション2+用です。すべてのポジションにテキストを表示したい場合は、両方のテキストボックスを完成させる必要があります。
      スタイル
      背景	クロージング段落の背景色を設定します。
      境界線	(オプション) クロージング段落の境界線の太さ、半径、および色を設定します。
      クロージング段落の間隔	開始段落のマージンとパディングをピクセル（px）単位で設定します。
      テキストの配置	クロージング段落のテキストの配置を設定します。
      セクション区分	トグルをオンにすると、クロージング段落の下に水平線を表示します。必要に応じて、区分のスタイルを設定します。

   6. フッター

      設定	説明
      設定
      リンク	フッターに表示するリンクを選択します。
      リンク表示テキスト	クライアントプライバシーポリシーの表示を有効にした場合に表示するテキストを入力します。
      URL	クライアントプライバシーポリシーの表示を有効にした場合にプライバシーポリシーの URL を入力します。
      スタイル
      背景	フッターの背景色を設定します。
      境界線	（オプション）フッターの境界線の重み、半径、色を設定します。
      閉じ段落のスペーシング	フッターのマージンとパディングをピクセル (px) 単位で設定します。
      テキストの配置	フッター内のテキストの配置を設定します。
      モバイルビューでのリンク	モバイルビューでリンクをスタックするか、インラインで表示するかを選択します。

4. 保存して閉じるをクリックして、レイアウトをRoktに送信して承認を受けます。