結論
Clarityを入れる目的は、Beyondの数字を置き換えることではなく、数字の裏にあるユーザー行動を別角度から見ること。最初は「全記事に広く入れる」より、改善したい記事だけに入れて二重分析するのが扱いやすい。
1. 全体像
広告から来た人が記事に入り、Beyondで成果を見て、Clarityで行動を見る。その2つをAIに渡して、記事のどこを直すべきかを決める。
versionPV、versionCLICK、versionCV、FV離脱やMCVなどの成果側。
録画、ヒートマップ、スクロール、クリック迷い、戻り、連打などの行動側。
「数字で落ちた場所」と「実際に迷った場所」をセットで渡し、改善案を作る。
| ツール | 見るもの | 強いところ | 弱いところ |
|---|---|---|---|
| Beyond | 記事別・広告別の成果数値 | CVやクリックなど、事業判断に近い数字を見やすい | ユーザーがなぜ止まったかは分かりにくい |
| Clarity | 録画、ヒートマップ、スクロール、クリック行動 | 実際の迷い、離脱直前の動き、読まれない箇所を見つけやすい | CV正本には向かない。サンプルや計測差もある |
| GA4 | 流入元、ページ遷移、イベント、全体集計 | サイト全体の流入や経路を見る補助に強い | 録画や個別の動きは見えない。実装次第で精度が変わる |
2. Beyondに入れる設定
Clarityの基本タグをBeyondの記事HTMLに貼り、その下でURLパラメータをClarityのカスタムタグに変換する。広告名や記事IDで録画を絞れるようにするための設定。
Clarityタグを貼る
Beyondの記事HTML内に、Clarityの基本タグを設置する。
URL値を読む
utm_creative や記事IDをURLから取得する。
Clarityにタグ付け
録画やヒートマップを広告名・記事IDで絞れるようにする。
個人情報を送らない
氏名、電話、メール、ユーザーIDなどは送らない。
| Clarityタグ | 値の元 | 使い道 | 注意 |
|---|---|---|---|
article_id |
sb_article_uid またはURL末尾 |
記事単位で録画を絞る | 個人IDではなく記事IDだけにする |
ad_name |
utm_creative |
広告名別に行動差を見る | ファイル拡張子は落としておく |
utm_source |
utm_source |
TikTok、Metaなどの流入元を見る | 媒体別比較はBeyond数字と照合する |
page_path |
window.location.pathname |
同一ドメイン内の記事を分ける | URL全体ではなくpathだけを使う |
入れないもの: squadbeyond_uid、氏名、電話番号、メールアドレス、住所、問い合わせ内容、媒体管理画面URL、token/APIキー。美容・医療系LPでは特にマスキングを強めにする。
<script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "YOUR_CLARITY_PROJECT_ID");
</script>
<script>
(function () {
function clean(value) {
return (value || "").replace(/\.(mp4|mov|webm)$/i, "");
}
var params = new URLSearchParams(window.location.search);
var pathParts = window.location.pathname.split("/").filter(Boolean);
var articleId =
params.get("sb_article_uid") ||
pathParts[pathParts.length - 1] ||
"";
var adName = clean(params.get("utm_creative"));
var source = params.get("utm_source") || "";
if (window.clarity) {
if (articleId) clarity("set", "article_id", articleId);
if (adName) clarity("set", "ad_name", adName);
if (source) clarity("set", "utm_source", source);
clarity("set", "page_path", window.location.pathname);
}
})();
</script>3. 記事改善ループ
Clarityを入れた後は、録画をただ眺めるのではなく、Beyondの落ち込み地点とセットで見る。数字だけでも、録画だけでも、改善判断が偏りやすい。
| Beyondで起きたこと | Clarityで見る動き | 改善仮説 | 直す場所 |
|---|---|---|---|
| FV離脱が高い | FVで止まらず即スクロール、または戻る | 冒頭の期待値と広告訴求がズレている | FV見出し、冒頭画像、最初の不安提示 |
| クリック前で落ちる | CTA付近で止まるが押さない | CTA前の納得材料か、ボタン文言が弱い | CTA直前の根拠、ボタン周辺の文言 |
| 特定広告だけ悪い | 同じ記事でも広告別にスクロール深度が違う | 広告の約束と記事の入りが噛み合っていない | 広告別の導入文、最初の悩みの言語化 |
| Beyondは良いがClarityで迷いが多い | 連打、戻り、読了前の不自然なクリックが多い | 今は獲れているが、伸ばす余地やリスクがある | 説明順、FAQ、価格・不安解消パート |
- 毎日見るのはBeyondの成果数字。Clarityは、悪化・伸び悩み・広告別差分が出た記事だけ深掘りする。
- AIに渡す時は「対象記事」「対象広告」「Beyondの数字」「Clarityで観察した行動」「見たい仮説」をセットにする。
- Clarity APIやMCPは便利だが、制限や取得粒度があるため、主データパイプラインではなく補助分析として使う。
4. 最初にやること
いきなり全記事に広げるより、改善対象を絞って検証する。まずは1記事か1案件で、BeyondとClarityの見え方がどれくらい一致するかを見る。
対象記事を決める
FV離脱、クリック前離脱、広告別差分が気になる記事から始める。
タグを入れる
Beyond HTMLにClarityタグとカスタムタグを入れる。
録画を30〜50本見る
全録画ではなく、広告別・離脱箇所別にサンプルを見る。
修正案を1〜3個に絞る
記事全体ではなく、最初に効きそうな箇所だけ直す。