お気に入りボタンと資料請求ボタンについて

Question

いつもサポートをいただきありがとうございます。

デザインレシピに記載のタグにて、PC商品ページにお気に入りボタンを設置したいのですが、画像サイズが縮小表示されません。
1200x300の画像を550:140で表示させるにはどうしたらいいですか。

それと、資料請求ボタンを商品販売説明文内に設置する方法はありませんか？画像リンクでも構いません。

Accepted Answer

Cマスターズの田中です。

なるほど、プレゼントのアピールではなく、
申請のためだけにご利用される、ということですね。

実際のページを確認しましたところ、
資料請求ボタンを押した扱いになるURLの作り方が見つかりました。

仕様上、若干複雑にはなってしまうのですが、
ご案内させていただきます。

全体の構造としては下記の通りです。
埋める項目がわかりやすいように、途中改行を入れております。
(2/21 17:00 以下、誤りの部分を修正)

= この下の行から ====================
https://pamphlet.step.rakuten.co.jp/rms/mall/pa/pamphlet/vc
?panf_text=画面上部の文言
&shop_bid=ショップID
&shop_name=ショップ名
&item_id=商品ID
&item_name=商品名
&item_number=商品管理番号
&shopurl=店舗URL
&pageurl=商品ページURLの「rakuten.co.jp」以降の部分（#や?は含まない）
&__event=PA01_000_001
&sell_type=0
= この上の行まで ====================

「ショップID」は、ショップ内検索のURLに含まれる６桁の数字、
または、商品編集画面でご確認いただけるRAC番号の上６桁にご変更ください。
「商品ID」は、RAC番号の下８桁をご利用ください。
「店舗URL」は、https://www.rakuten.co.jp/●●●/ の ●部分です。

また、ショップ名や商品名などの中で
半角スペースをご記入される際は、
+
に置き換えていただきますようお願いします。

その他の項目の記入方法など、
詳しい書き方は下記の例をご参照ください。


例） https://item.rakuten.co.jp/kouden-okokorozashi/bimi010/ の場合
https://pamphlet.step.rakuten.co.jp/rms/mall/pa/pamphlet/vc
?panf_text=カタログ見本請求【無料】
&shop_bid=267657
&shop_name=おこころざし
&item_id=10003427
&item_name=【送料無料】美味工房+グルメギフトカタログ+＜SD＞｜カタログギフト+内祝い+香典返し+香典+グルメ+肉+風呂敷+おしゃれ+出産祝い+結婚祝い+結婚内祝い+出産内祝い+新築内祝い+おすすめ+還暦祝い+節句内祝+お祝い+記念日+お返し+引出物+挨拶状+忌明志+gift
&item_number=19092010
&shopurl=kouden-okokorozashi
&pageurl=/kouden-okokorozashi/bimi010/
&__event=PA01_000_001
&sell_type=0


項目が埋まりましたら、
http://urlencode.net/
にて「オプション」から「EUC-JP」をご選択いただき、
日本語の部分を一箇所ずつ「エンコード」し、
元のURLを置き換えていただき、
間の改行を消して１行にまとめていただくことで
URLが完成します。

完成しましたら、予め実際にアクセスしていただき、
見た目に問題がないか（文字化けなどしていないか）、
ただしく申請できるかどうか、など
ご確認いただきますようお願いします。

Answer

ECマスターズの田中です。

> デザインレシピに記載のタグにて、PC商品ページにお気に入りボタンを設置したいのですが、画像サイズが縮小表示されません。
> 1200x300の画像を550:140で表示させるにはどうしたらいいですか。

https://club.ec-masters.net/index.php?design_page1
上記、既存のお気に入りボタンの見た目を変更する方法のことですね。

張り付け用のタグに含まれる
background: url(画像URL) no-repeat 0 0 !important;
に対して
background: url(画像URL) no-repeat 0 0 / contain !important;
のように「 / contain」を追記していただくことで、
縦横比を変えずに、width・heightで指定したサイズに収まるように
表示していただくことができます。

> 資料請求ボタンを商品販売説明文内に設置する方法はありませんか？画像リンクでも構いません。

残念ながら、資料請求ボタンの設置方法は発見されておらず、
実際に設置されているページのソースを見ながら、
実装方法を分析する必要がございますので、

もし、naqqo56さんにて、他社の実例が見つかりましたら、
URLをお知らせいただきますようお願いいたします。

Answer

田中様

ありがとうございました。
お気に入りボタンはうまくいきました。

資料請求ボタンの件は、私も他社での実例を見てやってみようと思ったのではないので、今のところは見たことはありません。
プレゼント応募の申請に資料請求ボタンを活用しようと思った次第で、QRコードやバナーのリンク先を資料請求ボタンURLに指定したかったのです。
やはり、難しいのですね 泣）。

Answer

ECマスターズの田中です。

> 資料請求ボタンの件は、私も他社での実例を見てやってみようと思ったのではないので、今のところは見たことはありません。
> プレゼント応募の申請に資料請求ボタンを活用しようと思った次第で、QRコードやバナーのリンク先を資料請求ボタンURLに指定したかったのです。

なるほど、そのような仕組みを想定されていたということですね。
その場合、もし実現したとしても、
QRコードやバナーをクリックした途端に
「資料請求を行いました」のような案内が表示されてしまい、
お客様を驚かせてしまうのではないでしょうか。

それよりは、資料請求ボタンを設置する商品ページを
プレゼントの特集ページと見立てて、
販売説明文などを活用してプレゼントの説明を行い、
自然に資料請求ボタンを押していただける作りにしていただくのは
いかがでしょうか。

実際に資料請求ボタンが設置されている様子を確認させていただければ、
ボタンを画像ファイルに変えることも可能です。
ぜひ一度、ご検討のほどお願いいたします。

Answer

田中様

アドバイスをありがとうございます。
実際作っているのが以下のページです。
まだ作成途中なので、これから商品販売ページにプレゼント申請のための記載をしていくつもりでおります。

https://item.rakuten.co.jp/●●●/luckyent/

実はこの企画のはじまりは、先日の大阪での勉強会で清水さんより「商品に当たりくじ入れたら？」という一言からでした^^
100個につき1個当たりくじをいれて、当選した方にプレゼントを申請していただくために資料請求ページを使おうかと思っております。

ご覧いただいて、何かもっと効率的な方法があれば教えてくだされば幸いです！

Answer

田中様

お世話になっております。

ご指示いただいたとおりに試してみたのですが、うまくいきません。
「おこころざし」さんの例でエンコードしたURLを実際見てみても、全然関係のない検索結果が出るだけでした。
何が間違っていそうでしょうか？

Answer

ECマスターズの田中です。

失礼いたしました。
前回私よりご案内差し上げた内容について、
２行目先頭の&は?にしなければならない、
URL全体をエンコードすると必要な記号までエンコードしてしまう、
といった不備がございましたことを確認いたしました。

改めて、正しい内容に修正いたしましたので、
お手数ですが、再度、現在の内容に沿って
URLを作成していただきますようお願いいたします。

Answer

田中様

URLが作れました。ありがとうございます。
ところで、このURLでQRコードを作成しようとしましたら、長すぎてできませんでした。
QRコード化する方法はありますか。

Answer

ECマスターズの伊藤です。

> ところで、このURLでQRコードを作成しようとしましたら、長すぎてできませんでした。
> QRコード化する方法はありますか。

http://urx2.nu/

こちらのサイトにて、URLを短縮していただき、
短縮URLにてQRコードで作成していただく
方法ではいかがでしょうか。

QRコードを作成するサイトに
こだわりがないようでしたら、
上記サイトにて、短縮URL作成時に
同時に、QRコードも作成できますので、
ご確認くださいませ。
（少しスクロールするとあります）

Answer

伊藤様

QRコード作成までできました！ありがとうございました。

Answer

解決済みにいたしましたのに再質問で申し訳ありません。

教えていただきました方法を利用して、以下ページを作成しました。
https://item.rakuten.co.jp/●●●/luckyent/

商品自体には「注文ボタンをうけない」よう設定していますが、
ページをスマホで見ると「売り切れました」という表示が出てしまいます。
これを消す方法はありませんでしょうか。

Answer

ECマスターズの田中です。

> ページをスマホで見ると「売り切れました」という表示が出てしまいます。
> これを消す方法はありませんでしょうか。

下記１行を、スマートフォン用商品説明文に追記していただければ結構です。

/* 売り切れ表示を消す */ .itemLimitation { display: none; }

※RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

Answer

田中様

おーーーー！さすがです。できました！！！

Answer

いつもありがとうございます。

資料請求ボタンの件でこちらのページ案内に沿って
試みようとしましたが、
いかんせん私の理解力不足で手を付けられていません。

わたしとしては、商品ページ内の
資料請求ボタンの文章を書き換えたいと思い、
PCでは「お気に入り」のように差し替えるだけが
したいと考えております。
また、スマホでは文章を変えたいと思っていろいろ調べましたが
ちょっと理解できず困っております。

商品ページとしてはこちらで↓
https://item.rakuten.co.jp/komatsuen01/100-01/
PC上での表記は問題ないのですが
スマホでの表記を変更したいです。

どうぞよろしくお願いします。

添付は他店舗の例です。###HR######IMG064b8eb010ffcd54eedcb6d0078501288.jpegIMG0###

Answer

ECマスターズの田中です。

残念ながら、スマートフォン用商品ページにて、
資料請求ボタンの文章を変更する方法はございません。

2020年9月29日(火)より導入されました

スマートフォン編集項目の入力エラーチェック強化
https://ron.rms.rakuten.ne.jp/ron_articledetail?id=a050K00001DOEiMQAX&articleId=kA10K0000001leaSAA

より前に設置された改変の仕組みは、
構造によって引き続き動作させることができますが、
新しく設置することはできない状態となっております。

Answer

田中様

お忙しいところ早急な対応ありがとうございます！
とはいえ結果的には残念。

なんとかページ上で誘導できるような
表記で乗り切ります！
ありがとうございました。