2017-08-24 9 views
3
通常、この種のコードを使用JSトラッキングを使用

ウェブサイト:最後にHotjarやGoogle Analyticsなどのウェブサイトで、<script>タグの代わりに複雑なトラッキングコードが使用されるのはなぜですか?

<script> 
 
    (function(h,o,t,j,a,r){ 
 
     h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)}; 
 
     h._hjSettings={hjid:9999,hjsv:5}; 
 
     a=o.getElementsByTagName('head')[0]; 
 
     r=o.createElement('script');r.async=1; 
 
     r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv; 
 
     a.appendChild(r); 
 
    })(window,document,'//static.hotjar.com/c/hotjar-','.js?sv='); 
 
</script>

を、これらのスクリプトは、ちょうどページの<head><script>タグを追加するので、確実に存在しなければなりません彼らがこのようにしている理由。

広告ブロックのバイパスの理由はありますか?生成された要求は、<head>にハードコードされている場合と同じではないでしょうか?

答えて

1

回答の少なくとも一部は、ベンダーがページのレンダリングを妨げないようにライブラリをロードしたいということです。

ブラウザがスクリプト要素にヒットした場合、スクリプトソースを取得しようとし、完全なスクリプトがダウンロードされるまでページがレンダリングされないようにする可能性があります。悪い昔、ウェブサイトが空白になってしまったのは、Googleアナリティクスのスクリプトをタイムリーにダウンロードできず、レンダリングが中止されたためです。スクリプトインジェクションは、スクリプトを非ブロック化するための受け入れられた方法になりました。

他の方法があります(問題が古いので、for historical interest here is a link to an 2009 article that discusses the issue)が、スクリプトインジェクションは道に沿っていくつかの変数を設定する便利な方法です最善の方法、またはそういくつかの企業とのプロセスです)。

1

私はHotjarのチーフアーキテクトですから、私たちがこの特定の方法でそれをした理由を説明します。

  1. メインスクリプトが読み込まれる前に処理を行う必要があります。

    h.hj = h.hj || function(){(h.hj.q = h.hj.q || [])。push(arguments)};

この行によって、メインスクリプトがロードされた後に実行するアクションを保存することができます。私たちのスクリプトがロードされる前に、hj( 'trackVirtualPageView'、 '/ url')のようなものを呼び出すことができます。

  1. 設定のようなものをスニペットの一部として保存することができます。

    h._hjSettings = {hjid:9999、hjsv:5};

これは、スクリプトをロードするときにクエリ文字列の一部として絶対に追加することができます。そのアプローチを使用することの欠点は、ブラウザがscript.js?hjid = 1とscript.js?hjid = 2が実際に同じJSファイルをロードすることを知ることは不可能になるため、キャッシングの最適性が低下することです。

  1. 最後の部分で実際には<script async=1>タグを作成し、それを実際にうまく動作する<head>に追加しています。私たちがJSを使ってやっているのは、コードを1か所に配置するように頼むだけで、ユーザーのためにできるだけ簡単にしたいからです。

わたしがやっていることをもっとうまくやっているかもしれませんが、私は幸せに気付いていません。もしある場合は、手を差し伸べてください! :)

+0

私のコードは少し異なっているようですが、これは非同期XMLHttpRequestを含んでいます、これは新しい非同期スクリプトを非同期的に読み込んでいるからですか? – Brandito

関連する問題