🙆‍♀️

Cloudflara Zaraz が X と Instagram のサーバサイド埋め込みに対応しました

2024/07/22に公開

Cloudflara Zaraz はサードパーティのツールとサービスをクラウドにオフロードし、Web サイトの速度とセキュリティを向上させるCloudflareのサービスであり、Cloudflare Workers を活用して開発されています。

サードパーティーツールとは

様々なWebサイトがクライアントブラウザの情報を収集するために埋め込むビーコンやスクリプトをサードパーティツールと言っています。
これらのツールは時として予告なくユーザーのIPアドレスやフィンガープリント情報を収集するなどセキュリティ的な課題を生み出します。またパフォーマンスという観点でもウェブの描画を阻害するスクリプトによりページ全体の読み込みが遅延するケースがあります。

GA4 との連携

こちらのブログではユーザー側のIPアドレス情報を隠匿化しつつ、GA4にはユーザーの一意性を担保するための情報をCloudflare Zaraz で作成し引き渡すハンズオンとなっています。
また、ZaraにはCookie取得の同意フォームを表示忘れの内容必ず表示させる、等のオプションも存在しています。

X(Twitter) 埋め込みをやってみる。

やり方はとても簡単です。まず以下の記事を参考にCloudflare経由でアクセス可能なオリジンを構築します。

次にCloudflareのマネージメントコンソールでZarazをクリックします。

この通り対応しているサードパーティーツールが表示されています。
Twitter Pixelをクリックします。
全てデフォルトのまま作成し一番最後に表示されるコードスニペットをコピーしておきます。

  <twitter-post tweet-id="1754336034228171055"></twitter-post>

この部分HTMLに埋め込みます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <h1>Hello World!</h1>
  <twitter-post tweet-id="1754336034228171055"></twitter-post>

</body>
</html>

ブラウザで読み込むとこうなります。

1754336034228171055の部分は個別ツイートに付与されるIDになっていますので、オリジン側のフロントエンドで適宜置き換える仕掛けが必要です。
実際にブラウザで表示されるHTMLは以下の通りです。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
<script nonce="e485db44-5fc9-436c-807b-76a75724a04c">try{(function(w,d){!function(a,b,c,d){if(a.zaraz)console.error("zaraz is loaded twice");else{a[c]=a[c]||{};a[c].executed=[];a.zaraz={deferred:[],listeners:[]};a.zaraz._v="5752";a.zaraz.q=[];a.zaraz._f=function(e){return async function(){var f=Array.prototype.slice.call(arguments);a.zaraz.q.push({m:e,a:f})}};for(const g of["track","set","debug"])a.zaraz[g]=a.zaraz._f(g);a.zaraz.init=()=>{var h=b.getElementsByTagName(d)[0],i=b.createElement(d),j=b.getElementsByTagName("title")[0];j&&(a[c].t=b.getElementsByTagName("title")[0].text);a[c].x=Math.random();a[c].w=a.screen.width;a[c].h=a.screen.height;a[c].j=a.innerHeight;a[c].e=a.innerWidth;a[c].l=a.location.href;a[c].r=b.referrer;a[c].k=a.screen.colorDepth;a[c].n=b.characterSet;a[c].o=(new Date).getTimezoneOffset();if(a.dataLayer)for(const n of Object.entries(Object.entries(dataLayer).reduce(((o,p)=>({...o[1],...p[1]})),{})))zaraz.set(n[0],n[1],{scope:"page"});a[c].q=[];for(;a.zaraz.q.length;){const q=a.zaraz.q.shift();a[c].q.push(q)}i.defer=!0;for(const r of[localStorage,sessionStorage])Object.keys(r||{}).filter((t=>t.startsWith("_zaraz_"))).forEach((s=>{try{a[c]["z_"+s.slice(7)]=JSON.parse(r.getItem(s))}catch{a[c]["z_"+s.slice(7)]=r.getItem(s)}}));i.referrerPolicy="origin";i.src="/cdn-cgi/zaraz/s.js?z="+btoa(encodeURIComponent(JSON.stringify(a[c])));h.parentNode.insertBefore(i,h)};["complete","interactive"].includes(b.readyState)?zaraz.init():a.addEventListener("DOMContentLoaded",zaraz.init)}}(w,d,"zarazData","script");window.zaraz._p=async bn=>new Promise((bo=>{if(bn){bn.e&&bn.e.forEach((bp=>{try{const bq=d.querySelector("script[nonce]"),br=bq?.nonce||bq?.getAttribute("nonce"),bs=d.createElement("script");br&&(bs.nonce=br);bs.innerHTML=bp;bs.onload=()=>{d.head.removeChild(bs)};d.head.appendChild(bs)}catch(bt){console.error(`Error executing script: ${bp}\n`,bt)}}));Promise.allSettled((bn.f||[]).map((bu=>fetch(bu[0],bu[1]))))}bo()}));zaraz._p({"e":["(function(w,d){})(window,document)"]});})(window,document)}catch(e){throw fetch("/cdn-cgi/zaraz/t"),e;};</script></head>
<body>
    <h1>Hello World!</h1>
  <twitter-post tweet-id="1754336034228171055"></twitter-post>
</body>
</html>

<twitter-post>タグをCloudflare Zaraz が読み取って置換しています。

Instagramは同様に以下になります。

<instagram-post
  post-url="https://www.instagram.com/p/C3Sk6d2MTjI/"
  captions="true"
></instagram-post>

サードパーティーツールとは

GA4 との連携

X(Twitter) 埋め込みをやってみる。

Discussion