リッチメディアレコメンデーション
リッチメディアレコメンデーションテンプレートを表示するページで、次のタグと API 呼び出しを設定する必要があります。
-
ページヘッダー内
- RTP タグをインストールする
- GET呼び出しをページに追加し、レコメンデーションに入力します
- SET 呼び出しを追加してテンプレートを設定します
-
ページ本文内
- テンプレートを表示する場所にテンプレートタグ（div クラス）を配置します
詳しくは、 こちらを参照してください。
テンプレートタグ
div.Permissible 値に一致するテンプレートを挿入します。例
レコメンデーションを水平方向に揃えて表示するには、「template1」を使用します。
<div class="RTP_RCMD2" data-rtp-template-id="template1"></div>
レコメンデーションを垂直方向に揃えて表示するには、「template2」を使用します。
<div class="RTP_RCMD2" data-rtp-template-id="template2"></div>
レコメンデーションをタイトルと説明のみで垂直方向に揃えて表示するには、「template3」を使用します。
<div class="RTP_RCMD2" data-rtp-template-id="template3"></div>
テンプレートの配置のスクリーンショットを参照してください こちら。
レコメンデーションの入力
この方法では、ページ上のすべてのリッチメディア <divs> にレコメンデーションが入力されます。
使用方法
rtp('get', 'rcmd', 'richmedia');
テンプレート設定の変更
この方法では、テンプレートのデフォルト設定が変更されます。
注意：このメソッドを使用する場合は、rtp （'get','rcmd', 'richmedia'）を呼び出す前に呼び出す必要があります。
使用方法
rtp('set', 'rcmd', 'richmedia', 'template_id', conf_obj);
例
このコードスニペットはテンプレートのタイトルテキストを変更します。
rtp("set", "rcmd", "richmedia","template1",
{
"rcmd.title.text": "RECOMMENDED CONTENT"
}
);
このコードスニペットは、1 つのテンプレートに対して複数の設定を持つ設定カテゴリを示しています。
rtp("set", "rcmd", "richmedia",
{
"template1":
{
"rcmd.title.text": "RECOMMENDED CONTENT",
"rcmd.general.font.family": "arial",
"category":
[
"webinar",
"blog posts",
"pricing_page_category",
"product_a_category"
]
}
}
);
メモ：予測コンテンツレコメンデーションの結果に表示されるコンテンツをフィルタリングするには、「カテゴリ」を使用します。 有効なすべてのコンテンツ部分に予測コンテンツを適用するには、「カテゴリ」を空のままにします。 リッチメディアテンプレートの出力に特定のコンテンツのみをレコメンデーションする場合は、コンテンツを設定ページでコンテンツのカテゴリを追加し、そのカテゴリをレコメンデーションテンプレートコード内で関連付けます。 Web サイトのセクション（製品またはソリューション）に従って関連コンテンツを分類します。
このコードスニペットは、1 つのテンプレートに対して複数のテンプレート設定を指定する様子を示しています。
rtp("set", "rcmd", "richmedia",
{
"template1":
{
"rcmd.title.text": "RECOMMENDED CONTENT",
"rcmd.general.font.family": "arial"
}
}
);
設定プロパティ
メモ：設定のサポートはテンプレートごとに変わることがあります。
基本的な例
この例には、3 つのレコメンデーションを含む 1 つのテンプレートがあります。 この例をHTMLページにコピーしてから、RTP タグを自分のタグに置き換えます。
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RTP recommendation</title>
<!-- RTP tag -->
<script type='text/javascript'>
// This tag needs to be replaced with your account tag
(function(c,h,a,f,i,e){c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
c[a].a=i;c[a].e=e;var g=h.createElement("script");g.async=true;g.type="text/javascript";
g.src=f+'?aid='+i;var b=h.getElementsByTagName("script")[0];b.parentNode.insertBefore(g,b);
})(window,document,"rtp","//example.rtp.com/rtp-api/v1/rtp.js","account_id");
// Send page view (required by the recommendation)
rtp('send','view');
// Populate recommendation
rtp('get','rcmd', 'richmedia');
</script>
<!-- End of RTP tag -->
</head>
<body>
<div class="RTP_RCMD2" data-rtp-template-id="template1"></div>
</body>
</html>
高度な例
この例には、3 つのレコメンデーションを含む 1 つのテンプレートがあります。 テンプレートのタイトルは「RECOMMENDED CONTENT」、ボタンのテキストは「Read More」になります。 この例をHTMLページにコピーしてから、RTP タグを自分のタグに置き換えます。
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RTP recommendation</title>
<!-- RTP tag -->
<script type='text/javascript'>
// This tag needs to be replaced with your account tag
(function(c,h,a,f,i,e){c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
c[a].a=i;c[a].e=e;var g=h.createElement("script");g.async=true;g.type="text/javascript";
g.src=f+'?aid='+i;var b=h.getElementsByTagName("script")[0];b.parentNode.insertBefore(g,b);
})(window,document,"rtp","//example.rtp.com/rtp-api/v1/rtp.js","account_id");
// Send page view (required by the recommendation)
rtp('send','view');
// Populate the recommendation zone
rtp('get', 'campaign',true);
// Change template configuration
rtp('set', 'rcmd', 'richmedia',
{
template1 :
{
"rcmd.title.text" : "RECOMMENDED CONTENT",
"rcmd.cta.text" : "Read More"
}
}
);
// Populate recommendation
rtp('get','rcmd', 'richmedia');
</script>
<!-- End of RTP tag -->
</head>
<body>
<div class="RTP_RCMD2" data-rtp-template-id="template1"></div>
</body>
</html>
リッチメディアレコメンデーションテンプレート#1 の例
名前: template1 説明：画像、タイトル、説明、誘い文句（CTA：コールトゥアクション）ボタンなどの水平方向のコンテンツ。
リッチメディアレコメンデーションテンプレート#2 の例
名前:template2 説明：画像、タイトル、説明、誘い文句（CTA：コールトゥアクション）ボタンなどの垂直方向のコンテンツ。
リッチメディアレコメンデーションテンプレート#3 の例
名前: template3 説明: タイトルと説明のみを含む垂直コンテンツ。 マウスポインターを置くと、ヘッダーの色が変更され、コンテンツ URL にハイパーリンクされます。 説明は、色を変更せずにコンテンツにリンクすることもできます。
