サポートに連絡

メールでご返信します。通常は2日以内です。

不正利用を防ぐため、Google reCAPTCHA がこの送信を確認します。その際データが Google に送られます。スクリプトはこのフォームを開いたときにだけ読み込まれます。

← すべての記事

Google Tag Managerを使ってStats4Uカウンターを追加する

· Lukas Wojcik

これについては2015年のブログ記事に案内がある。そのスクリーンショットに写っているTag Managerは、もう今の見た目とは違う。そして七つのステップのうちの一つ——document.writeにチェックを入れる作業——はまったく不要になっている。本稿はその記事を置き換えるものだ。

本稿は、以前のガイドが諦めていた問いにも答える。あのガイドは、「Statsの画像がどこに表示されるかは制御できない」という理由で、Tag Managerでは透明カウンターを使うべきだとしていた。実際には制御できる。その方法はこのページの下のほうにある。

手短に言うと

Tag Manager内でTags → New → Custom HTMLと進み、HTMLフィールドに次の1行を貼り付ける。

20157 — 手順いま3 — つの欄とトリガーdocument.write の手順は不要 — スクリプトがもう使っていない 
<script src="https://www.stats4u.net/s4u.js"
        data-id="YOUR-ID" data-style="981" async></script>

トリガーをAll Pagesに設定し、保存してコンテナを公開する。YOUR-IDの部分は、統計ページで確認できるカウンター番号に置き換える。

これで作業はすべて終わりだ——2015年には七つのステップが必要だったところを、三つのフィールドとトリガー一つで済む。document.writeについて何かにチェックを入れる必要もない。スクリプトがもうそれを使っていないからだ。

実際には何が起きるのか、そしてなぜそれが望み通りではないかもしれないか

このスクリプトは、ページ内で自分自身の直後にカウンターを配置する。HTMLに直接貼り付けた場合は、これでまさに正しい動作になる。コードを置いた場所にカウンターが表示される。

Tag Manager経由では事情が異なる。コードがどこに置かれるかを、もはや自分では決めていないからだ。決めるのはコンテナのほうであり、たいていはドキュメントのhead内か、コンテナのスニペットを設置した場所になる。つまりカウンターはそこに挿入される——フッターでもサイドバーでもなく、Tag Managerがたまたまタグを注入した場所に。

透明カウンターにとっては、これはまったく問題にならない。だからこそ、以前のガイドはそれを勧めていた。デザイン980は何も表示せず、デザイン981は統計ページにリンクする小さなアイコンだけを表示する。それだけで十分なら、上の「手短に言うと」で説明は完結しており、ここから先を読む必要はない。

特定の場所に見えるカウンターを置く場合は、この先が必要になる。

カウンターの表示位置を制御する

このスクリプトには、以前のガイドが一度も触れていなかった、もう一つのモードがある。data-id属性を使う代わりに、リストを渡すと、スクリプトはIDでプレースホルダー要素を探しに行く。

手順一——カウンターを置きたい場所に、プレースホルダーをページに配置する。これはテンプレート側に書くものであり、Tag Manager側には書かない。なぜなら、この決定からTag Managerを締め出そうとしているからだ。

<div id="s4u_cp0"></div>

手順二——Tag Managerでは、一行版の代わりに次を使う。タグの種類は同じくCustom HTMLだ。

<script>
(function () {
  // No placeholder on this page? Then no counter, and no request either.
  if (!document.getElementById('s4u_cp0')) { return; }

  window.s4uid         = ['YOUR-ID'];
  window.s4u_paramsarr = [{ s4ustyleid: '100' }];

  var s = document.createElement('script');
  s.src = 'https://www.stats4u.net/s4u.js';
  document.head.appendChild(s);
})();
</script>

手順三——トリガーを変更する。ここが、みんなが引っかかる部分だ。All PagesはTag Managerができる限り早いタイミングで発火するため、多くの場合プレースホルダーがドキュメント内にまだ存在しないうちに発火してしまう。代わりに組み込みのDOM Readyトリガーを使う。カウンターはdivより前ではなく、後に到着しなければならない。

これでカウンターは、そのdivの中にだけ表示されるようになる。

どのページに表示するかを制御する

互いに独立した二つのレバーがあり、それぞれ別々に理解しておく価値がある。

その一つがプレースホルダーだ。決め手は関数の最初の行にある。ページ上にs4u_cp0がなければ、そこで処理は止まり、スクリプトはダウンロードすらされない。つまり、divを含むテンプレートにはカウンターが表示され、含まないテンプレートには表示されない——これはテンプレート側で決まることであり、Tag Manager側の変更も公開作業も要らない。

もう一つがトリガーだ。Tag Manager側で決めたいなら、トリガーに条件を与えればよい——Page Pathが希望の条件に一致する場合にのみ、DOM Readyで発火するようにする。ルールがURLに関するものならこちらを使い、ルールがテンプレートに関するものならプレースホルダーを使う。

1ページに複数のカウンターを置く

リストにはいくつでも入れることができる。リスト内の位置が、プレースホルダーIDの番号に対応する。

window.s4uid         = ['ID-ONE', 'ID-TWO'];
window.s4u_paramsarr = [{ s4ustyleid: '981' }, { s4ustyleid: '100' }];

1つ目はs4u_cp0に、2つ目はs4u_cp1に入る。本稿を書く際、両方ともブラウザで確認済みだ。1つ目は20×20のアイコンとして、2つ目は162×25のストリップとして描画され、それぞれ自分のプレースホルダーの中にのみ表示され、ページの他の場所には表示されなかった。

つまずきやすい四つの点

  • 二つの方法の同時使用は不可。タグにdata-id属性があり、なおかつリストも設定されていると、カウンターが二つになり、二つのヒットが別々にカウントされてしまう。
  • リストではs4ustyleidの設定が必須。data-style属性は、指定を省略すると黙ってデザイン30にフォールバックする。リスト版にはそのようなフォールバックがなく、空のデザインを要求することになる。
  • プレースホルダーが欠けていると、静かに失敗する。カウンターも表示されず、エラーもなく、コンソールにも何も出ない。何も表示されない場合、まず疑うのはIDだ——s4u_cp0はゼロであり、アルファベットのOではない。
  • 透明カウンターには意図的にリンクがない。デザイン980はリンクなしで描画される。他人のページ上にある透明な1ピクセルのクリック領域は、機能ではなく罠になってしまうからだ。リンクが必要な場合に使うのは、小さなアイコンであるデザイン981だ。

正しく動作しているか確認する

Tag ManagerのPreviewモードでページを読み込む。DOM Readyイベントで発火したタグの一覧に、そのタグが表示されるはずだ。次に統計ページを確認する——Preview経由の訪問もほかの訪問と同じようにカウントされるため、数秒以内に数字が動くはずだ。

タグは発火しているのに何も表示されない場合、原因はプレースホルダーかトリガーのどちらかであり、その順に疑う可能性が高い。

広告