質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.79%

onload発火のjavascriptをスクロール発火にしたい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 422

score 97

ある広告会社の広告タグがあります。

元ソース

<script type='text/javascript' charset='UTF-8' src='//j.xxxxxx.net/js/ffffff.js' onload='new xxxxxxffffff.AdInitializer().initialize();' async></script>

この広告は、onloadイベントになっており、ページが読み終わったら表示される仕組みです。

これを、ページが読み終わった段階では何もせず、スクロールを開始した段階で有効になるよう改造したいです。

(ページの表示スピード改善が目的です)

下記のようにonloadをonscrollに変更しただけでは動きませんでした。

<script type='text/javascript' charset='UTF-8' src='//j.xxxxxx.net/js/ffffff.js' onscroll='new xxxxxxffffff.AdInitializer().initialize();' async></script>

上記のスクリプトは

<script type='text/javascript'> 
charset='UTF-8'; 
src='//j.xxxxxx.net/js/ffffff.js'; 
onload='new xxxxxxffffff.AdInitializer().initialize();' async;
</script>


と分解してみたのですが、上記の記載では動きませんでした。

adsecneのものなら下記を見つけたのですが、当方の広告会社のソースの分解が私にとっては難度が高く、うまく利用できませんでした。

<script>
(function(window, document) {
  function main() {
    // GoogleAdSense読込み
    var ad = document.createElement('script');
    ad.type = 'text/javascript';
    ad.async = true;
    // 新コードの場合、サイト運営者IDを書き換えてコメントアウトを外す
    //ad.dataset.adClient = 'ca-pub-XXXXXXXXXXXXXXXX';
    ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
    var sc = document.getElementsByTagName('script')[0];
    sc.parentNode.insertBefore(ad, sc);
  }

  // 遅延読込み
  var lazyLoad = false;
  function onLazyLoad() {
    if (lazyLoad === false) {
      // 複数呼び出し回避 + イベント解除
      lazyLoad = true;
      window.removeEventListener('scroll', onLazyLoad);
      window.removeEventListener('mousemove', onLazyLoad);
      window.removeEventListener('mousedown', onLazyLoad);
      window.removeEventListener('touchstart', onLazyLoad);
      window.removeEventListener('keydown', onLazyLoad);

      main();
    }
  }
  window.addEventListener('scroll', onLazyLoad);
  window.addEventListener('mousemove', onLazyLoad);
  window.addEventListener('mousedown', onLazyLoad);
  window.addEventListener('touchstart', onLazyLoad);
  window.addEventListener('keydown', onLazyLoad);
  window.addEventListener('load', function() {
    // ドキュメント途中(更新時 or ページ内リンク)
    if (window.pageYOffset) {
      onLazyLoad();
    }
  });
})(window, document);
</script>


どのようにすればスクロールで発火出来るかご教示いただきたくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

ページの表示スピード改善が目的です

scroll イベントは window など、画面上で矩形表示された可視要素にアタッチする必要がありますが、script埋め込みタグの生成において、オプション指定できないかをアドテク企業に相談するのが確実ではないでしょうか。

onload発火のjavascriptをスクロール発火にしたい

厳密にできるかどうかは、ご質問のコードに示された //j.xxxxxx.net/js/ffffff.js の実装次第ですので、このコードを読み解いて判断するしかありませんが、おそらく、無理だと思います。
script[onload="new AdTechObject"] となっていることから、発火した script要素自身をチェックする仕組みを埋め込んでいることが考えられるため)。


アドテク関連では、過去に違法コンテンツで多数のユーザを集客しつつ、スタイルシートでdisplay:hidden を指定したアフィリエイターの手法が、アドテク企業(広告代理業者)と広告主の両者に対する「詐欺行為にも似た手法」と報道されたこともあります。

このため、アフィリエイト報酬の合理的な算定を行うために「特定の方法でしか実行されない実装」にしていることが十分に考えられます。

「表示スピード改善が目的」であるなら、アドテク企業に相談されるのが良いと思います。

追記)
画像のlazyLoad のように、動的にページ内に差し込む方法は考えられます。

window.addEventListener("scroll", evt => {
  // evt から scroll 量を算出し、文書木に script を動的に差し込む。
});

具体的には示しませんが、この手順で実施する場合も、事前相談しておくのが良いと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/06/05 07:28

    有難うございます。
    おっしゃる通りです。
    現在、googleは表示速度の多寡で検索順位を上下する手法を取り入れようとしております。
    アドテク企業としては検索速度次第で、クライアントの検索順位に変動があることになり、
    ひいては自社の収益に大きく影響を及ぼすことになります。
    相談に対し、親身になってくれる可能性は十分にあります。
    当方がスクロール発火にしようとしたのも、今の広告収入が得られなくなるという焦り
    からでした。
    ご指摘いただいた通り、アドテク企業に相談してみたいと思います。
    有難うございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.79%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る