楽天GOLD直下のLPにCTAボタンを配置できるか？

Question

現在、楽天の商品ページをランディングページにして、外部のWEB広告からユーザーを獲得しようとしております。

効果検証可能なタグを入れたく、GOLD直下のディレクトリに商品紹介ページを作成して
そこをランディングページにしようとしております。

普通に考えると

・GOLD LP→商品ページ（CTAボタンクリック）→カート

となりますが、

・GOLD LP（CTAボタンクリック）→カート

というように、GOLD 直下のLPに「カートに入れる」機能を搭載した
CTAボタンを設置することは可能でしょうか？

可能な場合さらに、「カラバリ」「種類」の選択を
GOLD LP内で完結させることは可能でしょうか？

上記、設置可能な方法があれば
ご教示いただきたく存じます。

よろしくお願いいたします。

Accepted Answer

ECマスターズの田中です。

> GOLD 直下のLPに「カートに入れる」機能を搭載した
> CTAボタンを設置することは可能でしょうか？

はい、可能です。
以下のタグをGOLDページにご記入ください。

===== この下の行から ================

個数：






===== この上の行まで ================
※ショップＩＤは、ショップ内検索時にURLに含まれる6桁の数字を入力してください。
※商品の在庫タイプは、
　「通常在庫設定」なら1、「項目選択肢別在庫」なら2を入力してください。
※商品のＲＡＣ番号の下８桁は、商品個別編集画面もしくはitem.csvよりご確認ください。

> 可能な場合さらに、「カラバリ」「種類」の選択を
> GOLD LP内で完結させることは可能でしょうか？

はい、可能です。

「カラバリ」「種類」は、
項目選択肢別在庫としてご登録いただいておりますでしょうか。
その場合は、項目選択肢別在庫を選択するためのラジオボタンを、
実際の商品ページのHTMLソースからコピーして
さきほどの〜タグ内にご記載ください。

例）
===== この下の行から ================
ピンク： 
===== この上の行まで ================

Answer

ECマスターズの塚本です。

いただいたご質問ですが、こちら内容を確認しておりまして、
担当より改めてご回答させていただきます。

お時間いただいておりますが、
今しばらくお待ちくださいませ。

Answer

ECマスターズ
田中様

ご回答ありがとうございました!!

もし、可能であれば

・footer固定のCTAにしたい
・レスポンシブ
・項目選択肢別在庫 3つ

の条件でおすすめのhtml,CSSレシピがあれば
ご教示いただきたいです。

※ カラーは後ほど変更いたしますので、お任せいたします

よろしくお願いいたします。

Answer

ECマスターズの田中です。

恐れ入りますが、
ご指定いただいた条件を全て満たす
定形のHTML・CSSテンプレートは無く、

また、おっしゃられた条件だけでは、
カラーの指定方法だけでなく
各種パーツのPC・スマホで閲覧時の配置など
不明な点が多数ございます。

まずは、私より申し上げたHTMLをご設置の上
無事動作することをご確認いただき、
フッターに固定、レスポンシブ化など
条件を満たす構造を１つ１つ作り上げ、
最後に見た目を細かく調整する、
といった順でご設置いただきますようお願いします。
（他の店舗が実際に設置しているソースを参考にする方法もございます）

フッターとしてHTMLを設置する場合は、
たとえば下記のような構造が必要となります。

===== この下の行から ============

#spFloatFooter {
display: block;
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%;
}


任意のHTMLソース

===== この上の行まで ============
※任意のHTMLソースは、フッターとして設置したいHTMLをご記載ください。

レスポンシブ化したい場合は、
まずHTMLファイル自体に、
スマホで閲覧した時のページの横幅を、
 タグでご指定ください。
たとえば、端末の横幅ちょうどで表示させたい場合は
〜の中に

とご記載いただく形になります。

次に、画面の横幅ごとに適用させたいスタイルシートを
メディアクエリを利用してご指定いただくことで、
レスポンシブ化の対応を行うことができます。
https://techacademy.jp/magazine/9369

項目選択肢別在庫が３つある場合は、
実際の商品ページに設置されているラジオボタンを、
ソースの表示、もしくはデベロッパーツールを利用して
コピーして設置してください。

見た目をこだわってラジオボタン以外にしたい場合は、
type="radio"をtype="hidden"にして見た目を隠し、
フォーム全体を３つ設置していただければ結構です。

Answer

ありがとうございました!!
参考にさせていただきます。