AmazonJSのAMP対応について

Simplicityの特徴 フォーラム 要望・機能追加など AmazonJSのAMP対応について

このトピックには19件の返信が含まれ、2人の参加者がいます。5 ヶ月前 peri さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #46807

    peri

    いつもお世話になっております。

    Simplicity2.3.7でAMPをONにしています。
    現在の状態だと、AmazonJSのAMP対応はされていないと思いますが、物理的に可能であれば今後のバージョンアップで対応していただけるとありがたいです。

    現在の状態だと、
    The mandatory attribute ‘height’ is missing in tag ‘amp-iframe’

    というエラーが出ます。
    高さが指定されていないのはわかりますが、自前で解決方法が分かりません。

  • #46848
    わいひら
    わいひら
    キーマスター

    僕は、AmazonJSを使っていないので、AMP設定をオンにした状態でいくつかAmazonJSが稼働しているサンプルページのURLを掲載していただいて良いでしょうか?

  • #46879

    peri

    わいひらさま

    当方のサイトでAmazonJSを使っているページのリンクを幾つか貼っておきます。

    https://cre027t.jp/classic10/
    https://cre027t.jp/ucjj9006/
    https://cre027t.jp/raspberry-pi/

  • #46885
    わいひら
    わいひら
    キーマスター

    ページを拝見して見たところ、AmazonJS自体はJavaScriptを用いて商品情報を出力しているようです。
    ただ、AMPではJavaScriptは利用できません。AMPエラーが出ます。
    けれど、AmazonJS側では、スクリプトを利用できない環境用に以下のようなタグを出力して、iframeでAmazonデフォルトのブログパーツ機能を読み込んでいます。
    <noscript><iframe src="http://rcm-jp.amazon.co.jp/e/cm?t=xxxxx-22&o=9&p=8&l=as1&asins=B00KCITBCI&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></noscript>
    Amazonブログパーツ自体の大きさは、width:120px;height:240px;の固定なのでamp-iframeタグで幅と高ささえ指定してやれば、いけるかと思ったのですが1つ問題がありました。

    それは、iframeで読み込んで入れURLがhttpだということです(httpsではない)。
    http://rcm-jp.amazon.co.jp/...
    AMPでは、iframeからhttpを読み込むと、以下のようなエラーが結局出てしまいます。

    Invalid URL protocol ‘http:’ for attribute ‘src’ in tag ‘amp-iframe’.

    このURLのプロトコル部分はどうしようもないかもしれません(httpsで利用することができる代替URLでもあれば別ですが)。ですので、これはちょっと現在テーマ側からはどうしようもできないかもしれません。

  • #46887
    わいひら
    わいひら
    キーマスター

    ていうか、Amazonアソシエイトから久しぶりに商品リンク(ブログパーツ)を生成してみたら、生成される商品リンクは、httpsですね。

    <iframe src="https://rcm-fe.amazon-adsystem.com/e/cm?t=xxxxx-22&o=9&p=8&l=as1&asins=B00BXVR8FU&ref=tf_til&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
    こちらのURLを利用するように置換してやればうまくいくのかも。
    https://rcm-fe.amazon-adsystem.com/

    ただ、今日はもう遅いので明日やろうと思います。
    明日実際にやってみないと、うまくいくかどうかはわからないですけど。

  • #46888
    わいひら
    わいひら
    キーマスター

    http://rcm-jp.amazon.co.jp/https://rcm-fe.amazon-adsystem.com/に変更しても問題ないようですね。
    これだったら、うまくいくかも。おそらく。
    とりあえずは明日にします。

  • #46892
    わいひら
    わいひら
    キーマスター

    とりあえず、僕の予想できる範囲では、対応させてみました。
    よかったら試していただけると幸いです。
    https://wp-simplicity.com/wp-content/uploads/2016/10/simplicity2-6.zip

    Amazon商品リンクのiframeでそのまま表示させようとしたのですが、なんだかんだで問題点が結構あってうまくいきませんでした。ですので結局iframeに含まれているリンクから、アソシエイトURLを再構成し、そのアソシエートURLからブログカードを生成して表示するようにしてみました。

  • #46903

    peri

    色々対応して頂いてありがとうございます。

    さっそく、ダウンロードして実験してみました。
    AMPエラーは無くなりました!

    現状はamazonアソシエイトのリンクアドレスがそのまま表示されています。
    画像が表示されるのが理想ですが、エラーが無いのでこれだけでもありがたいです。

    AMPの根本的なことが理解不足ですみません。

    現在、simplicity2-6.zipを適用させた状態です。
    https://cre027t.jp/classic10/
    https://cre027t.jp/ucjj9006/
    https://cre027t.jp/raspberry-pi/

  • #46905

    がちょぴん

    >periさん

    初めまして。

    一番良い対応は、プラグイン開発者に対応するようお願いする事です。
    作った物の修正 or 追加等、プラグイン開発者が一番良く知っています。

    URL:https://goo.gl/xpfaJO

  • #46907
    わいひら
    わいひら
    キーマスター

    おそらく改行状態が影響しているのかもしれません。
    一応確認なんですが、テンプレートファイルや、functions.phpはカスタマイズしていないですよね?

    僕の環境だと以下のようにブログカード形式で表示されます。

    サムネイルとなる商品画像はページのキャプション画像になります。完全な商品画像を表示させようとすると、かなりの手間なので、諦めていただければと。そこまでやるとなるとリモートもしくはアマゾンAPI上から画像引っ張ってくる必要が出てくるので、かなり大変そうなので。

    一応、推測ではありますが修正してみたので、以下を試していただけると幸いです。
    https://wp-simplicity.com/wp-content/uploads/2016/10/simplicity2-7.zip

  • #46910
    わいひら
    わいひら
    キーマスター

    あと、できればこっちも試してもらって良いですか。
    https://wp-simplicity.com/wp-content/uploads/2016/10/simplicity2-8.zip
    こっちが本来AmazonJSが出力するiframeをAMP化した場合の表示です。

    ただこっちは、僕が試した限りでは、「表示される商品リンク」と「表示されない商品リンク」があったりして、いまいち動作が不安定だったので、先程の仕様にしてみました。
    こっちがうまくいくようであれば、こっちでも良いのですが。

  • #46911

    peri

    わいひら様

    >テンプレートファイルや、functions.phpはカスタマイズしていないですよね?
    functions.phpは触れていません。
    テンプレートファイルとはどの部分でしょうか?

    おそらく触れていないと思います。

    こちらの環境だと、simplicity2-7.zipはAMPエラーが出てAmazonJSは表示されません。
    simplicity2-8.zipは、わいひら様と同じ表示です。

    当方としては、通常のアソシエイト表示でも満足です。
    ありがとうございます。

    現在、simplicity2-8.zipを入れた状態です。
    https://cre027t.jp/classic10/
    https://cre027t.jp/ucjj9006/
    https://cre027t.jp/raspberry-pi/

    >がちょぴん様
    おっしゃる通りです。
    本家のサイトもチェックしてみます。

  • #46912

    peri

    追記です。

    以前のブログカードの表示と同じで、AmazonJSリンクの頭に<p>を付けたらどうなるか、simplicity2-7.zipで実験してみます。

  • #46913

    peri

    simplicity2-7.zipで改行を試してみましたが、AMPエラーで表示されないのは変わりませんでした。

    simplicity2-8.zipならエラーは出ません。

  • #46916
    わいひら
    わいひら
    キーマスター

    テンプレートファイルとはどの部分でしょうか?

    テンプレートファイルとは、PHPファイルのことです。

    あら、simplicity2-8でも全て問題なく表示されますね。しかも結構いい感じで表示されてる。
    すると、僕のローカル環境だけでおかしな表示になっていたのか。
    表示に問題がないようでしたら、2-8にしようかなと。
    ただ、Amazonの商品リンクを利用した、AMPページだと以下のようなコンソールエラーが出るのは気になるところです。


    でもこれは、アマゾン側の問題かも。

    あと出来れば、2-7を適用していただいてエラーが出ている状態を見せていただくことも可能でしょうか。
    どういったエラーが出ているかを見てみて、何が問題だったかを把握しておきたいので。あとは、どちらにしようか決めたいと思うので。

  • #46917

    がちょぴん

    >periさん

    提示されているサイトにアクセスしたところ画像表示されていました。
    ブラウザから広告ブロック等の拡張機能入れていたら一旦無効にして確認してみてください。

  • #46918

    peri

    わいひら様
    がちょぴん様

    広告ブロックは入れていません。

    現在simplicity2-7.zipを適用した状態です。
    この場合、こちらの環境だと
    例えば下記リンク先の場合は
    https://cre027t.jp/classic10/

    以下のようなエラーメッセージが出で、アソエイトは表示されません。
    The mandatory attribute ‘height’ is missing in tag ‘amp-iframe’

    こちらがチェックで使っているブラウザがvivaldiなのが原因かもしれません。
    クロムのプラグインを入れてAMPチェックをしています。
    ただし、グーグルのSearch Consoleからエラーチェックをしても同じエラー表示です。

  • #46928
    わいひら
    わいひら
    キーマスター

    とりあえず、Amazonアソシエイトの商品リンク(ブログパーツ)がうまく表示されるようであれば、商品リンクの方を次回採用したいと思います。
    そっちの方が、アマゾンリンクとわかりやすいと思うので
    2-7の方は、iframeは使用していないはずなんですけど、2-8がうまくいくのなら、それはそれでいいかなと。

  • #46930
    わいひら
    わいひら
    キーマスター

    periさん、テスト状態を見せていただいてありがとうございます。
    実際の稼働ページで表示を見させてもらうことで非常に参考になりました。
    もう、元に戻していただいても大丈夫です。

  • #46937

    peri

    わいひら様
    こちらこそ、ご対応ありがとうございます。
    今後ともよろしくお願いいたします。

トピック「AmazonJSのAMP対応について」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)