Netlify Analyticsの導入

Netlify Analytics：Webサイト監視用のシンプルで正確なソリューション

プロジェクトを立ち上げて、そのパフォーマンスを追跡したいと思ったことはありますか？多くの開発者は、複雑さ、ページの重量、またはプライバシーの追加に関する懸念のために、最初は分析を見落としています。 Netlify Analyticsは、簡単なソリューションを提供します。

私は個人的にこの監視を経験しました。私の最近のCSSグリッドジェネレーターの発売には分析が欠けていたため、その使用について暗闇の中にいました。 Netlify Analyticsは、事前のセットアップを必要とせずにレトロスペクティブ分析を可能にします。包括的なマーケティングプラットフォームに代わるものではありませんが、それは貴重なツールです。

重要な利点は、その精度です。サーバー側のデータは、ADブロッカー（推定15％のユーザーに影響を与える）、キャッシュ、その他の要因に対して脆弱なクライアント側の分析とは異なり、実際のサーバーアクティビティの明確な画像を提供します。

Netlify Analyticsダッシュボード

ダッシュボードは、キーメトリックの簡単な概要を提供します。

詳細については、日付までにアクセスできます。

また、トップソースとページの内訳もあります。

特に便利な機能は、壊れたリンクとリソースを強調する「トップリソースが見つかりません」です。これにより、自分のサイトで忘れられた壊れたリンクを特定して修正することができました。

このツールは個人プロジェクトに有益であり、分析の実装プロセスを簡素化します。ただし、Netlifyホスティングが必要であり、有料の機能であることを忘れないでください。データ保持は、古いサイトの90日（帯域幅）と30日（その他のメトリック）に制限されています。分析を可能にした後、データ母集団の2日間の遅延が発生する場合があります。

技術的な詳細

ダッシュボードはReactとHighChartsを使用します。 HighChartsの使いやすさとアクセシビリティ機能は、D3.JSのような代替品をめぐる選択における重要な要素でした。 SVG要素内でHTMLをレンダリングする能力と、優れたドキュメント、合理化された開発と組み合わせることができます。

UIの課題には、X軸を乱雑にすることなく、エリアチャートに日付を表​​示することが含まれます。カスタムJavaScriptコールバック関数は、毎月のデータを強調するためのアルゴリズムと組み合わせて、読みやすさが向上しました。

スニペットインジェクションによる代替分析

サードパーティ分析の場合、Netlifyはスニペットインジェクションを提供しますまたは<code>タグ。これは、グローバルスクリプトの包含とレポアクセスなしのスクリプトの管理に役立ちます。これにアクセス：サイト設定→ビルド＆展開→後処理→スニペットインジェクション。

たとえば、Google Analyticsを追加するには、コードをラップすることが含まれます。<script> tag:</script>

  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXX-XX');

You can name your snippets for easy management.

Netlify Analytics provides a convenient, accurate, and relatively simple solution for website monitoring, supplementing or replacing more complex third-party tools.

以上がNetlify Analyticsの導入の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。