爆速サイト構築に挑戦4.Netlify CMSでコンテンツ編集
最新機能をフル活用してセキュアで爆速、SEOも最高のサイトを(ほぼ無料で)実現する考え方と方針についてはGatsbyとNetlifyを使って爆速サイトを2時間で構築をどうぞ。早くCMS画面でコンテンツを修正できるようにしたいので、今回はNetlify CMSを設定し、コンテンツの編集に着手します。
最新機能をフル活用してセキュアで爆速、SEOも最高のサイトを(ほぼ無料で)実現する考え方と方針についてはGatsbyとNetlifyを使って爆速サイトを2時間で構築をどうぞ。早くCMS画面でコンテンツを修正できるようにしたいので、今回はNetlify CMSを設定し、コンテンツの編集に着手します。
最新機能をフル活用して、セキュアで爆速、SEOも最高のサイトを(ほぼ無料で)実現するのがこの連載の目的です。その1ではGatsbyとNetlifyを使って爆速サイトを2時間で構築しました。まだデフォルトのダミーサイトのままなので、今回はGatsbyを設定してサイト名や構成を修正します。
最新機能をフル活用して、セキュアで爆速、SEOも最高のサイトを(ほぼ無料で)実現するのがこの連載の目的です。前回はGatsbyとNetlifyを使って爆速サイトを2時間で構築しました。今回は、新しいサーバーサイドGTMの機能を使ってセキュアかつ負荷を下げる形で2種類のGAを導入し、さらにプライバシー保護とiTP対応のためCookie管理を改善します。
CXやDX(デジタルトランスフォーメーション)が流行ってきましたが、ツールのタグを入れすぎてサイトが重い、iTPなどセキュリティ・プライバシー対策が弱いので精度が落ちた、なんて状況は避けたいですよね。
「分かりやすいデザイン」「使いやすいUI」は誰でも追求できますが、楽してWordPressを使っているようではパフォーマンスのチューニングに限界があります。ここ数年、数週間でWebの技術は驚くほど格段に進化しました。
そこで、将来のWebの進化を見据えて最先端のツールやアプローチを使って、でも(ほぼ)無料でセキュアで爆速なサイトを最短で構築することに挑戦します。
LPのような長いページの場合、表示回数(PV)よりも、どこまでスクロールしてじっくりコンテンツを読み込んだか、が重要です。GTMを使うと、画面の何パーセントまでスクロールされたか、を簡単に計測できますが、ページによってパーセントの解釈が異なり、分析が難しくなるので、ページをセクション(パーツ)に分割し、その単位で画面にN秒間以上表示された、という計測方法がオススメです。
ただし、ページの作り方に合わせてGTMの設定を追加したり削除するのは運用が大変なので、ページ制作時に決められた属性を追加するだけで、GTMの設定を変更することなく計測すると良いでしょう。
このページ自体に実装してあるので、以下のセクションそれぞれを80%以上、ブラウザの画面に表示させた状態で3秒間が過ぎると、GAでイベントが計測され、画面右上に通知が表示されます。ゆっくりスクロールしてみてください。
企業で採用されることが多いBrightcove動画。動画ごとの再生回数や完了はBrightcoveの管理画面でも調べられますが、Google AnalyticsやAdobe Analyticsなどのサイト内の行動データと統合すると、顧客体験を点ではなく線で理解できるようになります。
Brightcoveの計測をGAやAAで実装する機会は数年おきに何度もあるのですが、YouTubeと違ってBrightcoveの情報は少なく、公式サイトも散らかっていて日本語が変(ネイティブのレビューをしていない機械翻訳?)なので、メモを残しておきます。
広告やキャンペーン用のページ(LP)は、情報を詰め込んで長くし、離脱につながるリンクを最低限に抑えることが多いですが、色々工夫をしても、直帰率が高くなりがちですよね。直帰しているなら、せめて長い時間をかけてページをスクロールしながらコンテンツをじっくりと精読しているのか知りたいところです。どこまで見ているか、どこで去っているかがわかれば、ページの改善ヒントも得られますね。
ところが、Google Analyticsのレポートで表示される滞在時間は、直帰や離脱した場合が計測されないので、不正確です。そこで、正確に滞在時間やスクロールを計測するデモを作ってみました。
Google ColaboratoryでR言語を使うためには、追加インストールやセッション強制終了などが必要で、毎回数分間かかるという状況でしたが、2月頃にRのカーネルがこっそりと追加されたようで、面倒なハックは不要になりました。その方法についてのメモ。
Jupyter Notebookの利便性はそのままで、操作性とデータビジュアライズ機能が改善されたnteractを最近よく使っています。日本ではあまり知られていないようなので、デモ動画を作ってみました。
更新しにくいので放置しがちだったこのサイトを4月にようやくリニューアル(再構築)した時のメモ。SSL化とレスポンシブ対応は当然として、画像はDAMでデバイスに合わせて解像度とフォーマットを最適し、CDNで配信。Static Generatorなので応答が速く、セキュリティも強固。ひと昔前のエンタープライズ向けCMSを無料で実現してみました。
ユーザー単位で分析するカスタマーアナリティクスの場合、Google AnalyticsやAdobe Analyticsの画面で表示できるレポート機能が物足りないので、Data Warehouseなどで生データ(に近い集計データ)を抽出してTableauで集計することが多いですが、データが巨大だとBIツールで読み込めません。そんな時にPythonで巨大ファイルを並列処理し、不要なカラムやレコードを削除してからBIで読み込む方法についてです。
ログインできるサイトの場合、認証で使う会員ID(会員番号やユーザー名)をGoogleアナリティクスで取得しておくと、ブラウザやデバイスを超えて人単位の分析が可能になります。その実装方法についてメモ。
効果測定はアナリティクス活用方法の1つでしかなく、顧客理解やセグメント発見も重要です。例えばコンテンツマーケティングにおける単純なページ閲覧数や訪問者数は企業努力の効果を測定する指標でしかなく、顧客の理解には役立ちません。一人ひとりのサイト体験をデータを活用して理解できれば、コミュニケーション施策の立案や改善が可能になります。
そこで、訪問者がどんなトピックのコンテンツをじっくり読んでいるかをデータで把握できるデモを作ってみました。実データのレポートもリアルタイム公開!
アナリティクスをカスタマイズしたDEMOページが地味なので、Google Analyticsへデータを送信するたびに音を鳴らしたり通知トーストを表示する仕組みをGTMで実装してみました。とっても実用的で流行しそうですが(笑)、実はいろんな用途で応用できます。
効果測定はアナリティクス活用方法の1つでしかなく、顧客理解やセグメント発見も重要です。例えば、NPS算出のためにアンケートで取得する推奨度をGoogle Analyticsで計測すると、推奨度の違いによる訪問や閲覧パターンがわかるので、サイト改善やリマーケティングなどの施策につなげることができます。KARTEと無料GAで実装してみました。
効果測定はアナリティクス活用方法の1つでしかなく、顧客理解やセグメント発見も重要です。例えばECにおける売上データは事業パフォーマンスの把握に役立ちますが、顧客の理解には不十分です。
そこで、見込み顧客がどの商品をどれくらい真剣に検討しているかを数値化するデモを作ってみました。サンプルECサイトと実データのレポートも大公開!
資料請求のリード一覧にGAの閲覧履歴を合わせると、関心エリアや本気度がわかるので、営業アプローチの参考になります。有料ツール(MA)を使わずに無料GAで実装してみました。
GDPR準拠の要件を満たすため、Adobe Analyticsにも保持期間の設定とそれを超えたデータの自動削除機能が実装されました。Googleアナリティクスの場合は一部の集計データのみ残るという仕様ですが、Adobe Analyticsの場合はざくっと月単位で全部消えます。一方、個人から受け付けるGDPR要求の対応に関しては、返すべきデータと消すべきデータを細かく設定できます。
GDPRの対策としてWebアナリストがすべきことの記事の中で、個人データの取得には同意が必要、と書きました。その具体的な方法と注意点について紹介します。
GDPRの対策としてWebアナリストがすべきことの記事の中で、不要な個人データを匿名化する方法の一つとしてGAやAAにはIPアドレスを匿名化する機能がある、と書きました。その具体的な方法と注意点についてです。