<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>清水誠メモ</title>
  
  <subtitle>ユーザー視点のWeb設計・分析を実践＆開拓中</subtitle>
  <link href="/atom.xml" rel="self"/>
  
  <link href="https://makoto-shimizu.com/"/>
  <updated>2024-03-18T04:25:51.531Z</updated>
  <id>https://makoto-shimizu.com/</id>
  
  <author>
    <name>Makoto Shimizu</name>
    
  </author>
  
  <generator uri="https://hexo.io/">Hexo</generator>
  
  <entry>
    <title>爆速サイト構築に挑戦４.Netlify CMSでコンテンツ編集</title>
    <link href="https://makoto-shimizu.com/news/fast-cms/04-netlify-cms/"/>
    <id>https://makoto-shimizu.com/news/fast-cms/04-netlify-cms/</id>
    <published>2020-09-01T04:00:00.000Z</published>
    <updated>2024-03-18T04:25:51.531Z</updated>
    
    <content type="html"><![CDATA[<p>最新機能をフル活用して<strong>セキュアで爆速</strong>、<strong>SEOも最高</strong>のサイトを（ほぼ無料で）実現する考え方と方針については<a href="/news/fast-cms/01-launch-gatsby-on-netlify/">GatsbyとNetlifyを使って爆速サイトを２時間で構築</a>をどうぞ。早くCMS画面でコンテンツを修正できるようにしたいので、今回は<strong>Netlify CMSを設定</strong>し、コンテンツの編集に着手します。</p><a id="more"></a><h2 id="Day-4：Netlify-CMSでコンテンツ編集を可能に"><a href="#Day-4：Netlify-CMSでコンテンツ編集を可能に" class="headerlink" title="Day 4：Netlify CMSでコンテンツ編集を可能に"></a>Day 4：Netlify CMSでコンテンツ編集を可能に</h2><h3 id="まず方針を固める"><a href="#まず方針を固める" class="headerlink" title="まず方針を固める"></a>まず方針を固める</h3><p>GatsbyはWebブラウザで動作するフロントエンドのアプリで、<strong>CMSの「ヘッド」部分</strong>にあたります。コンテンツの編集や管理、保管の機能はなく、<a href="https://www.contentful.com/" target="_blank" rel="noopener">Contentful</a>や<a href="https://prismic.io/" target="_blank" rel="noopener">Prismic</a>のようなヘッドレスCMSや、プラグインでヘッドレス化したWordPressからAPI経由でコンテンツを取得する設計になっています。今回のサイトは小規模なので、<strong>GitHubのリポジトリにマークダウン形式でコンテンツを格納</strong>することにしました。</p><p>エンジニアなら、GitHubだけでもマークダウン形式のテキストファイルの編集やレビュー・承認ワークフローを運用できると思いますが、コンテンツのライターや編集者には、<strong>もっと使いやすい編集画面が必要</strong>です。</p><p>そこで、今回はNetlifyの無料オマケ機能「<strong><a href="https://www.netlifycms.org/" target="_blank" rel="noopener">Netlify CMS</a></strong>」を使います。これはGatsbyと同様にReactのアプリで、GitHubのリポジトリ上の.mdファイルを読み書きする編集画面や簡易ワークフロー機能が使えるようになります。</p><h3 id="1-CMS管理画面を使ってみる"><a href="#1-CMS管理画面を使ってみる" class="headerlink" title="1. CMS管理画面を使ってみる"></a>1. CMS管理画面を使ってみる</h3><p>Netlify CMSは今回ベースにした<a href="https://github.com/netlify-templates/gatsby-starter-netlify-cms" target="_blank" rel="noopener">Gatsby + Netlify CMS Starter</a>に最初から含まれているので、<strong>Netlifyの開発サーバーを起動するとNetlify CMSも起動</strong>します。</p><p>以下のように、起動時にコンソールに表示されるメッセージにNetlify CMSのURLが表示されるので、アクセスしてみます。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/netlify-cms-top.png" alt="" sizes="100vw" /><p>CMS画面は至ってシンプル。<strong>コンテンツ</strong>（ページ）と<strong>メディア</strong>（画像）を管理します。コンテンツはさらにブログエントリと固定ページに分けて管理するようStarterのCMSは設定されています（変更可能）。</p><p>Pages＞Landing Pageがトップページ。開いて編集し、Publishすると、変更されたマークダウンのファイルがGitHubにコミットされ、その結果Netlifyがデプロイを開始。本番ページに反映されます。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/netlify-cms-preview.png" alt="" sizes="100vw" /><p>商用CMSほど作り込まれていないので、入力欄の順番が実際の画面と一致しなかったり、レイアウトがズレたりし、完全なプレビューにならない点はガマン。</p><h3 id="2-ワークフロー機能を有効化する"><a href="#2-ワークフロー機能を有効化する" class="headerlink" title="2. ワークフロー機能を有効化する"></a>2. ワークフロー機能を有効化する</h3><p>「<strong>Publish</strong>」をクリックするとすぐにGitHubにファイルがコミットされて本番デプロイが開始するのは困るので、<strong>ワークフロー機能を有効化</strong>します。</p><p>Netlify CMSのファイルは全て/static/admin/ の中に格納されています。この中の「config.yml」を編集し、以下の行を追加します。</p><blockquote><p>publish_mode: editorial_workflow<br>site_url: <a href="https://YOUR-SITE.com" target="_blank" rel="noopener">https://YOUR-SITE.com</a><br>display_url: <a href="https://YOUR-SITE.com" target="_blank" rel="noopener">https://YOUR-SITE.com</a></p></blockquote><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/netlify-cms-config.png" alt="" sizes="100vw" /><p>ついでにサイトのURLを設定すると、ヘッダにサイトへのリンクが追加され、ドラフト保存したページをプレビューできるようになります。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/netlify-cms-workflow.png" alt="" sizes="100vw" /><h3 id="3-変更したパスを反映させる"><a href="#3-変更したパスを反映させる" class="headerlink" title="3. 変更したパスを反映させる"></a>3. 変更したパスを反映させる</h3><p><a href="/news/fast-cms/03-customize-gatsby/">前回</a>にディレクトリ構成を変更したので、それらのページがCMS画面に表示されなくなりました。設定ファイル「config.yml」中のパスを更新して直します（上の図を参照）。</p><p>これでようやく、コンテンツを編集できるようになりました。</p><p>この <a href="https://gatsby-netlify-cms.netlify.app/" target="_blank" rel="noopener">Starterのテンプレ</a> を <a href="https://concept-diagram.com/" target="_blank" rel="noopener">このサイト</a> に近づけようとしています。今のところ <a href="https://netlify.concept-diagram.com/" target="_blank" rel="noopener">こんなサイト</a> になってます。</p><p>次回は、ページの構造やお問い合わせ機能をチューニングします。</p>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;最新機能をフル活用して&lt;strong&gt;セキュアで爆速&lt;/strong&gt;、&lt;strong&gt;SEOも最高&lt;/strong&gt;のサイトを（ほぼ無料で）実現する考え方と方針については&lt;a href=&quot;/news/fast-cms/01-launch-gatsby-on-netlify/&quot;&gt;GatsbyとNetlifyを使って爆速サイトを２時間で構築&lt;/a&gt;をどうぞ。早くCMS画面でコンテンツを修正できるようにしたいので、今回は&lt;strong&gt;Netlify CMSを設定&lt;/strong&gt;し、コンテンツの編集に着手します。&lt;/p&gt;
    
    </summary>
    
    
      <category term="ヘッドレスCMSで爆速サイト構築" scheme="https://makoto-shimizu.com/categories/%E3%83%98%E3%83%83%E3%83%89%E3%83%AC%E3%82%B9CMS%E3%81%A7%E7%88%86%E9%80%9F%E3%82%B5%E3%82%A4%E3%83%88%E6%A7%8B%E7%AF%89/"/>
    
    
      <category term="CMS" scheme="https://makoto-shimizu.com/tags/CMS/"/>
    
  </entry>
  
  <entry>
    <title>爆速サイト構築に挑戦３.Gatsbyをカスタマイズ</title>
    <link href="https://makoto-shimizu.com/news/fast-cms/03-customize-gatsby/"/>
    <id>https://makoto-shimizu.com/news/fast-cms/03-customize-gatsby/</id>
    <published>2020-08-31T01:15:00.000Z</published>
    <updated>2024-03-18T04:25:51.531Z</updated>
    
    <content type="html"><![CDATA[<p>最新の思想・機能・ツールをフル活用して<strong>セキュアで爆速</strong>、<strong>SEOも最高</strong>のサイトを（ほぼ無料で）実現する連載その１では<a href="/news/fast-cms/01-launch-gatsby-on-netlify/">GatsbyとNetlifyを使って爆速サイトを２時間で構築</a>しました。まだデフォルトのダミーサイトのままなので、今回は<strong>Gatsbyを設定</strong>してサイト名や構成を修正します。</p><a id="more"></a><h2 id="Day-3：CMSでサイトの形を整える"><a href="#Day-3：CMSでサイトの形を整える" class="headerlink" title="Day 3：CMSでサイトの形を整える"></a>Day 3：CMSでサイトの形を整える</h2><h3 id="まず方針を固める"><a href="#まず方針を固める" class="headerlink" title="まず方針を固める"></a>まず方針を固める</h3><p>３日目の今回は、最低限の設定を行い、今回使ったテンプレート (<a href="https://github.com/netlify-templates/gatsby-starter-netlify-cms" target="_blank" rel="noopener">Gatsby + Netlify Starter</a>)に含まれているNetlify CMSというコンテンツ編集の画面が使えるようにします。サイト名やメニュー構成、URLの変更までで、デザインやコンテンツは今回は変更しません。</p><p>画像の管理と配信は<strong>Cloudinary</strong>を使います。デバイスやブラウザに応じて最適な解像度で最適なサイズの画像をサーバー側で生成してくれるので、<strong>画像の質を落とさずにサイトの速度を向上</strong>できます。今回のテンプレート（Gatsby + Netlify Starter）はUploadcareにも対応していますが、Uploadcareは有料プランのみの提供に方針を変えたようです。継続的な無償利用はできなくなりました。</p><h3 id="1-PCでGatsbyの開発環境を作る"><a href="#1-PCでGatsbyの開発環境を作る" class="headerlink" title="1. PCでGatsbyの開発環境を作る"></a>1. PCでGatsbyの開発環境を作る</h3><p>GitHubのリポジトリ中でコンテンツ（.mdファイル）の追加や更新を行う（コミットする）と、Netlifyが自動でデプロイを開始し、HTMLやJSが生成され、ホスティングのサーバーに転送される、というのが日々の運用の流れです（今回の構成の場合。GitHubではなくヘッドレスCMSやWordPressと連携させることも可能）。</p><p>一方、<strong>サイトやCMSのカスタマイズ</strong>をするためには、手元のPC（やMac）でもGatsbyサーバを走らせて開発環境を作る必要があります。</p><p>まず、Gatsbyが動作するフレームワークの「Node」と、作業で使うコマンドラインのツールをインストールします。</p><ul><li>Node</li><li><a href="https://www.gatsbyjs.com/docs/" target="_blank" rel="noopener">Gatsby CLI</a></li><li><a href="https://github.com/netlify/cli" target="_blank" rel="noopener">Netlify CLI</a></li></ul><p>次に、<strong>GitHubのリポジトリをローカルにダウンロード</strong>。</p><blockquote><p>git clone <a href="https://github.com/[GITHUB_USERNAME]/[REPO_NAME].git" target="_blank" rel="noopener">https://github.com/[GITHUB_USERNAME]/[REPO_NAME].git</a></p></blockquote><p>続いて、<strong>必要なモジュールのインストール</strong>。</p><blockquote><p>cd [REPO_NAME]<br>yarn</p></blockquote><p>ここまでは、初回のみの作業です。</p><p><strong>開発サーバーを起動</strong>するために（プロジェクトのディレクトリで）以下を実行します。</p><blockquote><p>netlify dev</p></blockquote><p>しばらくしてから</p><blockquote><p>You can now view gatsby-starter-netlify-cms in the browser.<br>  <a href="http://localhost:8000/" target="_blank" rel="noopener">http://localhost:8000/</a></p></blockquote><p>と表示されれば、開発サーバーの起動に成功。そのURLをブラウザで開き、作業を続けます。</p><div class="alert info"><ul><li>通常はGatsbyサーバーを起動しますが、今回はNetlify上でGatsbyサーバーをホスティングしているので、Gatsbyサーバーを内包し、さらにNetlify側の機能も含めたNetlifyの開発サーバーを起動しています。</li><li>ESLintのエラーがたくさん出る場合は、ディレクトリ直下に空の「.eslintrc」ファイルを作成するとESLintのチェック機能を停止できます。</li></ul></div><h3 id="2-サイト名を変更"><a href="#2-サイト名を変更" class="headerlink" title="2. サイト名を変更"></a>2. サイト名を変更</h3><p>Gatsby全体の設定は、ルート直下の「gatsby-config.js」に書かれています。<br>まず、冒頭のサイト名とサイト説明を編集。</p><script src="//gist.github.com/mak00s/d01f13053ec7a37b6de3994684d35589.js"></script><p>全ページのtitleタグとmetaタグにすぐ反映されました。開発サーバーの場合、ファイルを変更しても<strong>再起動やブラウザのリロードは不要</strong>です。</p><p>なお、次回に使うCMS画面では、各ページごとに異なるタイトルとdescriptionを設定できます。このconfigファイルの設定は、個別設定をしなかった場合のデフォルト値になります。</p><h3 id="3-ディレクトリ構成を変える"><a href="#3-ディレクトリ構成を変える" class="headerlink" title="3. ディレクトリ構成を変える"></a>3. ディレクトリ構成を変える</h3><p>デフォルトのサイト構成を以下のように変えたいので、/src/pages/のディレクトリ名とファイル名を変更します。</p><ul><li>/about/　→ そのまま</li><li>/products/　→ /seminar/に名称変更</li><li>/blog/　→ /note/に名称変更<ul><li>記事　→ 後で個別に変更</li></ul></li><li>/contact/　→ そのまま<ul><li>examples　→ 不要なので削除</li><li>file-upload　→ 不要なので削除</li></ul></li></ul><p>/contact/の中の不要な２つのファイルを削除し、/blog/ と /products/ のディレクトリ名を変更しました。変更直後はブラウザがエラー画面になりますが、気にしないで/products/（変更後はseminar）の中のindex.mdを開いて、冒頭の</p><blockquote><p>path: /products</p></blockquote><p>を</p><blockquote><p>path: /seminar</p></blockquote><p>に変更し、開発サーバーを再起動（Control＋Cで停止してもう一度netlify devを実行）します。<br>どのファイルのどこを変更するのかは、Gatsbyサイトの作り方次第です。</p><h3 id="4-メニューとフッタのリンクを直す"><a href="#4-メニューとフッタのリンクを直す" class="headerlink" title="4. メニューとフッタのリンクを直す"></a>4. メニューとフッタのリンクを直す</h3><p>URLが変わったので、各種メニューのリンクが切れてしまいました。リンクはURLのパスを直書きする作りになっているので、以下のファイルを修正します。</p><ul><li>/src/components/<strong>Navbar.js</strong></li><li>/src/components/<strong>Footer.js</strong></li></ul><p>ついでに使わないSNSアイコンも削除。ロゴ画像のAltとサイズが直書きされているので修正。</p><h3 id="5-ロゴとfaviconを変更"><a href="#5-ロゴとfaviconを変更" class="headerlink" title="5. ロゴとfaviconを変更"></a>5. ロゴとfaviconを変更</h3><p>/src/img/logo.svg　にロゴ画像<br>/static/img/　に各種favicon</p><p>のファイルが格納されているので、同じファイル名で画像を上書きすると楽です。</p><h3 id="今日は約４時間"><a href="#今日は約４時間" class="headerlink" title="今日は約４時間"></a>今日は約４時間</h3><p>テンプレのサイトがどう構築されているかを理解するのに時間がかかりました。所要時間は、Node環境の有無や、サイトの構成・デザインをテンプレからどれくらい変更するかによって変わると思います。</p><p><a href="https://netlify.concept-diagram.com/" target="_blank" rel="noopener">構築中のサイトはこちら</a>。次回は<a href="/news/fast-cms/04-netlify-cms/">コンテンツを編集するCMS管理画面を設定</a>し、コンテンツの更新を開始します。</p>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;最新の思想・機能・ツールをフル活用して&lt;strong&gt;セキュアで爆速&lt;/strong&gt;、&lt;strong&gt;SEOも最高&lt;/strong&gt;のサイトを（ほぼ無料で）実現する連載その１では&lt;a href=&quot;/news/fast-cms/01-launch-gatsby-on-netlify/&quot;&gt;GatsbyとNetlifyを使って爆速サイトを２時間で構築&lt;/a&gt;しました。まだデフォルトのダミーサイトのままなので、今回は&lt;strong&gt;Gatsbyを設定&lt;/strong&gt;してサイト名や構成を修正します。&lt;/p&gt;
    
    </summary>
    
    
      <category term="ヘッドレスCMSで爆速サイト構築" scheme="https://makoto-shimizu.com/categories/%E3%83%98%E3%83%83%E3%83%89%E3%83%AC%E3%82%B9CMS%E3%81%A7%E7%88%86%E9%80%9F%E3%82%B5%E3%82%A4%E3%83%88%E6%A7%8B%E7%AF%89/"/>
    
    
      <category term="CMS" scheme="https://makoto-shimizu.com/tags/CMS/"/>
    
  </entry>
  
  <entry>
    <title>爆速サイト構築に挑戦２.サーバーサイドGTMでITP対応</title>
    <link href="https://makoto-shimizu.com/news/fast-cms/02-server-side-gtm/"/>
    <id>https://makoto-shimizu.com/news/fast-cms/02-server-side-gtm/</id>
    <published>2020-08-31T00:25:00.000Z</published>
    <updated>2024-03-18T04:25:51.531Z</updated>
    
    <content type="html"><![CDATA[<p>最新の思想・機能・ツールをフル活用して<strong>セキュアで爆速</strong>、<strong>SEOも最高</strong>のサイトを（ほぼ無料で）実現するのがこの連載の目的です。前回は<a href="/news/fast-cms/01-launch-gatsby-on-netlify/">GatsbyとNetlifyを使って爆速サイトを２時間で構築</a>しました。今回は、新しい<strong>サーバーサイドGTM</strong>を導入してセキュアかつ負荷を下げる形で2種類のGAを導入し、さらにプライバシー保護と<strong>ITP対応のためCookie管理を改善</strong>する方法と結果を紹介します。</p><a id="more"></a><p>サーバーサイドGTMは「<strong>爆速セキュアサイトを構築したい</strong>」という前提がないと意味がないので、未読の方は<a href="/news/fast-cms/01-launch-gatsby-on-netlify/">その1</a>も読んでみてください。</p><h2 id="Day-2：サーバーサイドGTMでITPに対応"><a href="#Day-2：サーバーサイドGTMでITPに対応" class="headerlink" title="Day 2：サーバーサイドGTMでITPに対応"></a>Day 2：サーバーサイドGTMでITPに対応</h2><h3 id="まず方針を固める"><a href="#まず方針を固める" class="headerlink" title="まず方針を固める"></a>まず方針を固める</h3><p>ITPは抜け道を探すのではなく、お客さまの<strong>意思を尊重してパーソナルデータをしっかりセキュアに管理する</strong>のが一番。タグマネージャーはそのために最も重要なパートを担うので、サイトの制作・開発・構築を進める前にデータやタグの活用と管理方法についてしっかり設計しておきたいところ。</p><p>今回の前提は</p><ul><li>Webの行動データを<strong>イベント単位で細かく取得</strong>し、一人ひとりの<strong>行動や心理の変化に合わせてパーソナライズ</strong>することを「<strong>良い顧客体験（CX）</strong>」とする。その実現がビジネス成功のために必須</li><li>ただし、属性や心理データ、購買データを含む分析やターゲティングをする場合、個人情報は当然として<strong>パーソナルデータの保護もかつてないほど重大な課題</strong></li><li>ブラウザの商業主義から人権保護へのシフトはアップルを先導に<strong>業界全体へ広がっていく</strong></li><li>そのため、<strong>タグを貼るだけで管理を丸投げするツール導入方式</strong>は駆逐されていく</li></ul><p>そこで、以下のような方針を立てました。</p><ul><li><strong>行動データは個人情報と同様</strong>に扱い、社外サーバーへの送信を極力減らす</li><li>ブラウザや訪問者を識別する<strong>IDは自社で発行・管理</strong>し、ツール横断で活用する</li><li>各種ツールへの行動・属性データ送信はサーバー間通信を基本とし、<strong>タグを極力減らす</strong></li><li><strong>JavaScriptのタグ管理システムはなるべく使わない</strong></li></ul><h3 id="具体的な作業メモ：サーバーサイドGTM導入"><a href="#具体的な作業メモ：サーバーサイドGTM導入" class="headerlink" title="具体的な作業メモ：サーバーサイドGTM導入"></a>具体的な作業メモ：サーバーサイドGTM導入</h3><p>構築中のサイトにタグマネとGAを導入し、サイトの制作とアナリティクスのカスタマイズをアジャイルに<strong>同時進行</strong>していきます。</p><h4 id="1-GTM用のサーバーを構築する"><a href="#1-GTM用のサーバーを構築する" class="headerlink" title="1. GTM用のサーバーを構築する"></a>1. GTM用のサーバーを構築する</h4><ul><li>GTMで<strong>サーバー用のコンテナを新規作成</strong><ul><li>東京のサーバーを使いたいので<strong>プロビジョニングは「手動」</strong></li></ul></li><li>クラウド (GCP)で<strong>GTMサーバーを立ち上げる</strong><ul><li>Google App Engine (GAE)を起動</li><li>そのマシンにGTMサーバーソフトウェア（GAEのApp）をインストール</li><li>さらに対象サイトの<strong>サブドメイン</strong>を割り当てる</li></ul></li><li><strong>サーバー用GTMコンテナの設定を変更</strong><ul><li>「タグ設定サーバー」欄にサブドメインを設定</li></ul></li></ul><p>今回は<strong>ITP対策したいので、サブドメインの割り当ては必須</strong>です。</p><h4 id="2-ウェブ用GTMに新しいGA4のタグを追加"><a href="#2-ウェブ用GTMに新しいGA4のタグを追加" class="headerlink" title="2. ウェブ用GTMに新しいGA4のタグを追加"></a>2. ウェブ用GTMに新しいGA4のタグを追加</h4><p>ブラウザの負荷をなるべく減らしたいので、GA（Universal Analytics）ではなく<strong>新しいGA4（App + Web）のみをGTMではなくgtag.jsで導入</strong>します。</p><div class="alert info"><p>サーバーサイドGTMでブラウザの負荷を減らし、送信データを極力減らしたい場合、従来のGA (Universal Analytics)ではなく、新しいGoogle Analytics 4 (旧Web + App)のみをクリーンに導入するのが実はベストです。GA4はイベント中心の考え方なので、デフォルト導入だけでもスクロールや離脱クリック、ダウンロード、動画再生などのイベントを計測でき、サーバーサイドGTMの思想にマッチします。GAのJavaScriptライブラリも新しいGA4の方が開発の力が入っていて、より改善や進化を期待できます。</p></div><p>普通にGA4のタグを入れて動作検証を終えたら、GAデータの送信先をGoogleのサーバーではなく、1で構築したサブドメイン上のGTMサーバーに変更するため、「<strong>トランスポートURL</strong>」を指定します。</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- Global site tag (gtag.js) - Google Analytics --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">async</span> <span class="attr">src</span>=<span class="string">"https://www.googletagmanager.com/gtag/js?id=G-EXAMPLE"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="built_in">window</span>.dataLayer = <span class="built_in">window</span>.dataLayer || [];</span></span><br><span class="line"><span class="javascript">  <span class="function"><span class="keyword">function</span> <span class="title">gtag</span>(<span class="params"></span>)</span>&#123;dataLayer.push(<span class="built_in">arguments</span>);&#125;</span></span><br><span class="line"><span class="javascript">  gtag(<span class="string">'js'</span>, <span class="keyword">new</span> <span class="built_in">Date</span>());</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">  gtag(<span class="string">'config'</span>, <span class="string">'G-EXAMPLE'</span>, &#123;</span></span><br><span class="line"><span class="actionscript">    transport_url: <span class="string">'https://analytics.example.com'</span>,</span></span><br><span class="line">  &#125;);</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p>参考：ウェブ用のGTMでGA4を導入する場合は、以下のようにフィールドを追加します。<br><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gtm-ga-tag-for-server-side.png" alt="" sizes="100vw" /><br>これで、GAのデータの送付先がGAのサーバーではなく今回立ち上げたGTMサーバーに変わります。</p><h4 id="3-サーバー用GTMコンテナでクライアントを設定"><a href="#3-サーバー用GTMコンテナでクライアントを設定" class="headerlink" title="3. サーバー用GTMコンテナでクライアントを設定"></a>3. サーバー用GTMコンテナでクライアントを設定</h4><p>サーバー用GTMの「<strong>クライアント</strong>」は<strong>GAのビーコン（計測用データ）を受け取るレシーバー</strong>です。サーバーサイドGTMの設定に基づいてデータを処理し、GAなどのサーバーへデータを送信します。</p><p>サーバーサイドGTMのコンテナではデフォルトで２種類の「クライアント」が作成されますが、設計思想的に、この<strong>両方のクライアントを同時に使うことはあまり無いはず</strong>。せっかくサーバーサイドのGTMを導入するので、ブラウザから飛ばすビーコンはGA4に一本化し、GAのデータはGTMサーバーから送信するのが良いので、「Universal Analytics」のクライアントは削除しました。</p><p><strong>サーバーサイドでデータの加工を行う場合、クライアントのテンプレートを自作する</strong>ことになりますが、今回はデフォルトの「GA4」をそのまま使います。よりセキュアにするため、１箇所だけ設定を変更します。</p><p><strong>詳細設定＞SameSite</strong></p><p>詳細設定では、「_ga」Cookieとは別の、訪問者（ブラウザ）を識別するIDを格納するために<strong>GTMサーバーから送信される「FPID」Cookieの設定</strong>ができます。SameSiteは「<strong>Lax</strong>」に変更しました。現時点ではITPとは関係ないですが、なるべくセキュアにしておきたいので。</p><h4 id="4-サーバー用GTMコンテナでトリガーを作成"><a href="#4-サーバー用GTMコンテナでトリガーを作成" class="headerlink" title="4. サーバー用GTMコンテナでトリガーを作成"></a>4. サーバー用GTMコンテナでトリガーを作成</h4><p><strong>サーバーサイドGTMのタグの発火条件とするトリガー</strong>を、サーバーサイドGTMのコンテナ内で作ります。トリガーの種類は「<strong>カスタム</strong>」です。GTMコンテナにデフォルトで作られているクライアントがデータを受信した時に反応します。</p><p>今後対象サイトやビーコンの種類が増えた場合、トリガーが全てのデータに反応してしまうとゴミデータが増えるので、ビーコンの種類と計測IDで制限をかけます。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gtm-server-trigger.png" alt="" sizes="100vw" /><p>「<strong>Client Name</strong>」は組み込み変数で、有効化が必要です。受信データに反応したGTMクライアントの名前がセットされます。<br>「<strong>Query String</strong>」も組み込み変数です。ビーコンのURL中の「?」以降の文字列（パラメータの組み合わせ）が格納されます。</p><h4 id="5-サーバー用GTMコンテナでタグを作成"><a href="#5-サーバー用GTMコンテナでタグを作成" class="headerlink" title="5. サーバー用GTMコンテナでタグを作成"></a>5. サーバー用GTMコンテナでタグを作成</h4><p>最後に、4で作成したトリガーを条件としたGAタグを作ります。</p><p>今回は爆速セキュアなサイトを作るのが趣旨なので、サイトにはGA4のみをgtag.jsでミニマム実装し、<strong>GTMサーバー側で受信するデータを分解・複製してサーバー間通信でGA v1とGA4の計測を行います</strong>。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gtm-server-gtag-flow.png" alt="" sizes="100vw" /><p><strong>GA4</strong>のタグは、受信したデータをそのまま送信する場合は、設定は不要です。サーバー側でデータの分解や加工、マッピングなどの処理をしたいので、後日必要に応じてカスタマイズの設定を行います。</p><p><strong>GA</strong> (Universal Analytics)のタグでは「UA-xxxxxxxxx-x」という<strong>GAのプロパティIDを上書き指定</strong>します。GTMサーバーが受信するのはGA4用ビーコンなので、GAのプロパティIDは含まれていません。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gtm-server-tag-2ga.png" alt="" sizes="100vw" /><p>これで最低限の設定は終わり。<strong>検証して公開</strong>します。</p><h4 id="6-サーバーサイドGTMでGAをカスタマイズ"><a href="#6-サーバーサイドGTMでGAをカスタマイズ" class="headerlink" title="6. サーバーサイドGTMでGAをカスタマイズ"></a>6. サーバーサイドGTMでGAをカスタマイズ</h4><p>今回は爆速セキュアなサイトを作るのが趣旨なので、カスタムディメンションへ値をセットするなどの<strong>カスタマイズは極力サーバーサイドで</strong>行います。</p><p>無料のGA（Universal Analytics）はBigQueryで生データを抽出できないので、カスタムディメンションに追加のデータをセットしておくと何かと便利。今回はGTMサーバー側でそのカスタマイズを行ってみます。</p><p>カスタムディメンションに入れるデータ</p><ul><li><strong>クライアントID</strong> (client_id)</li><li><strong>セッションID</strong> (ga_session_id)</li></ul><p>この2つのデータはgtag.jsからのストリームを受け取ったGTMサーバー上のクライアントが分解して「イベントデータ」として利用可能になっているので、それを取り出して格納するGTM変数を２つ作成します。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gtm-server-variable.png" alt="" sizes="100vw" /><p>この２つをカスタムディメンションにセットするため、<strong>GAのタグにフィールドを追加</strong>します。サーバーサイドコンテナのGAタグには、カスタムディメンション用の入力欄がないので、ビーコンのパラメータと同じ「cd＋数字」と言う書式でフィールドを追加します。</p><p>GA側でもカスタムディメンションを定義し、サーバーサイドGTMのコンテナを検証・公開して終わり。GAで２種類のカスタムデータを計測開始しました。</p><h3 id="よりセキュアになったCookie"><a href="#よりセキュアになったCookie" class="headerlink" title="よりセキュアになったCookie"></a>よりセキュアになったCookie</h3><p><strong>Safari</strong> 13.1.2でサイトにアクセスすると、従来の「<strong>_ga</strong>」に加えて「<strong>FPID</strong>」Cookieが発行されました。</p><p><strong>_ga</strong>：ITPにより期限が２年から<strong>１週間に短縮</strong>された<br><strong>FPID</strong>：期限は<strong>２年間</strong>、Secure、HttpOnly、Lax</p><p><strong>どちらかを削除しても、リロードすると同じ値で復活</strong>します。FPIDの値に_gaの一部が含まれているので、お互いリンクしているようです。</p><p>ブラウザからのビーコンでは今まで通りcidパラメータに_gaの値がセットされますが、<strong>GTMサーバーはFPIDを優先</strong>し、それをGAサーバーに送信してくれます。</p><h3 id="実際に使ってみて分かったこと"><a href="#実際に使ってみて分かったこと" class="headerlink" title="実際に使ってみて分かったこと"></a>実際に使ってみて分かったこと</h3><p>爆速セキュアなサイト構築という目的意識を持って実際にサーバーサイドGTMを導入した結果、いろいろわかりました。</p><ul><li>サーバーサイドGTMは手動でプロビジョニングしないとGCPのリージョンを東京にできない</li><li>ITP対策としてサブドメインは必須</li><li>デフォルトでもHttpOnlyでSecureな「FPID」Cookieがセットされるので、他のツールでもIDとして使える<ul><li>従来の「_ga」と新「FPID」Cookieのどちらかが残っていれば同じ値が引き継がれる</li><li>SameSite=Laxの指定もできる</li></ul></li><li>サイトに直接導入するのはGA v1 (Universal Analytics)ではなくGA4が良い<ul><li>直接導入するGAは、あまりカスタマイズしなくなるので、GTMも不要、gtag.jsが良い</li><li>サーバーサイドGTMでGA4のビーコンを分割してGA v1のビーコンを生成できる</li><li>サーバーサイドGTMでGAのカスタムディメンションもセットできる</li></ul></li><li>サーバーサイドGTMのトリガーにはクライアント名や計測の条件を追加すると良い<ul><li>複数サイトのサブドメインを一つのサーバーサイドGTMに割り当てても動作する</li></ul></li></ul><p>最初から正解がわかっていれば、２時間で終わる作業です。</p><p>リアルに<a href="https://netlify.concept-diagram.com/" target="_blank" rel="noopener">構築中のサイトはこちら</a>。記事が進行しながらサイトも変わっていきます。</p><p>次回は<a href="/news/fast-cms/03-customize-gatsby/">Gatsbyをカスタマイズし、サイト名やURL構成、ナビゲーションリンクを更新</a>します。その後はコンテンツ投入、デザイン変更と進めていきます。</p>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;最新の思想・機能・ツールをフル活用して&lt;strong&gt;セキュアで爆速&lt;/strong&gt;、&lt;strong&gt;SEOも最高&lt;/strong&gt;のサイトを（ほぼ無料で）実現するのがこの連載の目的です。前回は&lt;a href=&quot;/news/fast-cms/01-launch-gatsby-on-netlify/&quot;&gt;GatsbyとNetlifyを使って爆速サイトを２時間で構築&lt;/a&gt;しました。今回は、新しい&lt;strong&gt;サーバーサイドGTM&lt;/strong&gt;を導入してセキュアかつ負荷を下げる形で2種類のGAを導入し、さらにプライバシー保護と&lt;strong&gt;ITP対応のためCookie管理を改善&lt;/strong&gt;する方法と結果を紹介します。&lt;/p&gt;
    
    </summary>
    
    
      <category term="ヘッドレスCMSで爆速サイト構築" scheme="https://makoto-shimizu.com/categories/%E3%83%98%E3%83%83%E3%83%89%E3%83%AC%E3%82%B9CMS%E3%81%A7%E7%88%86%E9%80%9F%E3%82%B5%E3%82%A4%E3%83%88%E6%A7%8B%E7%AF%89/"/>
    
    
      <category term="Google Analytics" scheme="https://makoto-shimizu.com/tags/Google-Analytics/"/>
    
      <category term="GTM" scheme="https://makoto-shimizu.com/tags/GTM/"/>
    
  </entry>
  
  <entry>
    <title>爆速サイト構築に挑戦１.ヘッドレスCMSを導入</title>
    <link href="https://makoto-shimizu.com/news/fast-cms/01-launch-gatsby-on-netlify/"/>
    <id>https://makoto-shimizu.com/news/fast-cms/01-launch-gatsby-on-netlify/</id>
    <published>2020-08-28T06:30:00.000Z</published>
    <updated>2024-03-18T04:25:51.531Z</updated>
    
    <content type="html"><![CDATA[<p><strong>CX</strong>や<strong>DX</strong>（デジタルトランスフォーメーション）が流行ってきましたが、ツールの<strong>タグを入れすぎてサイトが重い</strong>、iTPなど<strong>セキュリティ・プライバシー対策が弱い</strong>ので精度が落ちた、なんて状況は避けたいですよね。<br>「分かりやすいデザイン」「使いやすいUI」は誰でも追求できますが、楽してWordPressを使っているようではパフォーマンスのチューニングに限界があります。<strong>ここ数年、数週間でWebの技術は驚くほど格段に進化</strong>しました。</p><p>そこで、将来のWebの進化を見据えて最先端のツールやアプローチを使って、でも（ほぼ）<strong>無料でセキュアで爆速なサイトを最短で構築することに挑戦</strong>します。</p><a id="more"></a><h2 id="ヘッドレスとサーバーサイドでいこう"><a href="#ヘッドレスとサーバーサイドでいこう" class="headerlink" title="ヘッドレスとサーバーサイドでいこう"></a>ヘッドレスとサーバーサイドでいこう</h2><p>CMSとタグ管理の発想を根本的に変えることで、爆速セキュアなサイトを実現することにします。</p><h4 id="1-CMSはヘッドレスとSPA"><a href="#1-CMSはヘッドレスとSPA" class="headerlink" title="1.CMSはヘッドレスとSPA"></a>1.CMSはヘッドレスとSPA</h4><p>まず、CMSはヘッドレスとSPAを組み合わせます。ヘッドレスCMSは2017年あたりから進化が加速し、WordPressのような<strong>動的CMSは言うまでもなく、静的サイトよりもさらに速くて快適なウェブサイトを実現できる</strong>フロントエンド技術「SPA」の流れと合流。ツールや情報も増えたので、だいぶ実用的になりました。</p><h4 id="2-タグ管理はサーバーサイド"><a href="#2-タグ管理はサーバーサイド" class="headerlink" title="2.タグ管理はサーバーサイド"></a>2.タグ管理はサーバーサイド</h4><p>タグマネジメントは、GDPRの施行やiTPの進化で迷走、イタチごっこが続きましたが、<strong>Google Tag Manager（GTM）のサーバーサイド化</strong>という新機能がベータ公開され、サーバーから生成するセキュアなCookieの実現が簡単になりました。</p><h4 id="3-アナリティクスはイベントベースで一本化"><a href="#3-アナリティクスはイベントベースで一本化" class="headerlink" title="3.アナリティクスはイベントベースで一本化"></a>3.アナリティクスはイベントベースで一本化</h4><p>アナリティクスは、<strong>クリックやスクロールのようなイベント</strong>を計測サーバーに送信し、ヒット単位の生データを別のBI（DataポータルやTableau、PowerBI）で<strong>集計・可視化</strong>するのが最近のトレンド。訪問者一人ひとりの行動や心理の変化を追う<strong>カスタマーアナリティクス</strong>的なアプローチも増えてきました。</p><p>Adobe Analyticsは、軽量・汎用化した計測用JavaScriptライブラリの新バージョンをリリース。生データの取り出しは少し不便です。</p><p>GoogleもFirebaseをベースとした<strong>Google Analyticsの新しいバージョン（Web + App）</strong>をイベント型に切り替えて生ログ保存にも対応し、開発に力を入れています。ログインして利用するレポート画面はおまけのプレビュー機能でしかなく、今後はあまり進化しないでしょう。その代わりにプラットフォームとしての進化が半端ないです。広告連携しないなら360も不要?!</p><h2 id="実際に既存サイトを再構築してみる"><a href="#実際に既存サイトを再構築してみる" class="headerlink" title="実際に既存サイトを再構築してみる"></a>実際に既存サイトを再構築してみる</h2><p>理屈だけの机上の空論にならないよう、実在するWordPressのサイトを再構築することで</p><ul><li>実現はどれくらい難しい？</li><li>工数（作業時間）はどれくらいかかる？</li><li>どこまで速くなる？</li><li>意外なデメリットは？</li><li>運用は犠牲にならない?</li></ul><p>という懸念を具体的にクリアしていきます。</p><div class="alert info"><p>本サイトは2018年にWordPressからヘッドレスCMSのhexoに移行し、CDNベースのホスティング「Netlify」と画像管理のGAM「Cloudinary」を採用したので割と高速ですが、SPAではない単なる静的HTMLなので、今回の最新アプローチとツールを組み合わせると、もっと速くなるはず。</p><p>今回はWordPressと比較したいので、「<a href="https://concept-diagram.com/" target="_blank" rel="noopener">コンセプトダイアグラム公式サイト</a>」を移行対象にします。そのサイトはチューニングしてないので重いです。WooCommerceのショッピングカートもあるので、さらにShopifyでヘッドレスコマースに挑戦するかも？</p></div><h2 id="Day-1：GatsbyとNetlifyでテンプレサイトを立ち上げる"><a href="#Day-1：GatsbyとNetlifyでテンプレサイトを立ち上げる" class="headerlink" title="Day 1：GatsbyとNetlifyでテンプレサイトを立ち上げる"></a>Day 1：GatsbyとNetlifyでテンプレサイトを立ち上げる</h2><h3 id="まず方針を固める"><a href="#まず方針を固める" class="headerlink" title="まず方針を固める"></a>まず方針を固める</h3><p>デザインは後で変更すれば良いので、まず先に<strong>テンプレートを使って開発用サイトを立ち上げる</strong>ことにします。従来の「WordPressをインストールして適当なテーマを適用する」作業に近いイメージです。</p><p><strong>CMSのヘッド側</strong>は、<a href="https://www.gatsbyjs.org/" target="_blank" rel="noopener">GatsbyJS</a>を採用。最近はGatsbyかNuxtの二択でしょう。機能に大差はないので、お好みで。私はReactの方に将来性を感じました。</p><p><strong>ホスティング</strong>は、レガシーなレンタルサーバーをやめて最先端でホットな<a href="https://www.netlify.com/" target="_blank" rel="noopener">Netlify</a>に移行。使っていくうちに進化していくので、Webの将来が垣間見えて「その手があった！」と感動することもしばしば。運用管理も劇的に楽です。</p><p><strong>コンテンツの格納</strong>という意味でのCMSは、GitHubを選びました。チームでの同時作業やバージョン管理ができます。</p><p><strong>コンテンツ編集</strong>はNetlify CMSを使い、<strong>マークダウン形式</strong>で記述することで<strong>構造化されたクリーンなHTMLを実現</strong>します。無制限で自由すぎるHTML形式はパフォーマンス低下の原因になるので禁止。</p><p><strong>画像管理</strong>は、リサイズや最適化、Retina対応ができるデジタルアセット管理（DAM）を導入します。DAMは高価なソリューションが多い状況が10年以上続きましたが、今風のモダンで安価なサービスがここ数年で増えてきました。今回は、長年のノウハウに基づく豊富で実用的な機能を持ち、小規模なら無料で使える<a href="https://cloudinary.com/" target="_blank" rel="noopener">Cloudinary</a>を採用します（<a href="/news/site-renewal-2018/">本サイトで利用中</a>）</p><h3 id="具体的な作業メモ：まずヘッドレスCMSで雛形サイトを構築"><a href="#具体的な作業メモ：まずヘッドレスCMSで雛形サイトを構築" class="headerlink" title="具体的な作業メモ：まずヘッドレスCMSで雛形サイトを構築"></a>具体的な作業メモ：まずヘッドレスCMSで雛形サイトを構築</h3><p>早速作業スタートです。</p><p>Netlify+Gatsby+Cloudinaryの組み合わせの場合、<a href="https://github.com/netlify-templates/gatsby-starter-netlify-cms" target="_blank" rel="noopener">Netlifyが提供するテンプレ</a>を使うと、１クリックでインストールできます。</p><p>「<strong>Deploy to netlify</strong>」ボタンをクリックし、GitHubのリポジトリ名を変更して「<strong>Save and deploy</strong>」ボタンをクリック。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/netlify-gatsby-deploy-1.png" alt="" sizes="100vw" /><p>リポジトリ作成とNetlify接続設定、デプロイまでが一気に完了し、仮ドメインでサイトが立ち上がります。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/netlify-gatsby-deploy-2.png" alt="" sizes="100vw" /><div class="alert info"><p><a href="https://gatsby-netlify-cms.netlify.app/" target="_blank" rel="noopener">デフォルト状態の架空サイト</a>を開いて、いろいろクリックしてみてください。<br>SPAなので、最初のページを開いた時点で他のページのコンテンツも読み込んだり、リロードせずにコンテンツを書き換えたりでき、劇的に速いです。ページごとにURLがちゃんと切り替わります。SEOもスマホ最適化も完璧。</p></div><h4 id="CMSに自分を追加"><a href="#CMSに自分を追加" class="headerlink" title="CMSに自分を追加"></a>CMSに自分を追加</h4><p>いくつかのメールがNetlifyで登録したメールアドレスに届きますが、そのうち「<strong>You’ve been invited to join xxx.netlify.app</strong>」という件名のメールだけ、対応が必要です。</p><p>と言っても本文中の「<strong>Accept the invite</strong>」をクリックし、Netlifyのアカウントでログインするだけ。CMS用のパスワードを指定すると登録が完了し、CMS管理画面が開きます。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/netlify-gatsby-cms-1.png" alt="" sizes="100vw" /><p>テンプレを使ったので、ダミーの珈琲屋サイトのコンテンツがいくつか投稿済みになっています。</p><h4 id="Netlifyでサイト名とドメインを変更"><a href="#Netlifyでサイト名とドメインを変更" class="headerlink" title="Netlifyでサイト名とドメインを変更"></a>Netlifyでサイト名とドメインを変更</h4><p>次に、Netlify管理画面のSettingsで設定を変更します。デザインやコンテンツはその後で。</p><p><strong>General＞Site detailsでサイト名を変更</strong><br>これはサイトに表示されない<strong>管理上のサイト名</strong>なので、半角英数字で指定します。変更すると仮ドメインも合わせて変更されます。今回は「concept-diagram」にしました。</p><p><strong>Domain managementでカスタムドメインを指定</strong><br>本番サイトはそのままで作業を進めてから切り替えたいので、仮のドメイン「netlify.concept-diagram.com」を指定しました。いずれ必要になるので、ついでに<strong>IPv6</strong>も有効化。<br>NetlifyのDNSサーバーを使う場合は、Let’s Encryptの<strong>無料SSL証明書も自動でインストール</strong>されます。</p><p><strong>Build &amp; Deploy＞Snippet injectionでGA v2のタグを挿入</strong></p><p>サイトをなるべく軽くしたいのと、タグマネはサーバーサイドGTMのみで頑張りたいので、GA v2はgtag.jsを直書きで導入します。</p><p>Netlifyの場合<strong>デプロイ（本番リリース）時に全ページへ自動でタグを入れてくれる</strong>ので、HTMLにタグを入れる必要はありません。<br>場所はbodyではなくheadを選び、gtag.jsのタグを入れます。</p><h3 id="ここまでで約２時間"><a href="#ここまでで約２時間" class="headerlink" title="ここまでで約２時間"></a>ここまでで約２時間</h3><p>慣れると１時間で終わります。<br>NetlifyやGitHubが初めてで、ドメインも新規に取得する場合は、半日くらいでしょうか。</p><p>次回は<a href="/news/fast-cms/02-server-side-gtm/">サーバーサイドのGTMとGoogle Analyticsを最新方式でスマートに導入</a>します。</p>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;&lt;strong&gt;CX&lt;/strong&gt;や&lt;strong&gt;DX&lt;/strong&gt;（デジタルトランスフォーメーション）が流行ってきましたが、ツールの&lt;strong&gt;タグを入れすぎてサイトが重い&lt;/strong&gt;、iTPなど&lt;strong&gt;セキュリティ・プライバシー対策が弱い&lt;/strong&gt;ので精度が落ちた、なんて状況は避けたいですよね。&lt;br&gt;「分かりやすいデザイン」「使いやすいUI」は誰でも追求できますが、楽してWordPressを使っているようではパフォーマンスのチューニングに限界があります。&lt;strong&gt;ここ数年、数週間でWebの技術は驚くほど格段に進化&lt;/strong&gt;しました。&lt;/p&gt;
&lt;p&gt;そこで、将来のWebの進化を見据えて最先端のツールやアプローチを使って、でも（ほぼ）&lt;strong&gt;無料でセキュアで爆速なサイトを最短で構築することに挑戦&lt;/strong&gt;します。&lt;/p&gt;
    
    </summary>
    
    
      <category term="ヘッドレスCMSで爆速サイト構築" scheme="https://makoto-shimizu.com/categories/%E3%83%98%E3%83%83%E3%83%89%E3%83%AC%E3%82%B9CMS%E3%81%A7%E7%88%86%E9%80%9F%E3%82%B5%E3%82%A4%E3%83%88%E6%A7%8B%E7%AF%89/"/>
    
    
      <category term="SEO" scheme="https://makoto-shimizu.com/tags/SEO/"/>
    
      <category term="CMS" scheme="https://makoto-shimizu.com/tags/CMS/"/>
    
      <category term="GTM" scheme="https://makoto-shimizu.com/tags/GTM/"/>
    
  </entry>
  
  <entry>
    <title>Demo 06. 長いLPのパーツごとに精読をカウント</title>
    <link href="https://makoto-shimizu.com/news/demo/area-visibility/"/>
    <id>https://makoto-shimizu.com/news/demo/area-visibility/</id>
    <published>2020-05-19T03:30:00.000Z</published>
    <updated>2024-03-18T04:25:51.527Z</updated>
    
    <content type="html"><![CDATA[<p>LPのような長いページの場合、表示回数（PV）よりも「どこまでスクロールしてじっくりコンテンツを読み込んだか」が重要です。GTMを使うと、画面の何パーセントまでスクロールされたか、を簡単に計測できますが、ページによってパーセントの解釈が異なり、分析が難しいので、ページをセクション（パーツ）に分割し、その単位で画面にN秒間以上表示された、という計測方法がオススメです。</p><p>ただし、ページの作り方に合わせてGTMの設定を追加したり削除するのは運用が大変なので、ページ制作時に決められた属性を追加するだけで、GTMの設定を変更することなく計測すると良いでしょう。</p><p>このページ自体に実装してあるので、ゆっくりスクロールしながら以下のセクション2以降をブラウザの画面に表示させた状態で2秒などの指定時間が過ぎると、GAでイベントが計測され、画面右上に通知が表示されます。</p><a id="more"></a><h2 id="DEMO"><a href="#DEMO" class="headerlink" title="DEMO"></a>DEMO</h2><div class="alert info"><h3 id="セクション1（設定なし）"><a href="#セクション1（設定なし）" class="headerlink" title="セクション1（設定なし）"></a>セクション1（設定なし）</h3><div id="sec1">GTMでコンテンツ要素の表示を計測するためには、idやclassなどのタグの属性を判定条件として指定するのが安直な設定方法ですが、<ul><li>セクションが増えたり、名前が変わった場合にGTMの設定も合わせて更新する必要がある</li><li>idやclass属性は、別の目的で使っていて自由に設定できないこともある</li></ul><p>という問題があります。</p><p>そこで、対象セクションを囲むdivタグに以下のような計測目的に特化した属性を付与し、GTMがその値を読み取って自動的に計測するようにすれば、GTMの運用が不要になります。</p><p>まず、セクション名など、アナリティクスのレポート上で表示される文字列を指定します。</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">data-track-name="Section 2"</span><br></pre></td></tr></table></figure>次に、計測の条件を指定します。<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">data-track-trigger="view"</span><br><span class="line">data-track-duration="2000"</span><br></pre></td></tr></table></figure>「view」は「表示」の意味。durationは表示期間で、ミリセカンドで指定します。2000ミリセカンド＝２秒間、です。<p>応用例として、「click」や「hover」なども条件として考えられますね。</p><p>実際に以下の「セクション2」に設定してあるので、セクション2の高さのうち20%以上を2秒間表示させると、Google Analyticsのイベント計測が発火します。</p></div></div><div class="alert success"><h3 id="セクション2（20-を2秒間）"><a href="#セクション2（20-を2秒間）" class="headerlink" title="セクション2（20%を2秒間）"></a>セクション2（20%を2秒間）</h3><div data-track-name="Section 2" data-track-trigger="view" data-track-duration="2000">このセクションのdivタグに設定された<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">data-track-name="Section 2"</span><br><span class="line">data-track-trigger="view"</span><br><span class="line">data-track-duration="2000"</span><br></pre></td></tr></table></figure><p>という3種類の値を読み取ってGoogle Analyticsで計測するために、Google Tag Manager（GTM）の設定を行います。</p><h4 id="（１）GTMの変数を作る"><a href="#（１）GTMの変数を作る" class="headerlink" title="（１）GTMの変数を作る"></a>（１）GTMの変数を作る</h4><p>まず、HTMLタグの属性として設定された各種設定内容を取得するために、「データレイヤーの変数」の変数を２つ作成します。</p><ol><li><p>エリアの名前<br>変数名には以下を入力します。</p><blockquote><p>gtm.element.dataset.trackName</p></blockquote></li><li><p>表示時間（ミリセカンド）<br>変数名には以下を入力します。</p><blockquote><p>gtm.element.dataset.trackDuration</p></blockquote></li></ol><p>変数名の中の「gtm.element」はGTM標準のデータレイヤー変数で、計測対象の要素（タグ）が格納されます。属性の名前「data-track-name」のうち、「data-」の部分は自動で削除され、ハイフン「-」も削除され、続く単語の頭が大文字に変換されるので、「dataset.trackName」という少し異なる表記になります。</p><p>参考：<a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Howto/Use_data_attributes" target="_blank" rel="noopener">データ属性の使用</a> - MDN Web Docs</p></div></div><div class="alert success"><h3 id="セクション3（20-を1秒間）"><a href="#セクション3（20-を1秒間）" class="headerlink" title="セクション3（20%を1秒間）"></a>セクション3（20%を1秒間）</h3><div data-track-name="Section 3" data-track-trigger="view" data-track-duration="1000">（このセクションは表示条件を1秒間に設定してあります）<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">data-track-name="Section 3"</span><br><span class="line">data-track-trigger="view"</span><br><span class="line">data-track-duration="1000"</span><br></pre></td></tr></table></figure><h4 id="（２）GTMのトリガーを作る"><a href="#（２）GTMのトリガーを作る" class="headerlink" title="（２）GTMのトリガーを作る"></a>（２）GTMのトリガーを作る</h4><p>次に、「要素の表示」タイプのトリガーを作ります。<br>選択方法は「CSSセレクタ」、要素セレクタには以下のように入力します。</p><blockquote><p>[data-track-trigger=”view”]</p></blockquote><p>「トリガーを起動するタイミング」は「1要素につき1度」に変更します。一つのページにセクションが複数ある場合、それぞれのセクション単位で一回ずつ計測するためです。</p><p>「画面上での最小表示時間を設定」には、先ほど作成したGTM変数を指定します。</p></div></div><div class="alert success"><h3 id="セクション4（20-を4秒間）"><a href="#セクション4（20-を4秒間）" class="headerlink" title="セクション4（20%を4秒間）"></a>セクション4（20%を4秒間）</h3><div data-track-name="Section 4" data-track-trigger="view" data-track-duration="4000">（このセクションは表示条件を4秒間に設定してあります）<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">data-track-name="Section 4"</span><br><span class="line">data-track-trigger="view"</span><br><span class="line">data-track-duration="4000"</span><br></pre></td></tr></table></figure><h4 id="（３）GTMのタグを作る"><a href="#（３）GTMのタグを作る" class="headerlink" title="（３）GTMのタグを作る"></a>（３）GTMのタグを作る</h4><p>最後に、作成したトリガーを使ってGAのタグを作成します。</p><p>Event Categoryは「精読」など、お好みで。</p><p>Event Actionには「要素表示」などのアクションを。</p><p>Event Labelには、先ほど作成したtrackNameの変数を指定します。</p></div></div><p>GTMの設定は以上でおしまい。今後は、どのページでも、divなどのタグに属性を追加するだけで、要素の表示をGoogle Analyticsで計測できるようになりました。もうGTMを毎回編集する必要はありません。運用が劇的に楽になりました。楽というより、運用フリー、不要になりました！</p><div class="alert warning"><p>今回は説明のために実装をシンプルにしましたが、「20%」という表示条件も変数にしたり、＋３点、＋５点、といったスコアリングの加点を指定したり、GAのカスタム指標の番号を指定するなど、いろいろな応用が可能です。クリックやオンマウスの計測も同じ方式で実現できます。</p></div>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;LPのような長いページの場合、表示回数（PV）よりも「どこまでスクロールしてじっくりコンテンツを読み込んだか」が重要です。GTMを使うと、画面の何パーセントまでスクロールされたか、を簡単に計測できますが、ページによってパーセントの解釈が異なり、分析が難しいので、ページをセクション（パーツ）に分割し、その単位で画面にN秒間以上表示された、という計測方法がオススメです。&lt;/p&gt;
&lt;p&gt;ただし、ページの作り方に合わせてGTMの設定を追加したり削除するのは運用が大変なので、ページ制作時に決められた属性を追加するだけで、GTMの設定を変更することなく計測すると良いでしょう。&lt;/p&gt;
&lt;p&gt;このページ自体に実装してあるので、ゆっくりスクロールしながら以下のセクション2以降をブラウザの画面に表示させた状態で2秒などの指定時間が過ぎると、GAでイベントが計測され、画面右上に通知が表示されます。&lt;/p&gt;
    
    </summary>
    
    
    
      <category term="Google Analytics" scheme="https://makoto-shimizu.com/tags/Google-Analytics/"/>
    
      <category term="Demo" scheme="https://makoto-shimizu.com/tags/Demo/"/>
    
  </entry>
  
  <entry>
    <title>Brightcove動画を顧客視点で実装・分析する方法：GTM&amp;GA編 (2019年版)</title>
    <link href="https://makoto-shimizu.com/news/how-to-track-brightcove-with-gtm/"/>
    <id>https://makoto-shimizu.com/news/how-to-track-brightcove-with-gtm/</id>
    <published>2019-07-03T22:00:00.000Z</published>
    <updated>2024-03-18T04:25:51.531Z</updated>
    
    <content type="html"><![CDATA[<p>企業で採用されることが多いBrightcove動画。動画ごとの再生回数や完了はBrightcoveの管理画面でも調べられますが、Google AnalyticsやAdobe Analyticsなどのサイト内の行動データと統合すると、顧客体験を点ではなく線で理解できるようになります。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gtm-brightcove-report" alt="" sizes="100vw" /><ul><li>どの広告からの訪問者がコンテンツや動画の消費につながるのか？</li><li>動画の閲覧体験はサイトへの定着に寄与するのか？</li><li>ニーズや意識を広げる系の動画によって、興味関心や検討対象の商品ジャンルは広がるのか？</li><li>手厚いサポート系の動画はNPSに影響を与えるのか？</li></ul><p>そのためには、まず動画視聴行動（再生開始と再生完了）をアナリティクスで計測する実装が必要です。YouTubeと違ってBrightcoveの情報は少なく、公式サイトも散らかっていて日本語が変（ネイティブのレビューをしていない機械翻訳？）なので、メモを残しておきます。</p><a id="more"></a><h2 id="前提となるBrightcoveの実装方法"><a href="#前提となるBrightcoveの実装方法" class="headerlink" title="前提となるBrightcoveの実装方法"></a>前提となるBrightcoveの実装方法</h2><p>Brightcoveの動画は、以下のような形式でページに埋め込まれていて、そのページにはすでにGTMとGAが導入されていると想定します。</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">video</span></span></span><br><span class="line"><span class="tag"> <span class="attr">data-video-id</span>=<span class="string">"xxxxxxxx"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">data-account</span>=<span class="string">"yyyyyyyyy"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">data-player</span>=<span class="string">"zzzzzzzz"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">data-embed</span>=<span class="string">"default"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">data-application-id</span> <span class="attr">controls</span> <span class="attr">class</span>=<span class="string">"video-js"</span>&gt;</span><span class="tag">&lt;/<span class="name">video</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"//players.brightcove.net/yyyyyyyyy/zzzzzzzz_default/index.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h2 id="GTMで計測を実装する"><a href="#GTMで計測を実装する" class="headerlink" title="GTMで計測を実装する"></a>GTMで計測を実装する</h2><p>Google Tag Managerの標準機能であるYouTube計測機能を流用することで、最低限の手間とコードで実装するという方針で進めます。</p><div class="alert info"><p>以下で紹介するのはBrightcoveのGAプラグインを使わない方法です。Brightcoveのアカウントがなくても計測開始できます。</p></div><h3 id="GTMのタグを作る"><a href="#GTMのタグを作る" class="headerlink" title="GTMのタグを作る"></a>GTMのタグを作る</h3><p>まず、埋め込まれた一つまたは複数の動画にイベント処理を仕込むため、<br>以下のコードをGTMのHTMLタグとして作成します。</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript"><span class="keyword">var</span> track = <span class="function"><span class="keyword">function</span><span class="params">(a, b)</span></span>&#123;</span></span><br><span class="line">  dataLayer.push(&#123;</span><br><span class="line"><span class="actionscript">    <span class="string">'event'</span>: <span class="string">'gtm.video'</span>,</span></span><br><span class="line"><span class="actionscript">    <span class="string">'gtm.videoTitle'</span>: a,</span></span><br><span class="line"><span class="actionscript">    <span class="string">'gtm.videoStatus'</span>: b</span></span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"><span class="actionscript"><span class="keyword">for</span> (<span class="keyword">var</span> i <span class="keyword">in</span> videojs.getPlayers())&#123;</span></span><br><span class="line"><span class="actionscript">    videojs(i).ready(<span class="function"><span class="keyword">function</span><span class="params">()</span></span>&#123;</span></span><br><span class="line"><span class="actionscript">    <span class="keyword">this</span>.one(<span class="string">'play'</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span></span>&#123;</span></span><br><span class="line"><span class="actionscript">      track(<span class="keyword">this</span>.mediainfo.name, <span class="string">'start'</span>);</span></span><br><span class="line">    &#125;);</span><br><span class="line"><span class="actionscript">    <span class="keyword">this</span>.one(<span class="string">'ended'</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span></span>&#123;</span></span><br><span class="line"><span class="actionscript">      track(<span class="keyword">this</span>.mediainfo.name, <span class="string">'complete'</span>);</span></span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><ul><li>同じページ内に複数の動画がある場合でも対応可能</li><li>再生開始と再生完了のみ計測</li><li>動画IDは内容を把握しにくいので動画タイトルを取得</li><li>ページのHTMLが完成してから実行したいので、トリガーはDOM Ready以降で</li></ul><div class="alert warning"><p>BrightcoveのJavaScriptライブラリ（videojs）がロードされていないとエラーになるので、このタグはBrightcoveの動画が存在するページでのみ発火させます（タイミングにも注意）</p></div><h3 id="GTMの変数を有効化する"><a href="#GTMの変数を有効化する" class="headerlink" title="GTMの変数を有効化する"></a>GTMの変数を有効化する</h3><p>このタグが送信するdataLayerを受け取るための組み込み変数「Video Status」と「Video Title」を有効にします。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gtm-brightcove-var" alt="" sizes="100vw" /><h3 id="GTMのトリガーを作る"><a href="#GTMのトリガーを作る" class="headerlink" title="GTMのトリガーを作る"></a>GTMのトリガーを作る</h3><p>dataLayerへpushされるeventを受け取るためのトリガーを作成します。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gtm-brightcove-trigger" alt="" sizes="100vw" /><ul><li>YouTubeの動画計測機能を流用するので、トリガータイプは「YouTube動画」</li></ul><h3 id="GTMのタグを作る-1"><a href="#GTMのタグを作る-1" class="headerlink" title="GTMのタグを作る"></a>GTMのタグを作る</h3><p>続いて、上記のトリガーで発火するGA計測用のタグを作ります。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gtm-brightcove-tag" alt="" sizes="100vw" /><ul><li>イベントカテゴリ、アクション、ラベルに何を入れるかはお好みで</li><li>Video StatusとVideo Titleは、先ほど有効化した組み込み変数</li></ul><p>これで、動画の再生開始と再生完了時にイベント計測できるようになります。</p><h2 id="Google-Analyticsで目標を設定する"><a href="#Google-Analyticsで目標を設定する" class="headerlink" title="Google Analyticsで目標を設定する"></a>Google Analyticsで目標を設定する</h2><p>GAのイベント計測だけだと「どの動画が何回再生開始や完了されたのか」という点の分析になってしまいがちなので、動画の再生完了（や再生開始）をGAの目標として設定します。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gtm-brightcove-ga-goal" alt="" sizes="100vw" /><p>この設定によって再生完了を指標として使えるようになるので、冒頭のような顧客の長期的な変化を把握できるカスタマーアナリティクス流のレポートを作れるようになります。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gtm-brightcove-report" alt="" sizes="100vw" /><ul><li>ランディングページや流入チャネルなど、ページを超えて持続するディメンションをディメンションに入れる</li><li>「◯◯な人」「◯◯したことがある人」など、セッションではなくユーザーレベルのセグメントを作成し、それらのセグメントをディメンションに入れると長期の顧客の変化を比較できる</li><li>カレンダーの期間は長めに（動画の視聴によって訪問者の心理や行動の変化はどれくらいの期間で持続するのか次第）</li></ul><h2 id="今回のポイント"><a href="#今回のポイント" class="headerlink" title="今回のポイント"></a>今回のポイント</h2><ul><li>BrightcoveのAPIを使って動画タイトルや再生開始、再生完了のタイミングを取得する</li><li>分析しやすいように最低限のデータのみ取得する</li><li>タグマネージャーの標準機能を使ってなるべく楽をする</li><li>レポートはカスタマー視点で作る</li></ul><p>要件に応じて応用してみてください！</p>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;企業で採用されることが多いBrightcove動画。動画ごとの再生回数や完了はBrightcoveの管理画面でも調べられますが、Google AnalyticsやAdobe Analyticsなどのサイト内の行動データと統合すると、顧客体験を点ではなく線で理解できるようになります。&lt;/p&gt;
&lt;img src=&quot;//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gtm-brightcove-report&quot; alt=&quot;&quot; sizes=&quot;100vw&quot; /&gt;

&lt;ul&gt;
&lt;li&gt;どの広告からの訪問者がコンテンツや動画の消費につながるのか？&lt;/li&gt;
&lt;li&gt;動画の閲覧体験はサイトへの定着に寄与するのか？&lt;/li&gt;
&lt;li&gt;ニーズや意識を広げる系の動画によって、興味関心や検討対象の商品ジャンルは広がるのか？&lt;/li&gt;
&lt;li&gt;手厚いサポート系の動画はNPSに影響を与えるのか？&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;そのためには、まず動画視聴行動（再生開始と再生完了）をアナリティクスで計測する実装が必要です。YouTubeと違ってBrightcoveの情報は少なく、公式サイトも散らかっていて日本語が変（ネイティブのレビューをしていない機械翻訳？）なので、メモを残しておきます。&lt;/p&gt;
    
    </summary>
    
    
    
      <category term="Google Analytics" scheme="https://makoto-shimizu.com/tags/Google-Analytics/"/>
    
      <category term="GTM" scheme="https://makoto-shimizu.com/tags/GTM/"/>
    
  </entry>
  
  <entry>
    <title>Demo 05. 直帰してもページの滞在時間とスクロール量をGTMで正確に計測する方法</title>
    <link href="https://makoto-shimizu.com/news/demo/content-engagement/"/>
    <id>https://makoto-shimizu.com/news/demo/content-engagement/</id>
    <published>2019-04-19T11:30:00.000Z</published>
    <updated>2024-03-18T04:25:51.527Z</updated>
    
    <content type="html"><![CDATA[<p>「直帰率が高いキャンペーン用LPがあり、時間をかけてスクロールしながら読まれているのか知りたい」というご質問をいただいたので、ここで回答します。<br>GTMとGAで実装しやすいように、ページのスクロール（10％間隔）の最大量と滞在時間（3秒間隔）をGTMの機能を使って計測し、ページを移動や離脱する時に最終的な値をイベント計測するというアプローチをおすすめします。実際にこのページに実装し、計測データとレポートも共有しておきました。</p><a id="more"></a><h2 id="DEMO"><a href="#DEMO" class="headerlink" title="DEMO"></a>DEMO</h2><p>このページを開くとタイマーがスタートします（毎秒だと細かすぎるので3秒毎）</p><div id="timer" style="margin-right:auto;margin-left:auto;width:140px;border:10px solid #ccc;text-align:center;font-size:36px">00:00</div><p>別のページへ移動したりタブやウィンドウを閉じる時にタイマーが停止して最終的な滞在時間が確定し、GAへデータが送信されます。</p><p>こんなデータが取れるようになります。<br><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/demo-scrolldepth-report" alt="" sizes="100vw" /></p><h2 id="Google-Sheetsのレポートに自動反映される"><a href="#Google-Sheetsのレポートに自動反映される" class="headerlink" title="Google Sheetsのレポートに自動反映される"></a>Google Sheetsのレポートに自動反映される</h2><p>結果は<a href="https://docs.google.com/spreadsheets/d/1pvFWLc_07BDMdV7zL8CDiz2140Y4tG_puJfwZNbJ_mA/edit#gid=1115641289" target="_blank" rel="noopener">このGoogle Sheets</a>に1時間に1回、自動反映されます。</p><p><a href="https://docs.google.com/spreadsheets/d/1pvFWLc_07BDMdV7zL8CDiz2140Y4tG_puJfwZNbJ_mA/edit#gid=1115641289" target="_blank" rel="noopener"><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/demo-scrolldepth-report-gs" alt="" sizes="100vw" /></a></p><h3 id="この方式の特徴や注意点"><a href="#この方式の特徴や注意点" class="headerlink" title="この方式の特徴や注意点"></a>この方式の特徴や注意点</h3><ul><li>GTMの標準機能をなるべく使っているので、実装が比較的楽</li><li>GTMのタイマーはブラウザがバックグランドになっていたりタブが非アクティブになっていても止まらない</li><li>間隔を短くしすぎるとブラウザに負荷がかかるのでご注意</li><li>％形式のスクロールは解釈が難しいので、LPの主要エリアが「N秒以上表示された」という精読の計測も併用すると良い</li></ul><h2 id="真似してみよう"><a href="#真似してみよう" class="headerlink" title="真似してみよう"></a>真似してみよう</h2><p>GTMで</p><ol><li>カスタムHTMLのタグ「JS - 離脱前にdataLayerへevent送信」を作る<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">  window.addEventListener(&#39;beforeunload&#39;, function() &#123;</span><br><span class="line">    window.dataLayer.push(&#123;</span><br><span class="line">  event: &#39;beforeunload&#39;</span><br><span class="line">&#125;);</span><br><span class="line">  &#125;);</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure></li><li>そのタグが送信するカスタムイベント「beforeunload」を受け取るトリガー「beforeunload」を作る</li><li>スクロール距離のトリガー「Scroll Depth」を作る<img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gtm-trigger-scrolldepth" alt="" sizes="100vw" /></li><li>組み込み変数「Scroll Depth Threshold」を有効にする</li><li>タイマーのトリガー「Timer 3sec」を作る<img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gtm-trigger-timer" alt="" sizes="100vw" /></li><li>データレイヤー変数「DL - timerEventNumber」を作る（データレイヤーの変数名は「gtm.timerEventNumber」）</li><li>データレイヤー変数「DL - timerInterval」を作る（データレイヤーの変数名は「gtm.timerInterval」）</li><li>カスタムJS変数「Time on Page」を作る<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">function() &#123;</span><br><span class="line">  var elapsed &#x3D; &#123;&#123;DL - timerEventNumber&#125;&#125; * &#123;&#123;DL - timerInterval&#125;&#125; &#x2F; 1000;</span><br><span class="line">  var min &#x3D; Math.floor(elapsed &#x2F; 60);</span><br><span class="line">  var sec &#x3D; elapsed % 60;</span><br><span class="line">  return (&#39;0&#39;+min).slice(-2) + &#39;:&#39; + (&#39;0&#39;+sec).slice(-2);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li><li>GA計測用のタグ「GA - ページ離脱」を作る<img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gtm-tag-beforeunload" alt="" sizes="100vw" /></li></ol><ul><li>ページ離脱後でもバックグラウンドでビーコンが送信されるようtransportをbeaconにしておくと良い</li><li>イベント、カテゴリ、アクションのどこに何を入れるかはお好みで（計測中の他のデータと形式を合わせる）</li></ul><p>2019年4月23日：データレイヤー変数自体の名前と設定画面中の「データレイヤー変数の名前」は別物です。後者で指定すべき文字列について追記しました。</p><h3 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h3><ul><li><a href="https://www.simoahava.com/analytics/fire-trigger-when-user-about-to-leave-page/" target="_blank" rel="noopener">#GTMTips: Fire Trigger When User Is About To Leave The Page</a> - Simo Ahava’s blog</li><li><a href="https://www.clickinsight.ca/blog/timer-triggers-google-tag-manager-v2" target="_blank" rel="noopener">How to Use Timer triggers in Google Tag Manager V2</a></li></ul>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;「直帰率が高いキャンペーン用LPがあり、時間をかけてスクロールしながら読まれているのか知りたい」というご質問をいただいたので、ここで回答します。&lt;br&gt;GTMとGAで実装しやすいように、ページのスクロール（10％間隔）の最大量と滞在時間（3秒間隔）をGTMの機能を使って計測し、ページを移動や離脱する時に最終的な値をイベント計測するというアプローチをおすすめします。実際にこのページに実装し、計測データとレポートも共有しておきました。&lt;/p&gt;
    
    </summary>
    
    
    
      <category term="Google Analytics" scheme="https://makoto-shimizu.com/tags/Google-Analytics/"/>
    
      <category term="Demo" scheme="https://makoto-shimizu.com/tags/Demo/"/>
    
  </entry>
  
  <entry>
    <title>Google ColaboratoryでR言語を使う一番簡単な方法</title>
    <link href="https://makoto-shimizu.com/news/google-colaboratory-in-r/"/>
    <id>https://makoto-shimizu.com/news/google-colaboratory-in-r/</id>
    <published>2019-04-15T09:31:00.000Z</published>
    <updated>2024-03-18T04:25:51.531Z</updated>
    
    <content type="html"><![CDATA[<p>Google ColaboratoryでR言語を使うためには、追加インストールやセッション強制終了などが必要で、毎回数分間かかるという状況でしたが、2月頃にRのカーネルがこっそりと追加されたようで、面倒なハックは不要になりました。その方法についてのメモ。</p><a id="more"></a><h2 id="カーネルを確認"><a href="#カーネルを確認" class="headerlink" title="カーネルを確認"></a>カーネルを確認</h2><p>まず、Google Colaboratoryにデフォルトでインストールされているカーネルを確認するため、以下を実行します。</p><pre><code>!jupyter-kernelspec list</code></pre><p>kernels/irが表示されれば、Rのカーネルが入っているということ。</p><img src="//res.cloudinary.com/mak00s/f_auto/google-colaboratory-kernel-list" alt="Google Colaboratoryのカーネル一覧" /><p>2019年4月3日時点で、Swiftも入っているようです。</p><h2 id="Rのカーネルに切り替える"><a href="#Rのカーネルに切り替える" class="headerlink" title="Rのカーネルに切り替える"></a>Rのカーネルに切り替える</h2><p>カーネルは入っているのにGoogle Colaboratoryのランタイム変更画面に「R」がまだ表示されず、選択できないので、Notebook（.ipynb）ファイルをダウンロードし、テキストエディタで開いて以下の部分を編集します。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&quot;kernelspec&quot;: &#123;</span><br><span class="line">  &quot;name&quot;: &quot;ir&quot;,</span><br><span class="line">  &quot;display_name&quot;: &quot;R&quot;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><img src="//res.cloudinary.com/mak00s/f_auto/google-colaboratory-edit-ipynb" alt="NotebookをText Editorで開く" /><p>終わったらこのNotebookをアップロードして開くだけ。<br>ランタイムのタイプを確認すると「R」に切り替わっていることがわかります。</p><img src="//res.cloudinary.com/mak00s/f_auto/google-colaboratory-kernel" alt="NotebookのKernel設定がRになった" /><p>あとは普通にRが使えます。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/google-colaboratory-in-r" alt="Google ColaboratoryでR言語が使える" sizes="100vw" /><p>簡単！</p><p>元ネタ：</p><ul><li><a href="https://stackoverflow.com/questions/54595285/how-to-use-r-with-google-colaboratory" target="_blank" rel="noopener">jupyter notebook - How to use R with Google Colaboratory? - Stack Overflow</a> (2/8)</li><li><a href="https://twitter.com/mrtec_y/status/1111609620865286145" target="_blank" rel="noopener">YanaiさんのTweet</a> (3/29)</li></ul>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;Google ColaboratoryでR言語を使うためには、追加インストールやセッション強制終了などが必要で、毎回数分間かかるという状況でしたが、2月頃にRのカーネルがこっそりと追加されたようで、面倒なハックは不要になりました。その方法についてのメモ。&lt;/p&gt;
    
    </summary>
    
    
    
      <category term="R" scheme="https://makoto-shimizu.com/tags/R/"/>
    
  </entry>
  
  <entry>
    <title>Netflixも使ってるnteract（Jupyter用UI）が直感的で心地よい</title>
    <link href="https://makoto-shimizu.com/news/jupyter-nteract-intro/"/>
    <id>https://makoto-shimizu.com/news/jupyter-nteract-intro/</id>
    <published>2018-10-29T00:03:00.000Z</published>
    <updated>2024-03-18T04:25:51.531Z</updated>
    
    <content type="html"><![CDATA[<p>Jupyter Notebookの利便性はそのままで、操作性とデータビジュアライズ機能が改善された<a href="https://nteract.io/" target="_blank" rel="noopener">nteract</a>を最近よく使っています。日本ではあまり知られていないようなので、デモ動画を作ってみました。</p><a id="more"></a><h1 id="nteractがJupyter-Notebookよりもスゴイ点"><a href="#nteractがJupyter-Notebookよりもスゴイ点" class="headerlink" title="nteractがJupyter Notebookよりもスゴイ点"></a>nteractがJupyter Notebookよりもスゴイ点</h1><div class="video-container"><iframe src="https://www.youtube.com/embed/58uI07gbr7U" frameborder="0" loading="lazy" allowfullscreen></iframe></div><h2 id="データの確認や探索が簡単"><a href="#データの確認や探索が簡単" class="headerlink" title="データの確認や探索が簡単"></a>データの確認や探索が簡単</h2><p>操作性やデザインも大事ですが、データ分析の場合はこちらの方が重要ですね。<br>nteractには、データをインタラクティブに確認や探索できるData Explorerの機能が内蔵されています。</p><p>テーブル形式の場合はカラムの幅を変更したり、ヘッダをクリックして並び替えしたり、一度に表示される行数を変更してページ分割できます。ヘッダは固定表示されるので、大量データを確認しやすくなっています。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/nteract-table" alt="" sizes="100vw" /><p>さらに、インタラクティブなグラフ表示も簡単。Pythonモジュールをimportしたり設定用のコードを書くことなく、クリックだけで表示方法を切り替えられます。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/nteract-graph" alt="" sizes="100vw" /><div class="alert info"><p>詳細は開発者のブログ記事をどうぞ：<a href="https://blog.nteract.io/designing-the-nteract-data-explorer-f4476d53f897" target="_blank" rel="noopener">Designing the nteract Data Explorer</a>（英語）</p></div><h2 id="キーボードショートカットに依存しない直感的なGUI"><a href="#キーボードショートカットに依存しない直感的なGUI" class="headerlink" title="キーボードショートカットに依存しない直感的なGUI"></a>キーボードショートカットに依存しない直感的なGUI</h2><p>Jupyter Notebookはキーボードショートカットを使う前提のUIになっているのか、とっつきにくく、慣れるまで時間がかかります。</p><p><a href="https://nteract.io/" target="_blank" rel="noopener">nteract</a>の場合、セルをドラッグ＆ドロップで移動したり、ゴミ箱アイコンをクリックして削除したりと直感的に利用できるので、エンジニアではないマーケターやビジュアル派のアナリストにフレンドリー。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/nteract-cell" alt="" sizes="100vw" /><h1 id="インストールと起動方法"><a href="#インストールと起動方法" class="headerlink" title="インストールと起動方法"></a>インストールと起動方法</h1><p>Jupyter Notebookに慣れた人なら、より機能的なWeb版がオススメ。</p><p>コマンドラインを使いたくない、エンジニアではないのでGUIで使いたい！という人は、シンプルなデスクトップ版が使いやすいでしょう。</p><h2 id="Web版のインストールと起動"><a href="#Web版のインストールと起動" class="headerlink" title="Web版のインストールと起動"></a>Web版のインストールと起動</h2><pre><code>pip install nteract_on_jupyter</code></pre><p>（やcondaなど）でインストールし、</p><pre><code>jupyter nteract</code></pre><p>で起動できます。Jupyter Notebookと同じ要領です。</p><h2 id="デスクトップ版のインストールと起動"><a href="#デスクトップ版のインストールと起動" class="headerlink" title="デスクトップ版のインストールと起動"></a>デスクトップ版のインストールと起動</h2><p>公式サイトからダウンロードしたインストーラを実行した後に（前でも可）</p><pre><code>pip install ipykernelpython -m ipykernel install --user</code></pre><p>を実行し、裏で動くカーネルを設定しておく必要があります。</p><h1 id="まとめ"><a href="#まとめ" class="headerlink" title="まとめ"></a>まとめ</h1><p>nteractは<a href="https://medium.com/netflix-techblog/notebook-innovation-591ee3221233" target="_blank" rel="noopener">Netflixの社員ブログ</a>で知りました。</p><p>Pythonの各種ライブラリを活用するとデータ分析が一気にレベルUPするので、GoogleアナリティクスやAdobe Analytics、エクセルのようなツールの限界を感じているアナリストは、これを機会にぜひ挑戦してみてください。</p>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;Jupyter Notebookの利便性はそのままで、操作性とデータビジュアライズ機能が改善された&lt;a href=&quot;https://nteract.io/&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;nteract&lt;/a&gt;を最近よく使っています。日本ではあまり知られていないようなので、デモ動画を作ってみました。&lt;/p&gt;
    
    </summary>
    
    
    
      <category term="Python" scheme="https://makoto-shimizu.com/tags/Python/"/>
    
  </entry>
  
  <entry>
    <title>このサイトでこだわったCMSとDAMとCDN</title>
    <link href="https://makoto-shimizu.com/news/site-renewal-2018/"/>
    <id>https://makoto-shimizu.com/news/site-renewal-2018/</id>
    <published>2018-10-18T15:00:00.000Z</published>
    <updated>2024-03-18T04:25:51.531Z</updated>
    
    <content type="html"><![CDATA[<p>更新しにくいので放置しがちだったこのサイトを4月にようやくリニューアル（再構築）しました。SSL化とレスポンシブ対応は当然として、画像はDAMでデバイスに合わせて解像度とフォーマットを最適し、CDNで配信。Static Generatorなので応答が速く、セキュリティも強固。ひと昔前のエンタープライズ向けCMSを無料で実現！</p><a id="more"></a><h3 id="コンテンツ更新が滞っていた理由"><a href="#コンテンツ更新が滞っていた理由" class="headerlink" title="コンテンツ更新が滞っていた理由"></a>コンテンツ更新が滞っていた理由</h3><ul><li>自前のDAMライブラリが壊れて画像やコードが表示されなくなった</li><li>CMSの管理画面が重く、古いコンテンツの把握や確認がしにくくなった</li><li>ヨーロッパ産のCMSで日本語の漢字変換ができなくなった</li><li>古いコンテンツを把握できなくなった</li></ul><p>このままではマズイ、と一年前からリニューアルの準備を進めていました。<br>きっかけは、USで参加したSDLのイベント。コンテンツ管理に関する最新のソリューションについて知り、いろいろ刺激を受けました。特に、<strong>Headless CMS</strong>というコンテンツの保管と表現を分離する考え方を実践したいと思うようになりました。</p><h2 id="定めたWebリニューアルの要件"><a href="#定めたWebリニューアルの要件" class="headerlink" title="定めたWebリニューアルの要件"></a>定めたWebリニューアルの要件</h2><ul><li>コンテンツ（テキスト）をバージョン管理したい</li><li>手元で複数のコンテンツを開いて一括編集したい</li><li>リポジトリ（コンテンツ保管）とフロントエンド（HTML表現）を分離したい</li><li>画像をCDNで高速化したい</li><li>画像はデバイスに応じて解像度と容量を最適化したい</li><li>レイアウトをデスクトップとモバイルでレスポンシブ対応したい</li><li>AMP対応でスマホからのアクセスを高速化したい</li><li>全ページSSL化したい</li><li>内容と合わなくなったのでドメインを変えたい</li><li>既存コンテンツのURLを維持したい</li></ul><p>と積もり積もった希望を満たすために試行錯誤。</p><h2 id="まずWordPressで構築"><a href="#まずWordPressで構築" class="headerlink" title="まずWordPressで構築"></a>まずWordPressで構築</h2><p>まずは各種プラグインを探してWordPressを拡張しました。</p><p>** Markdown対応 **<br>HTMLを生成するWYSIWYGエディタは余計なHTMLを挿入するのが嫌いなので、もっとシンプルでかつ普及していて長期的にサポートされそうなマークダウン形式でコンテンツを記述するためにプラグイン「JP Markdown」を導入。Jetpackの設定でもMarkdown形式を有効化できますが、多機能すぎてWordPressが重くなるのが難点。</p><p>** GitHub同期 **<br>WordPressのテキストコンテンツが自動的にGitHubのリポジトリに同期されるプラグイン「<a href="https://wordpress.org/plugins/wp-github-sync/" target="_blank" rel="noopener">WordPress GitHub Sync</a>」を導入。テキストエディタで一括編集し、コミットするだけでサイトが更新されるようにしました。コンテンツの保存時に毎回Gitにコミットするので、これもWordPressの管理画面が重くなるのが難点。</p><p>結果として、バージョン管理、ローカル一括編集、リポジトリとフロントエンドの分離はできるようになったけども、WordPressのサイトも管理画面も、あまりに遅くて更新する気が失せるほどになったので、断念。</p><h2 id="Headless-CMSは発展途上？"><a href="#Headless-CMSは発展途上？" class="headerlink" title="Headless CMSは発展途上？"></a>Headless CMSは発展途上？</h2><p>新興のツールやソリューションをいくつか検討しましたが、対応する無料のフロントエンドが見つからず、自前で構築する必要があったので断念。このジャンルはまだ発展途上なのかも？</p><h2 id="静的ジェネレーター「Hexo」を採用"><a href="#静的ジェネレーター「Hexo」を採用" class="headerlink" title="静的ジェネレーター「Hexo」を採用"></a>静的ジェネレーター「Hexo」を採用</h2><p>最近は静的HTMLを生成するジェネレーターが増えていると知り、検討を開始。<br>そのうちメジャーな<a href="https://jekyllrb.com/" target="_blank" rel="noopener">Jekyll</a>は、方法やテンプレートが充実しているので有力候補でしたが、Rubyを今から覚える気になれず、ボツ。Node.jsベースの<a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>を採用しました。</p><h2 id="ホスティングは「Netlify」"><a href="#ホスティングは「Netlify」" class="headerlink" title="ホスティングは「Netlify」"></a>ホスティングは「Netlify」</h2><p>ジェネレータの実行とホスティング環境としては、<a href="https://www.netlify.com/" target="_blank" rel="noopener">Netlify</a>を採用。Githubへコミットすると自動でジェネレーターの実行と配信が行われるだけでなく、CSSやJSのファイル結合・圧縮、CDN対応、タグ追加や認証、A/Bテストなどの機能があるので、<a href="https://pages.github.com/" target="_blank" rel="noopener">GitHub Pages</a>よりも圧倒的に便利です。</p><h2 id="DAMは「Cloudinary」"><a href="#DAMは「Cloudinary」" class="headerlink" title="DAMは「Cloudinary」"></a>DAMは「Cloudinary」</h2><p>画像をWeb用の解像度とフォーマットに変換してからサーバーにアップロードすることは避けたいので、動的に解像度やフォーマットを変換してくれるDAM (Digital Asset Manager)と、その配信を高速化できるCDNをいろいろ検討しました。</p><p>Netlifyにも画像のCDN配信機能がついていますが、さらにデバイス毎に最適化したかったので、<a href="https://cloudinary.com/" target="_blank" rel="noopener">Cloudinary</a>を採用。容量や転送量によっては、なんと無料で使えるDAMです。</p><p>Cloudinaryへ画像をアップロードし、その画像のURLを細工すると、サーバー側で動的にリサイズ、フォーマット変換、トリミング、フィルタ適用などができ、その結果はCDNで配信されます。</p><p>特に気に入ったのは、デバイスの解像度（DPR）に応じて必要なピクセルサイズを算出し、過不足ない解像度の画像を自動で配信してくれる機能。高解像度のスマートフォンで見ると画像がボケボケになる状況を避けられるようになりました。</p><p>↓iPhoneのretinaなど高解像度に自動対応、フォーマットもWebPなどに最適化する画像の例<br><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/2014-05-19-Eclipse_eowupx" sizes="30vw"><br>URLはres.cloudinary.com/mak00s/<strong>f_auto,w_auto:200:800</strong>/Eclipse</p><p>↓URLにパラメータを含めるだけでDPR 1.0で幅200pixelにリサイズした例<br><img src="//res.cloudinary.com/mak00s/w_200/dpr_1.0/2014-05-19-Eclipse_eowupx"><br>URLはres.cloudinary.com/mak00s/<strong>w_200/dpr_1.0</strong>/Eclipse</p><p>HTMLのタグで縮小しているわけではなく、環境に応じて無駄のない大きさの画像がサーバーから配信されます。</p><p>オリジナルの最大解像度の写真をそのまま入れておけるので、元画像を別で管理する必要もありません。5年くらい経って通信速度や画面の解像度がさらに改善されたとしても、一番大きな元画像を保管してサーバー側で変換しているので、画像URLのパラメータを変えるだけで対応できます。</p><h1 id="無料でも軽量で楽なサイト運用を実現できる！"><a href="#無料でも軽量で楽なサイト運用を実現できる！" class="headerlink" title="無料でも軽量で楽なサイト運用を実現できる！"></a>無料でも軽量で楽なサイト運用を実現できる！</h1><p>以上、試行錯誤しながら今風の構成を個人サイトで実現してみました。昔（2005年頃）は勤務先に同じようなシステムを入れるのに数千万円かけていたのに、同じような構成を今はここまで無料で実現できるのか、と興奮の連続。CMSやDAM、タグマネージャーを自作していた時期もありましたが、世界のトレンドやブラウザのバージョンアップに合わせて進化させずに放置してしまいがち。似たようなニーズを持つ人や組織は世界にたくさんいるので、車輪の再発明をするのではなく、みんなの知恵やツールを上手に活用するのが一番ですね。</p>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;更新しにくいので放置しがちだったこのサイトを4月にようやくリニューアル（再構築）しました。SSL化とレスポンシブ対応は当然として、画像はDAMでデバイスに合わせて解像度とフォーマットを最適し、CDNで配信。Static Generatorなので応答が速く、セキュリティも強固。ひと昔前のエンタープライズ向けCMSを無料で実現！&lt;/p&gt;
    
    </summary>
    
    
    
  </entry>
  
  <entry>
    <title>Adobe Analyticsの巨大CSVファイルを前処理するならPythonライブラリ「Dask」が便利</title>
    <link href="https://makoto-shimizu.com/news/data-prep-with-python-dask/"/>
    <id>https://makoto-shimizu.com/news/data-prep-with-python-dask/</id>
    <published>2018-10-18T03:20:00.000Z</published>
    <updated>2024-03-18T04:25:51.527Z</updated>
    
    <content type="html"><![CDATA[<p>ユーザー単位で分析するカスタマーアナリティクスの場合、Google AnalyticsやAdobe Analyticsの画面で表示できるレポート機能が物足りないので、Data Warehouseなどで生データ（に近い集計データ）を抽出してTableauで集計することが多いですが、データが巨大だとBIツールで読み込めません。そんな時にPythonで巨大ファイルを並列処理し、不要なカラムやレコードを削除してからBIで読み込む方法についてです。</p><a id="more"></a><p>以下のように、Adobe AnalyticsのデータをData WarehouseでFTP配信したCSVファイルをPythonで前処理してみます。</p><p>元ファイルは18.5GBもあり、ExcelでもテキストエディタでもTableauでも開けません。少しでもデータ量を減らすためにセグメントを適用してありますが、Data Warehouseのセグメント機能には制約があり、どうしても不要なデータが混ざってしまいます。</p><p>データベースやGCPで処理するのが確実ですが、手元のパソコンでサクっと分析したいので、Pythonの並列・分散処理ライブラリ「<a href="https://docs.dask.org/en/latest/" target="_blank" rel="noopener">Dask</a>」を使いました。</p><p>使ったPythonコードはこちら。<br>pipでdaskをインストールしておく必要があります（Anacondaには標準で含まれているようです）。</p><script src="//gist.github.com/mak00s/b5a0a37a1d9caa00cb5a4412ed06eb1c.js"></script><p>to_csvで普通にCSV保存すると、読み込みの時に分割されたパーティションの単位で分割された複数のCSVファイルが生成されます。時間はかかりますが、pandasで普通に処理した時のようにフリーズしたり待った挙句にエラーになったりしません。</p><p>メモリに読み込める程度までデータ量が減った場合は、一つにまとめて単一のCSVファイルとして保存することもできます。</p><p>上のコードを実行して生成されたのは3.6GBのCSV。Macbook上のTableauでも読み込めるようになりました。</p><p><strong>注意点など</strong></p><ul><li>CSV読み込み時に最小限のデータ型を指定するとメモリを節約できる</li><li>並び替えなど、全データをメモリに読み込むような処理は避ける必要がある</li><li>NumPyとpandasのAPIを完全サポートしているわけではない</li></ul><p>pandasだけでもchunksizeを指定してループ処理できますが、DASKだと小さな単一ファイルと同じように処理しても自動で分割や並列処理してくれるのが便利！</p>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;ユーザー単位で分析するカスタマーアナリティクスの場合、Google AnalyticsやAdobe Analyticsの画面で表示できるレポート機能が物足りないので、Data Warehouseなどで生データ（に近い集計データ）を抽出してTableauで集計することが多いですが、データが巨大だとBIツールで読み込めません。そんな時にPythonで巨大ファイルを並列処理し、不要なカラムやレコードを削除してからBIで読み込む方法についてです。&lt;/p&gt;
    
    </summary>
    
    
    
      <category term="Python" scheme="https://makoto-shimizu.com/tags/Python/"/>
    
      <category term="Adobe Analytics" scheme="https://makoto-shimizu.com/tags/Adobe-Analytics/"/>
    
  </entry>
  
  <entry>
    <title>GTMでGoogleアナリティクスのClient IDを取得する一番確実で楽な方法（2018年版）</title>
    <link href="https://makoto-shimizu.com/news/how-to-measure-google-analytics-client-id-with-gtm-2017/"/>
    <id>https://makoto-shimizu.com/news/how-to-measure-google-analytics-client-id-with-gtm-2017/</id>
    <published>2018-10-04T08:00:00.000Z</published>
    <updated>2024-03-18T04:25:51.531Z</updated>
    
    <content type="html"><![CDATA[<p>GTM (Google Tag Manager) でGAのClient IDを取得する最新で確実な方法について。</p><a id="more"></a><h2 id="今までの問題点"><a href="#今までの問題点" class="headerlink" title="今までの問題点"></a>今までの問題点</h2><p>Cookieから取得する、Callbackで取得するなど、いろいろな方法がありましたが、新規訪問の最初の1ページ目で取得できない、無駄なイベントトラッキングが増える、GAのタグをそのままカスタムJavaScriptタグとして貼り付けるので タグマネUIの便利機能を使えない、などの 不便な点があり、イマイチな状況が続いていました。</p><div class="alert info"><p>2018年10月現在は、2017年にGA (analytics.js)に追加されたCustomTaskという機能を使うのが一番楽で確実です。</p></div><h3 id="1-GA管理画面でカスタムディメンションを作る"><a href="#1-GA管理画面でカスタムディメンションを作る" class="headerlink" title="1. GA管理画面でカスタムディメンションを作る"></a>1. GA管理画面でカスタムディメンションを作る</h3><p>Client IDを格納するカスタムディメンションをGAの管理画面で作成しておきます。範囲はユーザーで。</p><h3 id="2-GTMのカスタムJavaScript変数を作る"><a href="#2-GTMのカスタムJavaScript変数を作る" class="headerlink" title="2. GTMのカスタムJavaScript変数を作る"></a>2. GTMのカスタムJavaScript変数を作る</h3><p>カスタムJavaScript変数を作って以下のコードを入力します。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">model</span>) </span>&#123;</span><br><span class="line">    model.set(<span class="string">'dimension1'</span>, model.get(<span class="string">'clientId'</span>));</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gtm-ga-client-id-01.png" alt="" sizes="100vw" />* カスタムディメンションの番号は適宜変更してください<h3 id="3-customTaskを追加する"><a href="#3-customTaskを追加する" class="headerlink" title="3. customTaskを追加する"></a>3. customTaskを追加する</h3><p>GAのタグ（または使っている場合はGA設定の変数）で、「customTask」という名前のフィールドを作成し、値で前述の変数を指定します。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gtm-ga-client-id-02.png" alt="" sizes="100vw" />* フィールド名の名前は変更しないでください（頭のcは小文字、スペース無し）<p>はい、これだけ。簡単ですねー。</p><p>とはいえ、公開前のテストをお忘れなく。</p><p>元ネタ：<a href="https://www.simoahava.com/gtm-tips/use-customtask-access-tracker-values-google-tag-manager/" target="_blank" rel="noopener">#GTMTips: Use customTask To Access Tracker Values In Google Tag Manager</a> - Simo Ahava’s blog</p><p>2018年7月追記：GTMを使わない場合はGAタグのsend previewよりも上に以下のコードを追加します。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">ga(<span class="string">'set'</span>, <span class="string">'customTask'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">model</span>) </span>&#123;</span><br><span class="line">  model.set(<span class="string">'dimension9'</span>, model.get(<span class="string">'clientId'</span>));</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><div class="alert success"><p>さらに、アクセス時間（年月日＋時分秒）も別のカスタムディメンションへ入れるのがオススメです。一人ひとりの行動データをAPIやGoogle Sheetsで抽出する際に役立ちます。<br>詳しくはこちら：<a href="/news/how-to-measure-google-analytics-timestamp-with-gtm/">GTMでGoogleアナリティクスのアクセス時間を計測しよう</a></p></div>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;GTM (Google Tag Manager) でGAのClient IDを取得する最新で確実な方法について。&lt;/p&gt;
    
    </summary>
    
    
    
      <category term="Google Analytics" scheme="https://makoto-shimizu.com/tags/Google-Analytics/"/>
    
      <category term="GTM" scheme="https://makoto-shimizu.com/tags/GTM/"/>
    
  </entry>
  
  <entry>
    <title>Demo 04. コンテンツのトピックを精読ベースでスコアリング</title>
    <link href="https://makoto-shimizu.com/news/demo/content-topic-scrolled/"/>
    <id>https://makoto-shimizu.com/news/demo/content-topic-scrolled/</id>
    <published>2018-09-10T01:05:00.000Z</published>
    <updated>2024-03-18T04:25:51.531Z</updated>
    
    <content type="html"><![CDATA[<p>効果測定はアナリティクス活用方法の１つでしかなく、<strong>顧客理解やセグメント発見も重要</strong>です。例えばコンテンツマーケティングにおける単純なページ閲覧数や訪問者数は<strong>企業努力の効果を測定する指標</strong>でしかなく、顧客の理解には役立ちません。一人ひとりのサイト<strong>体験をデータを活用して理解</strong>できれば、コミュニケーション施策の立案や改善が可能になります。</p><p>そこで、訪問者がどんなトピックのコンテンツをじっくり読んでいるかをデータで把握できるデモを作ってみました。実データのレポートもリアルタイム公開！</p><a id="more"></a><h2 id="DEMO"><a href="#DEMO" class="headerlink" title="DEMO"></a>DEMO</h2><p>本サイトに全体的に導入しています。例えばこのページを下の方までスクロールしてタグや関連リンクのエリアを<strong>１秒以上表示させる</strong>と、ポコっと音が鳴って画面右上に通知が表示され、そのページに設定されたトピック（タグ）である「Demo」と「Google Analytics」にそれぞれ１点が加算されます。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/demo-content-topic-scrolled.png" alt="" sizes="100vw" /><div class="alert info"><p>GAサーバーへデータが送信されると、画面右上に通知が表示されます</p></div><h3 id="ポイント"><a href="#ポイント" class="headerlink" title="ポイント"></a>ポイント</h3><ul><li>単なるページ表示ではなく、スクロール後の表示時間で精読を判定</li><li>長いランディングページでも複数のエリア毎に精読を判定できる</li><li>訪問者の関心をタグでざっくり把握できる</li></ul><h2 id="Google-Sheetsのレポートに自動反映される"><a href="#Google-Sheetsのレポートに自動反映される" class="headerlink" title="Google Sheetsのレポートに自動反映される"></a>Google Sheetsのレポートに自動反映される</h2><p>タグごとの精読状況がわかる<a href="https://docs.google.com/spreadsheets/d/1Wg81YpMDcZ2VLWAhXqlg_GU1pQRCrWy4CZGJZTXfez0/edit#gid=0" target="_blank" rel="noopener">Google Sheetsを公開</a>しておきます。</p><p><a href="https://docs.google.com/spreadsheets/d/1Wg81YpMDcZ2VLWAhXqlg_GU1pQRCrWy4CZGJZTXfez0/edit#gid=0" target="_blank" rel="noopener"><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/demo-content-topic-report.png" alt="" sizes="100vw" /></a></p><ul><li>データは1時間に1回、自動反映されます。</li><li>スプレッドシートをコピー（複製して保存）すると自由に編集できるようになります</li></ul><h2 id="真似してみよう"><a href="#真似してみよう" class="headerlink" title="真似してみよう"></a>真似してみよう</h2><ol><li>どの要素がどこまで何秒間表示されたら精読とみなすかを決める</li><li>それを条件とするGTMの「要素の表示」トリガーを作る</li><li>そのトリガーでGTMのGAタグを作り、イベントを計測</li><li>Google Sheetを作成し、Googleアナリティクスのアドオンを使ってイベントデータを抽出する（上記のシートを参考に）</li></ol><p>↑↑↑↑↑（コンテンツはここまで）↑↑↑↑↑</p>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;効果測定はアナリティクス活用方法の１つでしかなく、&lt;strong&gt;顧客理解やセグメント発見も重要&lt;/strong&gt;です。例えばコンテンツマーケティングにおける単純なページ閲覧数や訪問者数は&lt;strong&gt;企業努力の効果を測定する指標&lt;/strong&gt;でしかなく、顧客の理解には役立ちません。一人ひとりのサイト&lt;strong&gt;体験をデータを活用して理解&lt;/strong&gt;できれば、コミュニケーション施策の立案や改善が可能になります。&lt;/p&gt;
&lt;p&gt;そこで、訪問者がどんなトピックのコンテンツをじっくり読んでいるかをデータで把握できるデモを作ってみました。実データのレポートもリアルタイム公開！&lt;/p&gt;
    
    </summary>
    
    
    
      <category term="Google Analytics" scheme="https://makoto-shimizu.com/tags/Google-Analytics/"/>
    
      <category term="Demo" scheme="https://makoto-shimizu.com/tags/Demo/"/>
    
  </entry>
  
  <entry>
    <title>Google Analyticsのビーコンに効果音をつけてトースト通知する方法</title>
    <link href="https://makoto-shimizu.com/news/demo/ga-notification/"/>
    <id>https://makoto-shimizu.com/news/demo/ga-notification/</id>
    <published>2018-09-06T02:22:00.000Z</published>
    <updated>2024-03-18T04:25:51.531Z</updated>
    
    <content type="html"><![CDATA[<p>アナリティクスのDEMOページが地味なので、Google Analyticsへデータを送信するたびに音を鳴らしたり通知トーストを表示する仕組みをGTMで実装してみました。とっても実用的で流行しそうですが（笑）、実はいろんな用途で応用できます。</p><a id="more"></a><h2 id="DEMO"><a href="#DEMO" class="headerlink" title="DEMO"></a>DEMO</h2><p><a href="https://store.concept-diagram.com/ec/html/products/detail/6" target="_blank" rel="noopener">このページ</a>にアクセスしてみてください。ページ読み込み時に通常のページビューが計測され、右上に通知が表示されて「ポコっ」と音が鳴ります。</p><p>さらに、商品画像を切り替えたり、「お気に入りに追加」をクリックするたびにイベントが計測されて、今度はコインGET音とともに違うデザインの通知が表示されます。</p><p><a href="https://store.concept-diagram.com/ec/html/products/detail/6" target="_blank" rel="noopener"><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/demo-ga-notification.png" alt="" sizes="100vw" /></a></p><h2 id="真似してみよう"><a href="#真似してみよう" class="headerlink" title="真似してみよう"></a>真似してみよう</h2><p>2017年にanalytics.jsに追加された新機能「<a href="https://developers.google.com/analytics/devguides/collection/analyticsjs/tasks" target="_blank" rel="noopener">Task</a>」の「customTask」を使って、GAへデータが送信される直前の処理を追加します。</p><h3 id="1-通知用ライブラリを組み込む"><a href="#1-通知用ライブラリを組み込む" class="headerlink" title="1. 通知用ライブラリを組み込む"></a>1. 通知用ライブラリを組み込む</h3><p>まず、GTMで組み込み変数「<strong>Container ID</strong>」と「<strong>HTML ID</strong>」を有効化しておきます。</p><p>次に、通知用のJavaScriptライブラリ「<a href="https://codeseven.github.io/toastr/" target="_blank" rel="noopener">Toastr</a>」を読み込むためのGTMタグを作成します。</p><script src="//gist.github.com/mak00s/884fc489972d0e858842a8ba853d720e.js"></script><p>単に外部のCSSとJavaScriptファイルをロードするだけですが、この外部JavaScriptファイルがロードされた後にGoogle Analyticsタグを発火させたいので、少し複雑になっています。</p><p>そのため、トリガーの指定は不要です。「トリガーがないよ」とアラートが出ますが、気にしないで保存してください。</p><p>続いて、（すでに作ってあるはずの）GA基本タグの<strong>詳細設定</strong>を開き、「<strong>タグの順序付け</strong>」の「…<strong>が発効する前にタグを配信</strong>」に上のタグを設定します。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gtm-tag-sequence.png" alt="" sizes="100vw" /><h3 id="2-データ送信時に処理されるcustomTaskを設定する"><a href="#2-データ送信時に処理されるcustomTaskを設定する" class="headerlink" title="2. データ送信時に処理されるcustomTaskを設定する"></a>2. データ送信時に処理されるcustomTaskを設定する</h3><p>customTaskとして以下のような<strong>カスタムJavaScript変数</strong>を作成します(既にある場合は追記)。</p><script src="//gist.github.com/mak00s/333ff4eec07d542f14b35baad7c193fa.js"></script><ul><li>MP3ファイルのURLは適宜変えてください</li><li>サウンド再生の実装はシンプル化したので、タイミングや環境によって鳴らないことがあります（WebAudio APIで実装する方が確実）</li><li>Toastrの読み込みや実行に失敗してもGA計測が継続されるように、try-catchで囲んでいます</li></ul><p>これをGA設定の「フィールド」に「<strong>customTask</strong>」として追加します。その方法については「<a href="https://makoto-shimizu.com/news/how-to-measure-google-analytics-client-id-with-gtm-2017/">GTMでGoogleアナリティクスのClient IDを取得する一番確実で楽な方法</a>」を参照してください。</p><h2 id="いろいろ応用できる"><a href="#いろいろ応用できる" class="headerlink" title="いろいろ応用できる"></a>いろいろ応用できる</h2><p>以上、customTaskの活用方法について紹介しました。</p><p>今回のGA計測の通知は誰も真似しなさそうですが（笑）、以下のような応用が可能です。</p><h4 id="応用例"><a href="#応用例" class="headerlink" title="応用例"></a>応用例</h4><ul><li>GDPRのオプトインFlagに応じて計測を停止したりパーソナルデータのみ匿名化する</li><li>HTMLでベタ書きされたイベント計測の修正に時間がかかるのでGTMで送信前にインターセプトしてデータを改変する</li><li>GTMのUIでは指定できないGAの詳細設定を行う</li><li>ClientIDやTimestampなどをカスタムディメンションで計測する</li><li>外部APIと連携する</li><li>GAの計測データをクラウド（GCPなど）に送信して別途記録する</li></ul>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;アナリティクスのDEMOページが地味なので、Google Analyticsへデータを送信するたびに音を鳴らしたり通知トーストを表示する仕組みをGTMで実装してみました。とっても実用的で流行しそうですが（笑）、実はいろんな用途で応用できます。&lt;/p&gt;
    
    </summary>
    
    
    
      <category term="Google Analytics" scheme="https://makoto-shimizu.com/tags/Google-Analytics/"/>
    
      <category term="Demo" scheme="https://makoto-shimizu.com/tags/Demo/"/>
    
  </entry>
  
  <entry>
    <title>Demo 03. NPSアンケート回答をGAでセグメント分析</title>
    <link href="https://makoto-shimizu.com/news/demo/nps-analytics/"/>
    <id>https://makoto-shimizu.com/news/demo/nps-analytics/</id>
    <published>2018-08-28T09:18:00.000Z</published>
    <updated>2024-03-18T04:25:51.531Z</updated>
    
    <content type="html"><![CDATA[<p>効果測定はアナリティクス活用方法の１つでしかなく、顧客理解やセグメント発見も重要です。例えば、NPS算出のためにアンケートで取得する<strong>推奨度をGoogle Analyticsで計測</strong>すると、推奨度の違いによる訪問や閲覧パターンがわかるので、サイト改善やリマーケティングなどの施策につなげることができます。</p><a id="more"></a><h2 id="NPS用アンケートに回答すると"><a href="#NPS用アンケートに回答すると" class="headerlink" title="NPS用アンケートに回答すると"></a>NPS用アンケートに回答すると</h2><p>本ページに<a href="https://karte.io/" target="_blank" rel="noopener">KARTE</a>を使ってアンケートを実装しました（一時停止中）。デモなので気軽に回答を送信してみてください。</p><ul><li>ページが読み込まれてから３秒後に表示されます</li><li>２回閉じると、もう表示されなくなります（テストしやすいよう無効化しました。毎回表示されます）</li><li>０〜１０の項目をクリックすると、KARTEとGoogle Analyticsでデータが記録されます<ul><li>「閉じる」をクリックしないと記録されません（テンプレートの仕様なのでカスタマイズ可能）</li></ul></li></ul><h2 id="Google-Sheetsのレポートに自動反映される"><a href="#Google-Sheetsのレポートに自動反映される" class="headerlink" title="Google Sheetsのレポートに自動反映される"></a>Google Sheetsのレポートに自動反映される</h2><p>Google Analyticsで計測されたイベントのデータを<a href="https://docs.google.com/spreadsheets/d/14KiWRaWSqkPfXfxzTf5huk1u_MIJ1ITr_TJsgCjXaek/edit?usp=sharing" target="_blank" rel="noopener">１時間に一度自動更新するGoogle Sheet</a>を作りました。公開しておくので自由にみてみてください。</p><p><a href="https://docs.google.com/spreadsheets/d/14KiWRaWSqkPfXfxzTf5huk1u_MIJ1ITr_TJsgCjXaek/edit?usp=sharing" target="_blank" rel="noopener"><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/demo-nps-analytics-report.png" alt="" sizes="100vw" /></a></p><ul><li>数字とグラフの部分は全て自動で更新されます</li><li>スプレッドシートをコピー（複製して保存）すると自由に編集できるようになります</li></ul><p>回答データは通常はKARTEの管理画面からCSVでダウンロードします。GAで計測するのは、以下がメリットです。</p><ul><li>Google Sheetsと組み合わせると柔軟なレポートを自動化しやすい</li><li>GAでセグメントを作成できる<ul><li>回答者の前後の動きを追える</li><li>セグメントをリマーケティングの対象にできる</li></ul></li></ul><h2 id="真似する方法"><a href="#真似する方法" class="headerlink" title="真似する方法"></a>真似する方法</h2><p>KARTE自体のレポート機能よりも多くのディメンションや指標を使って長期の間接効果も把握したいので、アンケートが表示されたタイミング（KARTEの接客時）と、送信時の回答をGoogle Analyticsで計測します。</p><h3 id="アンケート回答を計測するためのKARTE接客サービスを作る"><a href="#アンケート回答を計測するためのKARTE接客サービスを作る" class="headerlink" title="アンケート回答を計測するためのKARTE接客サービスを作る"></a>アンケート回答を計測するためのKARTE接客サービスを作る</h3><p>表示されたKARTE接客に反応して回答を送信した時に、その回答内容を計測するため、KARTEの接客サービスを一つ作成します。</p><ul><li>Webhookのテンプレートを使ってMeasurement ProtocolでGAにデータを送信する</li><li>対象イベントは「アンケート回答が存在する」を指定する</li><li>自力でできない場合はプレイド社から有償のテンプレートを入手するとサポートを受けられる</li></ul><h3 id="表示を計測するためのKARTE接客サービスを作る"><a href="#表示を計測するためのKARTE接客サービスを作る" class="headerlink" title="表示を計測するためのKARTE接客サービスを作る"></a>表示を計測するためのKARTE接客サービスを作る</h3><p>さらにアンケート表示も計測するには、KARTEのGA連携機能が便利です。テンプレート「GA cid取得_接客イベント送信（tracker名指定）」をプレイド社から入手し（有償）、接客サービスを作成します。通常のタグ導入の場合は通常版を、GTMやカスタマイズによってトラッカー名が変更されている場合はtracker名指定版を追加します。</p><p>これは汎用的な計測用の「接客サービス」です。一つ作ると全ての接客を計測できるようになります。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/demo-nps-karte-1b.png" alt="" sizes="100vw" /><p>KARTE接客の表示をもれなく全員分GAで計測するため、<strong>「未実施時」は使いません</strong>。名前がランダムで設定されている上のアクションに名前をつけて、表示率を<strong>100%</strong>にしてから、その編集画面に移動します。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/demo-nps-karte-3.png" alt="" sizes="100vw" /><ul><li>GTMでGAを導入している場合はトラッカー名を変更</li><li>KARTEのVisitor IDをセットするカスタムディメンション番号を指定</li><li>KARTEに会員IDを送信している場合は「user_id送信設定」でGAのカスタムディメンション番号を指定</li><li>「cid送信設定」では、GAのClient IDをセットするカスタムディメンション番号を指定</li><li>「ga_event送信設定」では、KARTEのどの接客のどのアクションが表示されたかを計測するためにGAのイベントカテゴリ、イベントアクション、イベントラベルを指定</li></ul><p>続いて、「接客サービスが表示されたら」という条件の配信トリガーを設定します。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/demo-nps-karte-2.png" alt="" sizes="100vw" /><p>保存して公開すれば設定完了。KARTEの接客が表示された時点でGAのイベントを計測できるようになりました。</p>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;効果測定はアナリティクス活用方法の１つでしかなく、顧客理解やセグメント発見も重要です。例えば、NPS算出のためにアンケートで取得する&lt;strong&gt;推奨度をGoogle Analyticsで計測&lt;/strong&gt;すると、推奨度の違いによる訪問や閲覧パターンがわかるので、サイト改善やリマーケティングなどの施策につなげることができます。&lt;/p&gt;
    
    </summary>
    
    
    
      <category term="Google Analytics" scheme="https://makoto-shimizu.com/tags/Google-Analytics/"/>
    
      <category term="Demo" scheme="https://makoto-shimizu.com/tags/Demo/"/>
    
  </entry>
  
  <entry>
    <title>Demo 02. ECサイトで商品の検討スコアリング</title>
    <link href="https://makoto-shimizu.com/news/demo/product-scoring/"/>
    <id>https://makoto-shimizu.com/news/demo/product-scoring/</id>
    <published>2018-08-14T15:00:00.000Z</published>
    <updated>2024-03-18T04:25:51.531Z</updated>
    
    <content type="html"><![CDATA[<p>効果測定はアナリティクス活用方法の１つでしかなく、顧客理解やセグメント発見も重要です。例えばECにおける売上データは事業パフォーマンスの把握に役立ちますが、顧客の理解には不十分です。<br>そこで、見込み顧客がどの商品をどれくらい真剣に検討しているかを数値化するデモを作ってみました。サンプルECサイトと実データのレポートも大公開！</p><a id="more"></a><h2 id="DEMO"><a href="#DEMO" class="headerlink" title="DEMO"></a>DEMO</h2><p>サンプルサイトの<a href="https://store.concept-diagram.com/products/detail/3" target="_blank" rel="noopener">この商品詳細ページ</a>を開いて、以下のいずれかの検討アクションを行うと、それぞれ点数が加算されていきます。<br><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/demo-product-scoring-page.png" alt="" sizes="100vw" /></p><ul><li>写真の切り替え</li><li>サイズの選択</li><li>お気に入り追加</li><li>メーカーサイトへのリンクのクリック</li><li>レビューの全体表示</li></ul><div class="alert info"><p>GAサーバーへデータが送信されてスコアが加算されると、マリオのコインGET音が鳴ります</p></div><h2 id="Google-Sheetsのレポートに自動反映される"><a href="#Google-Sheetsのレポートに自動反映される" class="headerlink" title="Google Sheetsのレポートに自動反映される"></a>Google Sheetsのレポートに自動反映される</h2><p>結果は<a href="https://docs.google.com/spreadsheets/d/18O428V6gBE8X20WKqt7bHgDs9ePcCTCcouOFHTMRgyY/edit?usp=sharing" target="_blank" rel="noopener">このGoogle Sheets</a>に1時間に1回、自動反映されます。</p><ul><li>スプレッドシートをコピー（複製して保存）すると自由に編集できるようになります</li></ul><h2 id="真似してみよう"><a href="#真似してみよう" class="headerlink" title="真似してみよう"></a>真似してみよう</h2><ol><li>商品詳細ページ上の検討系アクションをGAでイベント計測する</li><li>Google Sheetを作成し、Googleアナリティクスのアドオンを使ってデータを抽出する（上記のシートを参考に）</li></ol>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;効果測定はアナリティクス活用方法の１つでしかなく、顧客理解やセグメント発見も重要です。例えばECにおける売上データは事業パフォーマンスの把握に役立ちますが、顧客の理解には不十分です。&lt;br&gt;そこで、見込み顧客がどの商品をどれくらい真剣に検討しているかを数値化するデモを作ってみました。サンプルECサイトと実データのレポートも大公開！&lt;/p&gt;
    
    </summary>
    
    
    
      <category term="Google Analytics" scheme="https://makoto-shimizu.com/tags/Google-Analytics/"/>
    
      <category term="Demo" scheme="https://makoto-shimizu.com/tags/Demo/"/>
    
  </entry>
  
  <entry>
    <title>Demo 01. B2Bのリードを閲覧履歴でスコアリング</title>
    <link href="https://makoto-shimizu.com/news/demo/lead-scoring/"/>
    <id>https://makoto-shimizu.com/news/demo/lead-scoring/</id>
    <published>2018-07-21T08:19:00.000Z</published>
    <updated>2024-03-18T04:25:51.531Z</updated>
    
    <content type="html"><![CDATA[<p>効果測定はアナリティクス活用方法の１つでしかなく、顧客理解やセグメント発見も重要です。例えば、資料請求のリード一覧にGAの閲覧履歴を合わせると、見込み顧客の関心エリアや本気度がわかるので、営業アプローチする際の参考になります。有料ツール（MA）を使わずに無料GAで実装してみました。</p><a id="more"></a><p>以下のフォームに記入して送信すると、その内容とGAの閲覧履歴データがClient ID単位で結合されてGoogle Sheetsに自動反映されます。</p><div class="form-box"><form action="javascript: postToGoogle()">    <b>夏は好きですか？</b>    <div>    <input type="radio" id="qs1" name="qs1" value="はい" />    <label for="qs1">はい</label>　    <input type="radio" id="qs2" name="qs1" value="いいえ" />    <label for="qs2">いいえ</label>    </div>    <div>    <b>理由は？</b>    <textarea name="kotae"></textarea>    </div>    <button type="submit" class="post-action-btn btn" disabled>      送信する    </button></form></div><style>.form-box {  max-width: 400px;  margin: auto;  padding: 30px;  border: 10px solid #f2f2f2;}textarea {  width: 100%;}</style><ul><li>入力内容は<a href="https://docs.google.com/spreadsheets/d/1LJsKR3eyBy34apzdVgtYV8d3mZT-mp3kA0pgV7oLAiw/edit#gid=406719613" target="_blank" rel="noopener">この公開Spreadsheetに反映される</a>ので個人情報は入力しないでください</li><li>GAのデータは毎日更新されます（2024年現在は一時停止しています）</li><li>スプレッドシートをコピー（複製して保存）すると自由に編集できるようになります</li></ul><h2 id="真似してみよう"><a href="#真似してみよう" class="headerlink" title="真似してみよう"></a>真似してみよう</h2><ol><li><a href="https://www.google.com/forms/about/" target="_blank" rel="noopener">Google Forms</a>でフォームを作る</li><li>本ページを参考にしてフォームのHTMLページを作る</li><li>フォームを含むサイト全体にGAを導入し<a href="/news/how-to-measure-google-analytics-client-id-with-gtm-2017/">client IDをカスタムディメンションへ入れる</a></li><li>Google Formsによって回答が自動記入されるGoogle SheetsにGAのアドオンを入れてGAデータを抽出し、定期実行をONにする</li><li><a href="https://docs.google.com/spreadsheets/d/1LJsKR3eyBy34apzdVgtYV8d3mZT-mp3kA0pgV7oLAiw/edit#gid=406719613" target="_blank" rel="noopener">サンプル</a>をコピーして参考にしつつ、ビジュアライズ</li></ol>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;効果測定はアナリティクス活用方法の１つでしかなく、顧客理解やセグメント発見も重要です。例えば、資料請求のリード一覧にGAの閲覧履歴を合わせると、見込み顧客の関心エリアや本気度がわかるので、営業アプローチする際の参考になります。有料ツール（MA）を使わずに無料GAで実装してみました。&lt;/p&gt;
    
    </summary>
    
    
    
      <category term="Google Analytics" scheme="https://makoto-shimizu.com/tags/Google-Analytics/"/>
    
      <category term="Demo" scheme="https://makoto-shimizu.com/tags/Demo/"/>
    
  </entry>
  
  <entry>
    <title>Adobe AnalyticsでGDPR対策：返信・削除するデータを指定する</title>
    <link href="https://makoto-shimizu.com/news/gdpr-data-retension-aa/"/>
    <id>https://makoto-shimizu.com/news/gdpr-data-retension-aa/</id>
    <published>2018-06-01T22:50:00.000Z</published>
    <updated>2024-03-18T04:25:51.531Z</updated>
    
    <content type="html"><![CDATA[<p>GDPR準拠の要件を満たすため、Adobe Analyticsにも保持期間の設定とそれを超えたデータの自動削除機能が実装されました。Googleアナリティクスの場合は一部の集計データのみ残るという仕様ですが、Adobe Analyticsの場合はざくっと<strong>月単位で全部消えます</strong>。一方、個人から受け付けるGDPR要求の対応に関しては、<strong>返すべきデータと消すべきデータを細かく設定</strong>できます。</p><a id="more"></a><h2 id="保持期間は契約次第"><a href="#保持期間は契約次第" class="headerlink" title="保持期間は契約次第"></a>保持期間は契約次第</h2><p>Adobe Analyticsのデータ保持期間は、Adobeとの契約書で25ヶ月などと定められています。2018年5月23日よりも前に契約した場合、1年間のオマケがついるはずです。</p><p>まず、保持期間がどう設定されているかの現状を確認してみましょう。Analyticsにログインし、「<strong>管理者</strong>」メニューの中にある「<strong>データガバナンス</strong>」をクリックします。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gdpr-aa-datagovernance.png" alt="" sizes="100vw" /><ul><li>この例では37ヶ月になっています</li><li>保持期間の変更はAdobeに依頼する必要があります</li><li>短縮は無償、延長には追加の費用がかかります</li></ul><h3 id="月単位で全部消える"><a href="#月単位で全部消える" class="headerlink" title="月単位で全部消える"></a>月単位で全部消える</h3><p>削除は月単位で行われます。毎月一度、期限を過ぎた月のデータが消えていきます。<br>例えば2018年6月2日現在、以下のように2015年3月31日までのデータが削除されてレポートに表示されなくなっていることを確認できました。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gdpr-aa-data-deleted.png" alt="" sizes="100vw" /><p>参考：<a href="https://marketing.adobe.com/resources/help/ja_JP/reference/data-retention-client-table-faq.html" target="_blank" rel="noopener">データ保持に関する公式FAQ</a></p><h2 id="GDPR要求の対象データを特定するラベル付け"><a href="#GDPR要求の対象データを特定するラベル付け" class="headerlink" title="GDPR要求の対象データを特定するラベル付け"></a>GDPR要求の対象データを特定するラベル付け</h2><p>個人（データ主体）からのデータのアクセスや削除要求への対応については、細かい設定が可能です。「可能」というより、設定は必須です。全てのデータ（ディメンションと指標）に、方針を表すラベルを設定しておく必要があります。</p><p>データガバナンスの画面でレポートスイートをクリックすると、その設定を確認・変更できます。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gdpr-aa-data-labels.png" alt="" sizes="100vw" /><p>標準的なディメンションと指標のみ、便宜的にデフォルトでいくつかの設定がされた状態になっていますが、Adobeが法的な責任を持つ訳ではないので、<strong>導入企業が判断して追加や変更する必要があります</strong>。特にカスタムディメンション（eVar, Prop）や指標（event）は、全て無設定の状態になっているはずです。</p><h4 id="ラベルで分類すべきデータ"><a href="#ラベルで分類すべきデータ" class="headerlink" title="ラベルで分類すべきデータ"></a>ラベルで分類すべきデータ</h4><ul><li><strong>IDデータ</strong>：個人を直接・間接的に特定できるデータ</li><li><strong>機密データ</strong>：地理情報などプライバシーに関わるデータ（センシティブなデータの誤訳）</li><li><strong>データガバナンス</strong>：GDPR要求を受けた際に対象とするデータ<ul><li>個人データのアクセス・削除を要求した個人を特定するためのキーとするデータ</li><li>アクセス（開示・送付）要求を受けた場合に返送すべきデータ</li><li>削除要求を受けた場合に削除すべきデータ</li></ul></li></ul><p>すべてのディメンションと指標を、これらの3カテゴリごとに分類します。GDPR対応に直接的に必要なのは3つ目の「データガバナンス」ですが、その設定のために「IDデータ」と「機密データ」も設定しておく必要があります。</p><p>参考：<a href="https://marketing.adobe.com/resources/help/ja_JP/analytics/gdpr/gdpr_labels.html" target="_blank" rel="noopener">GDPRラベル関する公式ヘルプ</a></p><h3 id="1-IとID-どのディメンションで個人を特定するか？"><a href="#1-IとID-どのディメンションで個人を特定するか？" class="headerlink" title="1. IとID - どのディメンションで個人を特定するか？"></a>1. IとID - どのディメンションで個人を特定するか？</h3><p>まず、個人を特定できるデータにI1またはI2ラベルをつけます。</p><ul><li><strong>I1</strong>（個人を直接的に特定可能）：名前やEmailアドレス、住所など、それだけで個人を特定できるデータ</li><li><strong>I2</strong>（個人を間接的に特定可能）：会員IDやオンライン識別子（訪問者ID、ECID、MCID）など、社外のデータを含む他のデータと組み合わせることで個人を特定できるデータ</li></ul><p>アナリティクスの場合、I1のデータを収集することは基本的に無く、オンライン識別子はデフォルトでI2が設定されているので、実際には会員IDなどをeVarに入れている場合のみ追加でI2を付与することになると思います。</p><p>次に、アクセスや削除の要求をした本人（データ主体）を特定するためのID（キー）を選定します。本人確認をしないと、他人のセンシティブなデータを送付してしまい、データ漏えいにつながるリスクがあるためです。本人確認をどの程度どのようにして行うかの運用フローは、慎重な検討が必要です。例えば、IPアドレスは個人を間接的に特定できるI2に該当しますが、同じIPが別のデバイスで流用・共有されることがあるので、単体では本人確認できません。<br>Cookieに保存されるオンライン識別子も同様で、ブラウザまでしか特定できません。同じデバイスの同じブラウザを別の人が使うこともあるからです。<br>ログイン後に取得する会員IDなら個人レベルまで特定できますが、ログインしないサイトでは使えません。</p><p>このように、個人レベルで本人を認証できたのか、それともブラウザやデバイスまでしか特定できていないのか、によって、返信や削除するデータの種類を変える必要があります。以下のラベルによって、このレベルを区別した上で本人特定に使えるディメンションを指定します。</p><ul><li><strong>ID-PERSON</strong>：認証済みユーザー（特定のユーザー）の識別に使用するID</li><li><strong>ID-DEVICE</strong>：デバイス（ブラウザ）の識別に使用するID</li></ul><p>I1やI2のラベルをつけたディメンションの中から慎重に選んだ1〜2個のディメンションのみに、データガバナンスの以下のラベルを付与することになります。</p><p>参考：<a href="https://marketing.adobe.com/resources/help/ja_JP/analytics/gdpr/gdpr_analytics_ids.html" target="_blank" rel="noopener">GDPRラベル設定のIDに関する公式ヘルプ</a></p><h3 id="2-ACC-どのデータを返送すべきか？"><a href="#2-ACC-どのデータを返送すべきか？" class="headerlink" title="2. ACC - どのデータを返送すべきか？"></a>2. ACC - どのデータを返送すべきか？</h3><p>GDPRでは、自分の個人データにアクセスする（送付してもらう）権利が保障されています。このデータのアクセス要求を個人から受け付けた場合に、どのデータを抽出して返送するのかを決めて、それぞれにデータガバナンスのACCラベルを付与します。</p><ul><li><strong>ACC-ALL</strong>：ECIDなどID-DEVICEが付与されたディメンションでゆるくデータを特定できた場合に返送するデータ</li><li><strong>ACC-PERSON</strong>：会員IDなどID-PERSONが付与されたディメンションで本人を認証できた場合のみ返送するデータ</li></ul><p>この設定もまた、他人のセンシティブなデータを送付してしまわないよう、慎重な検討が必要です。そのため、デフォルト設定では、最低限の標準ディメンションにのみACC-ALLが設定されています。それだけでは足りないので、残りの標準・カスタムディメンションにもACC-ALLまたはACC-PERSONを設定する必要があります。</p><p>オンライン識別子だけでアクセス要求を受け付けた場合にどこまでデータを開示すべきかは判断が必要です。<a href="https://marketing.adobe.com/resources/help/ja_JP/analytics/gdpr/gdpr_analytics_ids.html" target="_blank" rel="noopener">Adobeの公式ヘルプ</a>では以下のように説明されているのみで、どのデータにACC-ALLを付与すべきかの方針については書かれていません。</p><blockquote><p>アクセスラベルが多くの変数に適用されることが期待されます。ただし、自社の法務チームと相談し、収集したデータのうちどれをデータ主体と共有するかを決めるのは、お客様次第です。</p></blockquote><p>日本語がわかりにくいですが、「ほぼ全てのデータにACC-ALLまたはACC-PERSONのどちらかを付与するのが良いと思うけど自己判断でよろしく」という意味だと私は解釈しています。社内で議論し、例えば「全てのデータを隠さず返送するのが基本、ただし重複や類似データは省略、地域や検索キーワードや閲覧商品などセンシティブなデータは確実に本人認証できた場合のみ返送する」というようなポリシーを決める必要があります。どこまでをセンシティブとみなすのかがポイントですね。サイトによっては、閲覧したページもセンシティブな情報になり得ます。リファラや広告用パラメータなども、普段のオンライン行動癖が漏洩するので、微妙なところです。</p><h3 id="3-DEL-データの削除はIDとの紐付け解除が目的"><a href="#3-DEL-データの削除はIDとの紐付け解除が目的" class="headerlink" title="3. DEL - データの削除はIDとの紐付け解除が目的"></a>3. DEL - データの削除はIDとの紐付け解除が目的</h3><p>データの削除（匿名化）はデータと個人（ブラウザ）を紐付けできなくするのが目的なので、削除対象はディメンションのみ、その数はACCよりも圧倒的に少なくなるはずです。該当ディメンションの値はランダムな値で置き換えられ、同じヒットで送信されるその他のデータはそのまま残ります。元の値とランダム値は１：１の関係になるので、ユニーク性や連続性は維持されます。</p><p>どのデータを匿名化すればヒットと個人やブラウザが紐付かなくなるのかを調査・検討し、データガバナンスのDELラベルを付与します。</p><ul><li><strong>DEL-DEVICE</strong>：ECIDなどID-DEVICEが付与されたディメンションでゆるく特定できた場合に匿名化すべきディメンション（I1, I2, S1のいずれかも必要）</li><li><strong>DEL-PERSON</strong>：会員IDなどID-PERSONが付与されたディメンションで本人を認証できた場合にのみ匿名化すべきディメンション（I1, I2, S1のいずれかも必要）</li></ul><p>参照：<a href="https://marketing.adobe.com/resources/help/ja_JP/analytics/gdpr/gdpr_labeling_example.html" target="_blank" rel="noopener">ラベルを付与してアクセスや削除を実行するとどんなデータがどう変わるのかの具体例</a> - Adobe公式ヘルプ</p><h2 id="まとめ"><a href="#まとめ" class="headerlink" title="まとめ"></a>まとめ</h2><p>以上、Adobe AnalyticsのGDPR対策としての新機能について紹介しました。取得・保管する全てのデータを吟味し、２段階でプライバシー性（センシティブ性）を定義した上で、アクセスや削除要求に1ヶ月以内に対応できる運用プロセスを構築する必要があります。準備や社内調整に時間がかかるので、実際のリクエストが来る前に決めておくと良いでしょう。</p><p>なお、Googleアナリティクスの場合は、期限を過ぎたデータは個人やブラウザとの紐付けができなくなるようなデータの匿名化を行い、削除依頼があった場合はそのデータを完全削除するようです。期限を過ぎたら全部消し、削除依頼があったデータは個人やブラウザとの紐付けができなくなるようなデータの匿名化を行う、という逆のアプローチですね。GDPR施工の直前になって、それぞれが前例のない中で仕様を決めたためでしょう。GDPRの解釈はまだ曖昧なので、追加情報や前例が増えるにつれて仕様も変わっていくと思われます。</p>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;GDPR準拠の要件を満たすため、Adobe Analyticsにも保持期間の設定とそれを超えたデータの自動削除機能が実装されました。Googleアナリティクスの場合は一部の集計データのみ残るという仕様ですが、Adobe Analyticsの場合はざくっと&lt;strong&gt;月単位で全部消えます&lt;/strong&gt;。一方、個人から受け付けるGDPR要求の対応に関しては、&lt;strong&gt;返すべきデータと消すべきデータを細かく設定&lt;/strong&gt;できます。&lt;/p&gt;
    
    </summary>
    
    
    
      <category term="Adobe Analytics" scheme="https://makoto-shimizu.com/tags/Adobe-Analytics/"/>
    
      <category term="Privacy" scheme="https://makoto-shimizu.com/tags/Privacy/"/>
    
  </entry>
  
  <entry>
    <title>GDPR対策のためにCookie利用の同意を得る方法</title>
    <link href="https://makoto-shimizu.com/news/gdpr-cookie-consent-manager/"/>
    <id>https://makoto-shimizu.com/news/gdpr-cookie-consent-manager/</id>
    <published>2018-05-20T02:20:00.000Z</published>
    <updated>2024-03-18T04:25:51.531Z</updated>
    
    <content type="html"><![CDATA[<p><a href="/news/gdpr-for-analysts/">GDPRの対策としてWebアナリストがすべきこと</a>の記事の中で、個人データの取得には同意が必要、と書きました。その具体的な方法と注意点について紹介します。</p><a id="more"></a><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gdpr-consent-manager2.png" alt="" sizes="100vw" /><div class="alert info"><p>以下は技術情報です。対応の必要性については法務担当や専門家に相談してください。</p></div><h2 id="同意を得るだけでは足りない"><a href="#同意を得るだけでは足りない" class="headerlink" title="同意を得るだけでは足りない"></a>同意を得るだけでは足りない</h2><p>プライバシー保護のために個人データの取得に関して本人（データ主体）から明示的な同意を得るためには、以下の対応が必要です。</p><ul><li>初めてサイトを訪問した時に<strong>通知を表示</strong>する<ul><li>データ取得の概要を説明する</li><li>詳細はプライバシーポリシーやCookieポリシーへ誘導する</li></ul></li><li>個人データ取得の<strong>拒否（オプトアウト）</strong>を可能にする<ul><li>対象Cookieを消去する</li><li>GoogleやAdobe Analyticsへのデータ送信やCookie発行を止める</li></ul></li><li>必要に応じて個人データ取得の<strong>明示的なオプトイン</strong>を可能にする<ul><li>オプトインがあるまではGoogleやAdobe Analyticsへのデータ送信やCookie発行を止める</li></ul></li><li>オプトインやオプトアウトの選択を一定期間保存しておき、<strong>次回からは通知を表示しない</strong><ul><li>ログインが必要な会員制サイトの場合は、サーバー側の会員情報にも反映させ、別のブラウザでログインした時も選択内容が反映されるようにする</li></ul></li></ul><p>このように書き出してみると、色々な仕組みが必要なことがわかります。</p><p>「簡単だからJavaScriptで自作できそう」と思いがちですが、既存のツールを活用した方が楽なだけでなく、ツールの機能や説明ドキュメント、アップデート内容から<strong>一般的なEU企業が抱えるニーズや解決アプローチが垣間見えて参考になる</strong>というメリットもあります。</p><h2 id="オプトインの方式"><a href="#オプトインの方式" class="headerlink" title="オプトインの方式"></a>オプトインの方式</h2><p>同意の明確性によって以下のようなパターンがあります。どの方式にするかを指定できるツールもあります。</p><ol><li>通知のみ（詳細へのリンクを含む）</li><li>通知＋Opt-outボタン（デフォルトはオプトイン）</li><li>通知＋Opt-inボタン（閉じる、スクロール、他ページへの遷移などサイトの利用を継続する場合は同意とみなす）</li><li>通知＋Opt-inボタン（デフォルトはオプトアウト）</li></ol><p>下に行くほど厳格な運用になります。訪問者のIPアドレスからEU（EEA）からのアクセスを判定し、対応レベルを切り替えられるツールもあります。</p><h2 id="無料で使える同意・Cookie管理ツール"><a href="#無料で使える同意・Cookie管理ツール" class="headerlink" title="無料で使える同意・Cookie管理ツール"></a>無料で使える同意・Cookie管理ツール</h2><p>Cookie管理ツールから包括的なプライバシー管理ソリューションまで色々あります。<a href="https://iapp.org/resources/article/2018-privacy-tech-vendor-report/" target="_blank" rel="noopener">iapp.orgのPrivacy Tech Vendor Report</a>では、Consent Manager（同意管理）のカテゴリだけで36ものツールが紹介されています。</p><p>今回は、無料で使えるものを5つ紹介します。</p><h3 id="InsitesのCookie-Consent"><a href="#InsitesのCookie-Consent" class="headerlink" title="InsitesのCookie Consent"></a><a href="https://cookieconsent.insites.com/" target="_blank" rel="noopener">InsitesのCookie Consent</a></h3><p>初回訪問時の<strong>通知表示と同意取得に特化</strong>したオープンソースの無料ツール。見た目や文言を細かくカスタマイズできます。<a href="https://cookieconsent.insites.com/demos/" target="_blank" rel="noopener">デモのページ</a>で各種カスタマイズ結果を確認できます。Cookieの削除やオプトアウト機能はありません。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gdpr-consent-manager-insites.png" alt="" sizes="100vw" /><h3 id="Cookiebot"><a href="#Cookiebot" class="headerlink" title="Cookiebot"></a><a href="https://www.gdpr.ga/cookiebot" target="_blank" rel="noopener">Cookiebot</a></h3><p>通知表示と同意取得に加えて、サイトをスキャンしてCookie表を自動生成したり、EUからのアクセス時のみ機能をONにする機能もあります。デンマークのCybot社によるサービスを日本企業のクラスメソッド社が日本語化を行い、日本円による請求書対応を行なっています。</p><p>無料版は、100ページ以内のみに対応（超えたら有料プランへ自動移行）。多言語対応やカスタマイズができず、基本機能のみ。本番利用は現実的ではないので、事実上お試しプランという位置づけですね。</p><h3 id="OneTrust"><a href="#OneTrust" class="headerlink" title="OneTrust"></a><a href="https://onetrust.com/" target="_blank" rel="noopener">OneTrust</a></h3><p>機能的にはCookiebotに似ていて、通知表示と同意取得に加えて、サイトをスキャンしてCookie表を自動生成したり、EUからのアクセス時のみ機能をONにする機能もあります。本サイトはこれを採用しました。</p><p>無料版でも多言語対応やカスタマイズ、サイトをスキャンしたCookie表の自動生成、入力フォーム自動検出が可能。ただしオンライン登録したすぐ使えるようにはならず、何日か経って審査を通った場合に登録の通知メールと営業担当からの個別フォローメール（英語）が届きます。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/onetrust-registration.png" alt="" sizes="100vw" /><p>まずサイト全体を自動スキャンし、Cookieや入力フォーム、LocalStorageを検知することから始めます。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/onetrust-scan-result.png" alt="" sizes="100vw" /><p>検知したCookieは、設定内容だけでなく、データベースと照合して何のCookieなのか説明文も表示してくれます。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/onetrust-cookie-notice.png" alt="" sizes="100vw" /><p>この情報をもとにサイト上のCookie Notice（利用するCookieの説明表）ページを自動生成できます。</p><p>同意の通知は、表示場所や色、項目をカスタマイズできます。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/onetrust-cookie-banner.png" alt="" sizes="100vw" /><p>Cookieのオプトイン・オプトアウト用UIもあります。</p><h3 id="COOKIE-INFO-SCRIPT"><a href="#COOKIE-INFO-SCRIPT" class="headerlink" title="COOKIE INFO SCRIPT"></a><a href="https://cookieinfoscript.com/" target="_blank" rel="noopener">COOKIE INFO SCRIPT</a></h3><p>通知表示のみに特化した無料JavaScriptライブラリ。詳細リンクを含む通知を表示するだけで、同意の管理機能はありません。デザインや文言をカスタマイズできます。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/cookieinfoscript-demo.png" alt="" sizes="100vw" /><h3 id="CIVICのCookie-Control"><a href="#CIVICのCookie-Control" class="headerlink" title="CIVICのCookie Control"></a><a href="https://www.civicuk.com/cookie-control" target="_blank" rel="noopener">CIVICのCookie Control</a></h3><p>同意取得というよりも<strong>Cookieのオプトイン・オプトアウト管理</strong>ツール。カテゴリやツール毎に細かくCookieのON・OFFを切り替えられます。デフォルトがオプトアウト状態になっていて、ONにして明示的にオプトインする必要がある、ONからOFFに切り替えると該当Cookieが即削除される、というストリクトなポリシーが前提。イギリスの公的機関ICOが採用しています。</p><p>無料版は、初回訪問時にお知らせを表示することができない、見た目のカスタマイズが限定される、ツールのAboutページへのリンクが入る、などの機能制限があります。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gdpr-consent-manager-civic.png" alt="" sizes="100vw" /><p>本サイトでは、<a href="/news/gdpr-for-analysts/">GDPRに関連したページ</a>にのみ、CIVIC Cookie Control V8を実験導入しています（デモ用なのでオプトアウトしてもCookieは消えません）。インストールと設定方法が難しく、日本語の情報も無いので、以下にメモを残しておきます。</p><h4 id="まず設定情報を入力してダウンロード（タグ取得）"><a href="#まず設定情報を入力してダウンロード（タグ取得）" class="headerlink" title="まず設定情報を入力してダウンロード（タグ取得）"></a>まず設定情報を入力してダウンロード（タグ取得）</h4><p><a href="https://www.civicuk.com/cookie-control" target="_blank" rel="noopener">Cookie Controlのサイト</a>からDownloadページへ進み、Editionを選択します。V8の場合、Community Editionは無料です。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/civic-1-edition.png" alt="" sizes="100vw" /><p>さらに、名前やEmailアドレス、サイトのドメインなどを記入していきます。</p><p>Cookieをカテゴリやツール単位で分類し、その単位でオプトイン・アウトできるのがCIVIC Cookie Controlの一番の特徴です。そのカテゴリを編集や削除、追加します（後でJavaScriptで変更することも可能）。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/civic-2-category.png" alt="" sizes="100vw" /><p>サイト下部に表示される（C）アイコンの位置（左／右）、テーマ（ダーク／ライト）を指定します。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/civic-3-appearance.png" alt="" sizes="100vw" /><p>これ以外のカスタマイズ、文字色やサイズ、背景色、アイコン、Aboutリンク削除などは有償のPRO版のみで可能です。</p><p>PRO版には、さらにEUとUKからのアクセス時のみ同意を必要とするジオロケーション機能やマルチドメイン対応、多言語対応が含まれます。</p><p>最後に規約に同意してボタンをクリックすると、APIキーが発行され、実装用タグが表示されます。</p><h4 id="Google-Tag-Managerでタグを入れる"><a href="#Google-Tag-Managerでタグを入れる" class="headerlink" title="Google Tag Managerでタグを入れる"></a>Google Tag Managerでタグを入れる</h4><p>発行されるタグは、HTMLソースにベタ張りするためのものです。</p><p>私はGoogle Tag Managerで管理するために、以下のように修正しました。</p><script src="//gist.github.com/mak00s/4ebe86efb72cd382378dc78be28f7988.js"></script><p>文言も全て日本語に変更しています。設定の詳細は<a href="https://www.civicuk.com/cookie-control/v8/documentation" target="_blank" rel="noopener">公式ドキュメント</a>をどうぞ。</p><h4 id="オプトアウト時にGoogleアナリティクスを無効化"><a href="#オプトアウト時にGoogleアナリティクスを無効化" class="headerlink" title="オプトアウト時にGoogleアナリティクスを無効化"></a>オプトアウト時にGoogleアナリティクスを無効化</h4><p><a href="https://tools.google.com/dlpage/gaoptout?hl=ja" target="_blank" rel="noopener">Googleが提供するブラウザのアドオン</a>を紹介してインストールしてもらうのは昔の方式です。手間がかかるだけでなく、サイトに関わらずGoogleアナリティクスへのデータ送信が全て止まってしまうので、特定のサイトのみGoogleアナリティクスを無効化する<strong>新方式が望ましい</strong>です。</p><p>Googleアナリティクスのプロパティ単位でオプトアウトするには、</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">window[&#39;ga-disable-UA-XXXXX-Y&#39;] &#x3D; true;</span><br></pre></td></tr></table></figure><p>を、<strong>GAへのデータ送信よりも前のタイミングで</strong>セットします。</p><p>参照：<a href="https://developers.google.com/analytics/devguides/collection/analyticsjs/user-opt-out" target="_blank" rel="noopener">GA公式ヘルプ</a></p><p>タイミングの制御が難しいので、Cookie Controlのオプトイン時に実行されるfunctionの中にGAのタグを、オプトアウト時に実行されるfunctionの中に上記のGA無効化のJavaScript文を入れるのが確実で楽です。</p><script src="//gist.github.com/mak00s/9081be5898e94c571b0dacb0925979f2.js"></script><p>onAcceptのfunctionは、オプトインした時と、次回の訪問時を含む以降のページ閲覧時に毎回実行されます。</p><p>タグマネージャーを使っている場合は、onAcceptのfunctionの中でDataLayerのイベントを発生させ、それをタグマネージャーのトリガーとしてGAの計測をすると良いでしょう。</p><h2 id="要件を決めてから選定と導入を"><a href="#要件を決めてから選定と導入を" class="headerlink" title="要件を決めてから選定と導入を"></a>要件を決めてから選定と導入を</h2><p>以上、CIVICのCookie Control V8について詳しく紹介しました。これは明示的にオプトインしないとCookieをセットしない、というかなりストリクトなポリシーを前提としているので、日本では<a href="https://cookieconsent.insites.com/" target="_blank" rel="noopener">InsitesのCookie Consent</a>の方が要件に合うかもしれません。</p><p>通知のみで良いのか、オプトアウトの方法を伝えるだけで良いのか、明示的なオプトインを必要とするのか。また、サイト全体でざっくりとオプトイン・アウトすれば良いのか、それともカテゴリごとに細かい制御をするのが望ましいのか。通知はどの程度目立たせるべきか？ビジネスと顧客の双方の視点で要件を決めてから、どのツールがベストなのかを選択すると良いでしょう。</p>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;&lt;a href=&quot;/news/gdpr-for-analysts/&quot;&gt;GDPRの対策としてWebアナリストがすべきこと&lt;/a&gt;の記事の中で、個人データの取得には同意が必要、と書きました。その具体的な方法と注意点について紹介します。&lt;/p&gt;
    
    </summary>
    
    
    
      <category term="Google Analytics" scheme="https://makoto-shimizu.com/tags/Google-Analytics/"/>
    
      <category term="Privacy" scheme="https://makoto-shimizu.com/tags/Privacy/"/>
    
  </entry>
  
  <entry>
    <title>GDPR対策のためにアナリティクスのIPアドレスを匿名化する方法</title>
    <link href="https://makoto-shimizu.com/news/gdpr-ip-anonymization-in-analytics/"/>
    <id>https://makoto-shimizu.com/news/gdpr-ip-anonymization-in-analytics/</id>
    <published>2018-05-18T03:52:00.000Z</published>
    <updated>2024-03-18T04:25:51.531Z</updated>
    
    <content type="html"><![CDATA[<p><a href="/news/gdpr-for-analysts/">GDPRの対策としてWebアナリストがすべきこと</a>の記事の中で取り上げた、不要な個人データを匿名化する方法の一つとしてGAやAAでIPアドレスを匿名化する方法と注意点について。GAの場合、訪問者のIPアドレスをレポート画面で表示することはできませんが、システム内部に保存されています。GDPRでは、個人データを取得し保存しているだけで、ツールベンダーや代理店ではなく事業会社のデータ管理責任が問われるので要注意。</p><a id="more"></a><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gdpr-ip-anonymization-in-analytics.png" alt="" sizes="100vw" /><div class="alert info"><p>日本向けの日本語のみサイトでここまで対応すべきか、は法務と相談してください。</p></div><h2 id="Googleアナリティクスの場合"><a href="#Googleアナリティクスの場合" class="headerlink" title="Googleアナリティクスの場合"></a>Googleアナリティクスの場合</h2><p><a href="https://support.google.com/analytics/answer/2763052?hl=ja" target="_blank" rel="noopener">GA公式ヘルプ</a>を見ながら設定しましょう。</p><p>GAのタグをHTMLソースにベタ張りしている場合は、<strong>pageviewを送信するよりも前（上）に以下のようなコードを追加</strong>します。</p><p>gtag.jsの場合</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gtag(<span class="string">'config'</span>, <span class="string">'UA-********-*'</span>, &#123; <span class="string">'anonymize_ip'</span>: <span class="literal">true</span> &#125;);</span><br></pre></td></tr></table></figure><p>ga.jsの場合</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ga(<span class="string">'set'</span>, <span class="string">'anonymizeIp'</span>, <span class="literal">true</span>);</span><br><span class="line">ga(<span class="string">'send'</span>, <span class="string">'pageview'</span>);</span><br></pre></td></tr></table></figure><p>analytics.jsの場合</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">_gaq.push([<span class="string">'_gat._anonymizeIp'</span>]);</span><br><span class="line">_gaq.push([<span class="string">'_trackPageview'</span>]);</span><br></pre></td></tr></table></figure><div class="alert warning"><p>実装方法によっては他の書き方もあります</p></div><p>Google Tag ManagerでGAを実装している場合は、GAタグの詳細設定で「<strong>anonymizeIp</strong>」というフィールドを追加します。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/gtm-ga-ip-anonymization.png" alt="" sizes="100vw" /><div class="alert success"><p>プライバシー保護を強化するため、ついでにforceSSLも設定しておくと良いでしょう。</p></div><h3 id="検証方法"><a href="#検証方法" class="headerlink" title="検証方法"></a>検証方法</h3><p>GAのビーコンに <strong>&amp;aip=</strong> が付与されていれば成功です。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/ga-ip-anonymization-debugging.png" alt="" sizes="100vw" /><p>サーバー側でデータが処理・保存されるよりも前の段階で、IPアドレスの一部が「0」で置き換えられるようになります。</p><h3 id="IPフィルタは更新が必要"><a href="#IPフィルタは更新が必要" class="headerlink" title="IPフィルタは更新が必要"></a>IPフィルタは更新が必要</h3><p>自分や社内からのアクセスを除外するためにIPを使ってフィルタしている場合は、最後の桁（オクテット）が0で置き換わるので、IPの指定方法を「<strong>前方が一致</strong>」方式に変えるなどの対応が必要です。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/ga-filter-by-ip.png" alt="" sizes="100vw" /><div class="alert warning"><p>0〜255の範囲でざっくりとフィルタされるのが困る場合は、GAのフィルターではなくタグマネージャーやブラウザプラグインなどの別の除外方法を検討しましょう。</p></div><h3 id="地域レポートの精度が落ちる"><a href="#地域レポートの精度が落ちる" class="headerlink" title="地域レポートの精度が落ちる"></a>地域レポートの精度が落ちる</h3><p>IPアドレスで判定している地域（都道府県・市区町村）のレポートは、元データの粒度が荒くなるので、精度が下がります。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/ga-report-region-compared.png" alt="設定前後の比較" sizes="100vw" /><p>GAのIPアドレスを他のシステムと連携させていないか確かめるなど、影響範囲を把握してから設定を変更すると良いでしょう。</p><h2 id="Adobe-Analyticsの場合"><a href="#Adobe-Analyticsの場合" class="headerlink" title="Adobe Analyticsの場合"></a>Adobe Analyticsの場合</h2><p>管理画面（レポートスイートマネージャー）の「一般的なアカウント設定」だけで対応可能です。</p><img src="//res.cloudinary.com/mak00s/f_auto,w_auto:200:800/aa-rs-manager-ip-obfuscation.png" alt="設定前後の比較" sizes="100vw" /><h4 id="IPアドレスの最後のオクテットを0に置き換える"><a href="#IPアドレスの最後のオクテットを0に置き換える" class="headerlink" title="IPアドレスの最後のオクテットを0に置き換える"></a>IPアドレスの最後のオクテットを0に置き換える</h4><p>GAと同じ方式です。IP除外よりも先に置き換えられるので、GAと同様にフィルタ設定を見直す必要があります。</p><h4 id="IPアドレスを不明化"><a href="#IPアドレスを不明化" class="headerlink" title="IPアドレスを不明化"></a>IPアドレスを不明化</h4><p>IPアドレスをハッシュ化された文字列で置き換えます。IP除外や地域特定の処理が行われた後に不明化されるので、IP除外の設定変更は不要です。</p><h4 id="IPアドレスを削除"><a href="#IPアドレスを削除" class="headerlink" title="IPアドレスを削除"></a>IPアドレスを削除</h4><p>IPアドレスを一律の固定文字列（x.x.x.x）で置き換えます。EMEA向けのレポートスイートでは、これがデフォルトで有効になります。IP除外や地域特定の処理が行われた後に削除されるので、IP除外の設定変更は不要です。</p>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;&lt;a href=&quot;/news/gdpr-for-analysts/&quot;&gt;GDPRの対策としてWebアナリストがすべきこと&lt;/a&gt;の記事の中で取り上げた、不要な個人データを匿名化する方法の一つとしてGAやAAでIPアドレスを匿名化する方法と注意点について。GAの場合、訪問者のIPアドレスをレポート画面で表示することはできませんが、システム内部に保存されています。GDPRでは、個人データを取得し保存しているだけで、ツールベンダーや代理店ではなく事業会社のデータ管理責任が問われるので要注意。&lt;/p&gt;
    
    </summary>
    
    
    
      <category term="Google Analytics" scheme="https://makoto-shimizu.com/tags/Google-Analytics/"/>
    
      <category term="Privacy" scheme="https://makoto-shimizu.com/tags/Privacy/"/>
    
  </entry>
  
</feed>
