楽天市場で開催される「毎月5と0のつく日は楽天カード利用でポイント5倍」のバナーを設置されているショップは多いと思います。
バナーのリンク先は下の2つが考えられます。
- キャンペーンページ
- キャンペーンのエントリーページ
バナーのリンク先をキャンペーンページにしている場合は毎回更新する必要はありません。しかし、リンク先がエントリーページで、かつ毎回更新する手間がなければどうでしょう。エントリーページをリンク先にしたいと思いませんか?
本記事ではエントリーページのURLをJavaScriptを用いて自動的に書き換える方法を解説します。
デモ:楽天カード利用でP5倍のエントリーURLを自動で書き換える
まずはデモをご覧ください。バナーをクリックすると次回開催のキャンペーンエントリーページに遷移します。
See the Pen 楽天カード利用でP5倍のエントリーURLを自動で書き換える by ざきひー (@zakihiii) on CodePen.default
HTMLとJavaScriptをコピペするだけで実装できますが、少し解説しておきます。
楽天カード利用でP5倍のURLについて
楽天カード利用でP5倍のURLは上のようにキャンペーン当日の日付が含まれています。この8桁の数字をJavaScriptを用いて自動で変更します。
JavaScript
ざっくりまとめると、下のような流れで記述しています。
- ページを閲覧した日付から次回開催されるキャンペーンの日付を算出する
- 算出した日付からエントリーページのURLを生成し<aタグ>に代入する
HTML
HTMLは<aタグ>にclass=”card_pt5_entry”をつけるだけです。
以上で解説は終了です!
RMSでも実装できる
RMSでは通常JavaScriptは使えません。しかし、<bodyタグ>のonpageshow属性を利用することでRMSのヘッダーやフッターにも実装することができます。
※裏技的手法になりますのでご利用の際は自己責任でお願いします。
コメント