Amazonアソシエイト 商品リンクがhttps環境で表示されない【SSL iframe 不具合】


Amazonアソシエイトで生成した商品リンクやウィジェットが本サイト(https)で表示されないトラブルがありました。
 

結論としては、サイトをSSL化している場合に外部接続先にうまく接続できないことで発生した問題でした。
 

今回の経緯と原因、および解決策を説明します。

 

※2016年7月5日時点で本現象を発生しました。
 

Amazonアソシエイト トップページ

Amazonアソシエイト


 

もくじ

以下は本記事のもくじです。

  1. 1.Amazonアソシエイト 商品リンクがhttps環境で表示されない
    1. 1-1.表示不具合の原因と解決策
    2. 1-2.経緯と現象
    3. 1-3.補足 GoogleAdsenseの場合


 
それでは内容を説明していきます。

 

スポンサーリンク



 
 

1. Amazonアソシエイト 商品リンクがhttps環境で表示されない

1-1. 表示不具合の原因と解決策

https(SSL化)しているウェブサイトの場合、生成したhtmlコードの中のsrc属性を「http://・・・」→「//・・・」または「https://・・・」に修正しないとダメなようです。
 

Amazonアソシエイト htmlコードのURLを修正

 

1-2. 経緯と現象

本サイト「https://keimatsumoto.com」にAmazonアソシエイトで生成したHTMLコードを本サイトに埋め込んでみたものの、空白のままで表示がされませんでした。

 

経緯としては下記の通りです。

 

Amazonおまかせリンク(R)のhtmlコードを生成

Amazonアソシエイト ウィジェット おまかせリンク(R)

 

本サイトのサイドバーにウィジェットを貼り付けましたが、表示を確認しても空白のまま

Amazonアソシエイト 商品が表示されない

 

・GoogleAdsenseのように少し時間が経ったら見えるようになるのかもと1時間くらい放置しても変化なし。

・Amazonおまかせリンク(R)はβ版だからな?(※)と思い、次に通常の商品リンクを貼ってみましたが変化なし。

 

  •  

    (※2016.07.09追記)Amazonおまかせリンク(R)は、GoogleAdsenseのようにWebサイトの内容に沿った商品を自動的に表示してくれます。だいたいはWeb関連の本などが表示されていましたが、なぜかまれにアダルトコンテンツが表示されていました。

    下記の例だとなぜかAdobe DreamWeaverの本に混じっています。

    アマゾンおまかせリンク(R)β版

    アダルトコンテンツが表示された例

     

    そんな関連コンテンツは入れてないのになと思いましたが、Amazonおまかせリンク(R)の仕様を見返すと下記のような注意書きが書かれていました。

    4.ベータテストバージョンの期間は、条件指定に関わらず、まれにアダルトタイトルが表示されてしまう場合のあること。

    というわけでβ版が終わるまでAmazonおまかせリンクはしばらく見送ることにしました。

 

 

いろいろ調べてみるとHTTPS環境でAmazonアソシエイトの広告が表示されないとの情報を見つけました。

https://s8a.jp/https-not-work-iframe

本サイトもSSL化しているのでこれが原因そう。

書いてある通り、src属性の部分を「http://・・・」→「//・・・」に変更するとうまく表示されました。

Amazonアソシエイト htmlコードのURLを修正

 

 

修正後ページを確認するとウィジェットが表示されています。

Amazonアソシエイト 商品が表示されるようになった

 

 

同様に、商品リンクも「https://・・・」または「//・・・」に修正すると改善します。

Amazonアソシエイト 修正前の画面 商品が表示されない

修正前  商品リンクが表示されない

 

今度はhttp→httpsで試してみます。

Amazonアソシエイト http→httpsに修正

 

表示が改善されました。

Amazonアソシエイト 修正後の画面 商品が表示された

修正後 商品リンクが表示された

 

※調べていてわかったのですが、SSL化しているサイトの中に非SSLサイトのiframe(例 <iframe src=”http://・・”>)を埋め込むとセキュリティの問題で結構問題が起きるようです(当然と言えば当然か・・)

 

 

1-3. 補足 GoogleAdsenseの場合

ちなみにGoogleAdsenseは初めからうまく表示されていたので、念のため確認してみるとsrc属性は初めから「//・・・」になっていてSSLも考慮してくれているようです。

 

GoogleAdsense htmlコード

GoogleAdsenseの場合

 
今回は以上になります。最後までご覧いただきありがとうございました。

 

スポンサーリンク