🐙

Cloudflare Zaraz と Google Analytics 4

2023/11/19に公開

今日はCloudflare Zaraz を Google Analytics 4 で試してみます。

Zaraz とは

Zaraz はサードパーティーツールマネージャとCloudflareでは呼んでいます。

HTMLに埋め込まれ本来クライアントブラウザ側で実行される様々なスクリプトをCloudflareのエッジで実行させた後必要最小限のスクリプトをクライアントブラウザ側で実行させることにより、Webページレンダリング速度の向上、プライバシー保護の強化を実現するものになります。

例えばGoogle Analytics 4との連携オプションであれば、Google Analytic 4専用スクリプトを全てのHTMLに入れる必要がありますが、CloudflareのCDNを使っていれば、すべてのページに自動でCloudflareがスクリプトを挿入実行するためメインテナンスが容易となります。また、クライアントのIPアドレスをGoogle側に提出しないなどのオプションも存在するため、高いプライバシーを実現できます。

対応しているサードパーティーツールは以下にまとまっています。

非常に多機能なので複数回に分けて機能を紹介していく予定です。

さっそくやってみる

まずはいつも通りDNS Proxy モードでWebサイトをホスティングします。
以下のHTMLを作成しておきます。

zaraz.html

<!DOCTYPE html>
<html>
  <head>
          
    <title>Hello, World!</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

ブラウザのデベロッパーツールで見るとHTMLだけを読み込んでいることがわかります。

次にGA4 を設定します。この記事ではGA4そのものの設定方法は割愛しますが、

Googleの手順書がここにあります。非常に簡単ですので初めての方でも一度挑戦してみて下さい。
Data Streamというものが初期セットアップで作成されます。

ここのドメインはオリジンではなくCloudflare CDN経由のドメインをセットしてください。
MEASUREMENT IDはZarazの設定に必要となるのでコピーしておきます。

ga4

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PPSC70SEWY"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-PPSC70SEWY');
</script>

通常はこのスクリプトを各HTMLの<header>に挿入する必要がありますが、Zarazがその作業を行いますので挿入は不要です。ちなみに通常のようにこのスクリプトをHTMLに埋め込むと以下となります。

jsがGoogleドメインから読み込まれていくつかの情報を提出していることがわかります。

Zaraz の設定

ここからが本題のZarazの設定です。
ドメイントップ、マネージメントコンソール左ペインのZarazをクリックします。

GA4をクリックします。

Continueを押します。
Permissionとしてオプションが求められますが、今回はデフォルトのまま進めるため、Continueを押します。

先ほどコピーしたMEASUREMENT IDを挿入します。

クライアントブラウザのIPアドレスをGoogle側に提出させない場合、このオプションをオンにします。

Add fieldを押すことで追加の情報をGA4へ送出させることができます。例えばGA4ではユーザーIDを送出することで複数デバイスをユーザーが用いた場合の動作を把握することが出来ます。

Saveを押すと設定が完了です。

先ほどのzaraz.htmlをCloudflareのCDN経由で読み込んでみます。

<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<script nonce="25eb45ab-111a-489c-8f3f-e3d2da205960">(function(w,d){!function(bS,bT,bU,bV){bS[bU]=bS[bU]||{};bS[bU].executed=[];bS.zaraz={deferred:[],listeners:[]};bS.zaraz.q=[];bS.zaraz._f=function(bW){return async function(){var bX=Array.prototype.slice.call(arguments);bS.zaraz.q.push({m:bW,a:bX})}};for(const bY of["track","set","debug"])bS.zaraz[bY]=bS.zaraz._f(bY);bS.zaraz.init=()=>{var bZ=bT.getElementsByTagName(bV)[0],b$=bT.createElement(bV),ca=bT.getElementsByTagName("title")[0];ca&&(bS[bU].t=bT.getElementsByTagName("title")[0].text);bS[bU].x=Math.random();bS[bU].w=bS.screen.width;bS[bU].h=bS.screen.height;bS[bU].j=bS.innerHeight;bS[bU].e=bS.innerWidth;bS[bU].l=bS.location.href;bS[bU].r=bT.referrer;bS[bU].k=bS.screen.colorDepth;bS[bU].n=bT.characterSet;bS[bU].o=(new Date).getTimezoneOffset();if(bS.dataLayer)for(const ce of Object.entries(Object.entries(dataLayer).reduce(((cf,cg)=>({...cf[1],...cg[1]})),{})))zaraz.set(ce[0],ce[1],{scope:"page"});bS[bU].q=[];for(;bS.zaraz.q.length;){const ch=bS.zaraz.q.shift();bS[bU].q.push(ch)}b$.defer=!0;for(const ci of[localStorage,sessionStorage])Object.keys(ci||{}).filter((ck=>ck.startsWith("_zaraz_"))).forEach((cj=>{try{bS[bU]["z_"+cj.slice(7)]=JSON.parse(ci.getItem(cj))}catch{bS[bU]["z_"+cj.slice(7)]=ci.getItem(cj)}}));b$.referrerPolicy="origin";b$.src="/cdn-cgi/zaraz/s.js?z="+btoa(encodeURIComponent(JSON.stringify(bS[bU])));bZ.parentNode.insertBefore(b$,bZ)};["complete","interactive"].includes(bT.readyState)?zaraz.init():bS.addEventListener("DOMContentLoaded",zaraz.init)}(w,d,"zarazData","script");})(window,document);</script></head>
<body>
<h1>Hello, World!</h1>
</body>
</html>

GA4ではなくZarazのjsが読み込まれ実行されていることがわかります。
この状態で複数回アクセスを行いGA4のReportを見てみます。

正しくアクセスが識別されていることがわかります。
Cloudflare側も同様です。

次回はCookieセット時の同意画面出力をについてまとめる予定です。

Zaraz とは

さっそくやってみる

Zaraz の設定

Discussion