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

Question

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

元ソース

<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>

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

Answer 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 を動的に差し込む。
});

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

Comments

[tajix_japan]

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