【楽天市場】クーポン獲得後リンク先を商品ページに戻す

こんにちは、デザイナーの真琴です。
もうすぐ、楽天のスーパーSALEが始まりますね。みなさん、準備の方は順調ですか？
様々な施策を考えていると思いますが今日はクーポンのお話をしていきます。

1. アプリとブラウザの違い
2. 商品説明文にクーポンリンクを設置
3. データの準備＆設置
4. RMSにjavaScriptを導入
5. テキスト

cp1.アプリとブラウザの違い

自分自身が欲しいものを楽天で購入する場合、クーポンがあれば取得しますよね？
スマホページでもアプリ版とブラウザ版とでは表示が異なります。

アプリ版を利用している人にだけ優しくない仕様になっています。

どちらも平等になるように【スマートフォン用商品説明文】にクーポンを貼り付けているお店をよく見かけます。

cp2.商品説明文にクーポンリンクを設置

まず、クーポンリンク用のバナーと配布するクーポンを用意します。

<a href="https://coupon.rakuten.co.jp/getCoupon?getkey=XXXXXXXXXX--&rt=">
<img src="https://image.rakuten.co.jp/XXXX/cabinet/box/coupon-10.jpg" alt="10%クーポン">10%クーポンはこちら
</a>

上記のタグのクーポンリンクと画像のURLを差し替えて
【スマートフォン用商品説明文】に貼り付ければアプリ版もブラウザ版も
平等にクーポンを取得することが可能になりました。

クーポンバナーをタップすると

またここで１つ優しくない仕様になっています。

クーポン取得後画面で、【このクーポンをつかう】をタップすると
取得前に見ていたページに戻ると思いきやショップのトップページに行ってしまいます。

若干微妙な気分になりませんか？
購入を迷いながらとりあえずクーポンを取得した方とかだと購入をやめてしまうかもしれません。

店舗サイドからの意見だと、楽天がそういう仕様なんだから仕方ない。
ブラウザバックで戻ればさっき見ていた商品ページに戻れるじゃないか。
などの意見がでてくるかもしれません。

「つくり手目線」ってやつですね、私もよくその目線で発言してしまうことがあるので最近は「お客様ファースト」を意識しながら日々の業務をしています。

「お客様ファースト」を意識して【このクーポンをつかう】をタップすると
取得前に見ていたページに戻るようになる方法を解説していきます。

cp3.データの準備＆設置

楽天GOLDの契約をしていないと導入ができないので、未契約の方や楽天GOLDってなに？という方は下記記事をご覧下さい。

楽天GOLD(ゴールド)とは？ メリット＆デメリット

まず、下記データ2つのデータをダウンロードしてください。

jQuery(function($){
  
  var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
  
  var searches = function( loc ){
    return loc.search.replace(/^\?/, '').split('&').filter(function (item) {
      return item !== '';
    }).map(function (item) {
      var _item$split = item.split('='),
        _item$split2 = _slicedToArray(_item$split, 2),
        name = _item$split2[0],
        value = _item$split2[1];

      return { name: name, value: value };
    });
  }

  function setSearch( ) {
    var loc = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
    var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
    var value = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
  
    loc.href = (loc.protocol + '//' + loc.hostname + ':' + loc.port).replace(/:$/, '') +
      loc.pathname + searches(loc).filter(function (item) {
        return item.name !== name;
      }).concat([{ name: name, value: value }]).reduce(function (total, item) {
        return '' + total + item.name + '=' + item.value + '&';
      }, '?').replace(/[?&]+$/, '') + loc.hash.replace(/#$/, '');
    return loc;
  }
  
  $('a').each(function(){
    if( this.hostname === "coupon.rakuten.co.jp" ){
      this.href = setSearch(this, 'rd', (location.protocol + '//' + location.hostname + ':' + location.port).replace(/:$/, '') + location.pathname ).href;
    }
  });
  
  $('a.itemfav').each(function(){
    this.href = "https://my.bookmark.rakuten.co.jp/?func=reg&shop_bid=" + $("meta[property='apprakuten:shop_id']").attr("content") + "&itype=1&svid=101&iid=" + $("meta[property='apprakuten:item_id']").attr("content");
  });
  
});

上記javaScriptをコピー、テキストエディタに貼り付けて「名前をつけて保存」
名前は任意で構いません。ここでは、【coupon.js】と名付けておきます。

次に、https://code.jquery.com/（外部リンク）より
jQuery 3.x の右にある minified を右クリックの上「リンク先を別名で保存」（※Chromeの場合）
【jquery-3.3.1.min.js】と名前をつけてダウンロードします。

2つのファイルをゴールドにアップロードします。
ここでは、ディレクトリ直下に「new_coupon」とフォルダを作成しアップロードしました。

new_coupon/
　├ coupon.js
　└ jquery-3.3.1.min.js

※とくにフォルダ名に指定はないので、任意の場所にアップロードしていただいても構いません。

cp4.RMSにjavaScriptを導入

続いて、RMSでの作業になります。

「店舗設定」→「デザイン設定」→ スマートフォン デザイン設定 「商品ページ共通パーツ設定 」の「商品ページ共通説明文 」に
先程アップロードしたファイルのタグを入力します。

<script ="" src="https://www.rakuten.ne.jp/gold/===店舗名===/new_coupon/jquery-3.3.1.min.js"></script ="" >
<script ="" src="https://www.rakuten.ne.jp/gold/===店舗名===/new_coupon/coupon.js"></script ="" >

【===店舗名===】を導入する店舗のURLに置換して貼り付けてください。

これで実装完了です。

先程、【cp2.商品説明文にクーポンリンクを設置】でクーポンを設置した商品ページで確認を行ってください。

正常に動作しない場合は、リンク先の間違いがないか確認してください。
もし、他のjavaScriptを実装されている場合だと干渉し正常に動作しない場合があります。

楽天市場でのCSS・javaScriptの導入について詳しく知りたい方は下記をご覧下さい。

楽天市場のスマートフォンページカスタマイズ裏ワザ

cp5.まとめ

いかがでしたか？直接的な売上げアップとは行かないですが、「お客様ファースト」を考えて対応すれば結果はついてくるのではないかと最近私は考えています。

制限されていたタグを使えるようにするだけでものすごくいろいろなことができるようになります。いろいろなショップを見て、すごいなぁと思うショップを見つけた時はそのページのソースを分解していくと構造がわかることがあるのでとても勉強になります。

こんなことできないかなぁ？と思うことは大体のことは何らかの手段を使えばできるようになることがほとんどだと思っています。
どんどんチャレンジしてより良いショップになるようにしていきましょう。

この方法はあくまでも楽天RMSの入力エラーチェックを回避する裏ワザで楽天株式会社の公式の方法ではないので楽天市場側が対応して使えなくなってしまう可能性もあります。そこを理解した上、自己責任でご使用下さい。