楽天アプリ　商品ページ中にJava Scriptを使ってバナーを挿入する

Question

こんにちは。
校長と申します。

楽天アプリでは共通バナーのように一括でバナーを反映することができません。
各商品ページのスマホ用説明文にバナーを貼るのは大変なので、JavaScriptを使って、一括でバナーを表示したり、変更したいと思っています。

たとえば、以下のJava Script （ファイル名は仮にaaa.js）とします。
────────────────
(function() {
  //下のtag = ''の間に必要なクーポンの画像やリンク先のタグを各自で入力してください。
  var tag =  '';
  var q = jQuery.noConflict();
  setTimeout(function(){
    q( '#itemImageSlider' ).append( tag );
  },1000);
 
})();
────────────────

これをスマホ商品ページに以下のように記述すれば読み込めると思ったのですが、うまくいきませんでした。



どのように修正すればよろしいでしょうか。

Accepted Answer

ECマスターズの田中です。

それでは、設置したい位置に

と追記していただき、JSファイルの
document.body.insertAdjacentHTML('afterbegin',tag);
を
document.getElementById('special_event').innerHTML = tag;
にご変更いただきますようお願いします。


を記載した場所に、バナーが設置されます。

２箇所に含まれる「special_event」は、
わかりやすい文字列（先頭が数字ではない、半角英数字と-_による文字列）に
ご変更いただいても結構です。

Answer

ECマスターズの田中です。

楽天アプリの商品詳細画面は、
Webページとは異なる、アプリ独自の仕組みで作成されておりますので、
基本的には、JavaScriptによる操作を行うことはできません。

いただいたJavaScriptに記載されている、
商品画像の下にバナーを表示する操作も不可能となっております。

例外として、商品詳細画面の中で、
スマートフォン用商品説明文の部分は
独立したWebページとして読み込まれているため、
たとえば、商品説明文の先頭に共通パーツを表示する、
といった処理は可能となります。

以上をご確認の上、
商品説明文内でのJavaScriptによる表示をご希望かどうか、
返信にてお知らせいただきますようお願いいたします。

Answer

ECマスターズ
田中様

早々にご返答いただきありがとうございます。

商品説明文内でのJavaScriptによる表示を希望します。
宜しくお願いします。

Answer

ECマスターズの田中です。

それでは、aaa.jsの中身を、下記のようにご変更いただけますでしょうか。

//下のtag = ''の間に必要なクーポンの画像やリンク先のタグを各自で入力してください。
var tag = '（タグ内容省略）';
document.addEventListener("DOMContentLoaded", function(){
if( document.querySelectorAll('#shopCommonText').length === 0 ){
document.body.insertAdjacentHTML('afterbegin',tag);
}
});

Answer

ECマスターズ
田中様

おはようございます。校長です。

以下の記述をしてみましたが、やはり画像（バナー）が表示されません。
どこが間違っているのでしょうか？

お忙しいところ申し訳ございません。
宜しくお願いします。

────────────────
jsファイル（ファイル名aaa.js）
────────────────
(function() {
  //下のtag = ''の間に必要なクーポンの画像やリンク先のタグを各自で入力してください。
  var tag =  '';
document.addEventListener("DOMContentLoaded", function(){
if( document.querySelectorAll('#shopCommonText').length === 0 ){
document.body.insertAdjacentHTML('afterbegin',tag);
}
});
────────────────

────────────────
商品ページのスマートフォン用商品説明文 の記述
────────────────

Answer

ECマスターズの中野です。

> 校長さん

再度ご連絡いただきありがとうございます。
担当の田中より休み明けに確認・回答させていただきます。

お時間いただいておりますがお待ちいただければと思います。
よろしくお願いいたします。

Answer

ECマスターズの田中です。

aaa.jsの先頭に、前のバージョンで記載されていた
(function() {
が残っていたことが原因ですので、

aaa.jsの末尾に
})();
を追記していただきますようお願いします。
（※2019/11/4 18:19 ソース修正）

Answer

ECマスターズ
田中様

お世話になっております。

https://item.rakuten.co.jp/cordy/cog30/

このページなのですが、やはりバナーが表示されません。
どこの記述を直せばよろしいでしょうか？


■商品ページ(スマートフォン用商品説明文)



■JSファイル
────────────────
(function() {
  //下のtag = ''の間に必要なクーポンの画像やリンク先のタグを各自で入力してください。
  var tag =  '';
document.addEventListener("DOMContentLoaded", function(){
if( document.querySelectorAll('#shopCommonText').length === 0 ){
document.body.insertAdjacentHTML('afterbegin',tag);
}
});});

Answer

ECマスターズの田中です。

失礼いたしました、
追記内容が一部不足しておりました。

大変お手数ですが、aaa.jsの末尾の
});});
を
});
})();
上記２行に差し替えた上で、
動作をご確認いただきますようお願いいたします。

ショップURLの一部伏せ字が必要な場合はお知らせください。

Answer

ECマスターズ
田中様

お世話になっております。

差し替えましたが、やはりバナーは表示されません。

jsファイルの最後は

}
});
})();

これで良いですよね？

Answer

ECマスターズの田中です。

> jsファイルの最後は
> （中略）
>これで良いですよね？

はい、それで結構です。

ですが、実際の sp_cuopon24.js を確認すると、末尾が

document.body.insertAdjacentHTML('afterbegin',tag);
});
})();

上記のようになっておりました。
} が１つ不足しておりますので、追記を行っていただき、
下記の状態にしていただきますようお願いします。

(function() {
//下のtag = ''の間に必要なクーポンの画像やリンク先のタグを各自で入力してください。
var tag = '';
document.addEventListener("DOMContentLoaded", function(){
if( document.querySelectorAll('#shopCommonText').length === 0 ){
document.body.insertAdjacentHTML('afterbegin',tag);
}
});
})();

Answer

ECマスターズ
田中様

お世話になっております。

差し替えましたが、やはりバナーは表示されません。

商品ページのスマートフォン用商品説明文 の記述は下記で正しいですよね？

Answer

ECマスターズの田中です。

私にて、前の返信にていただいた商品ページを楽天アプリにて確認したところ、
商品説明文の先頭に、添付画像のとおり表示されておりました。

校長さんの端末では表示されておりませんでしょうか。
お手数ですが、他の端末などございましたら、そちらでもご確認いただきますようお願いします。###HR######IMG0109a5f3ed0e77328e885490c5764f859.jpegIMG0######BR###

Answer

ECマスターズ
田中様

お世話になっております。
校長です。

表示されるようになりました。(キャッシュが残っていたのかもしれません)

商品ページの一番先頭に表示されています。

これを任意の場所に表示ようにできますか？

月間優良ショップ
イベント告知君
★★バナー★★

このような順序で表示できれば理想的です。

Answer

ECマスターズ
田中様

お世話になっております。
校長です。

表示順序についてですが、
────────────────
月間優良ショップ
イベント告知君
商品画像
★★バナー★★

このような順序で表示できれば理想的です。

お忙しいところ恐縮ですが、よろしくお願いいたします。

Answer

校長です。

何度も質問してしまい、申し訳ございませんでした。
おかげさまでわたくしのやりたいことが実装できました。

本当にありがとうございました。

楽天アプリ 商品ページ中にJava Scriptを使ってバナーを挿入する

楽天アプリ　商品ページ中にJava Scriptを使ってバナーを挿入する