Tag: GA4

  • 図解 初心者が Google Tag Mnager の設定をする方法

    これは何?

    初めてGoogle Tag Mnager を実装する方向けの記事です。

    GTMを設定することでGoogleアナリティクスと連携して、
    サイトの訪問者がどこからきたのか、オーガニックサーチなのかTwitter, FacebookなどのSNSなのか、有料広告からなのか、といった流入元の追跡ができます。

    また、ユーザーのページ遷移をグラフィカルに分析することも可能です。

    この記事ではGTMとは何か?前提から設定方法まで図解でわかりやすく、順を追って解説します。

    この記事は2024年9月時点で最新の情報です。


    基本と前提

    グーグルタグマネージャーでは、
    Webサイトに埋め込まれたボタンのクリックや、
    他サイトからの遷移、スクロールのデータを収集できます。

    1つのGoogleアカウントに
    プロジェクトごとにGTMアカウントを作れます。

    コンテナはサービスごとに作成するのが良いでしょう。

    アカウント作成

    まずはタグマネージャーにアクセスします。
    https://tagmanager.google.com

    サイトにアクセスしたらアカウントを作成します。
    Googleアカウントをお持ちでしたら、手こずることはないでしょう。

    コンテナ作成

    コンテナはトラッキングコードを管理するバケツのようなものです。
    コンテナは通常サービスひとつに付き作成するものです。

    基本的に一つのドメインに1コンテナ作成します。
    このコンテナのひとまとまりで、タグを設定していきます。


    サイトに設定しよう

    WordPressをお使いの場合は、
    Google Site Kit のプラグインを使うのが最も簡単でしょう。

    WordPressの管理画面から Site Kit / Settings の順番にボタンを押していくと、設定の項目が出ると思います。

    詳しい設定方法はこちらの記事で解説しました。

    他サイトで他のプラグインを使う手段が紹介されていますが、
    24年9月現在WordPressユーザーはGoogle公式のSiteKitを使うのが英断です。

    その他のフレームワークをお使いの方は、
    Google Tag Mnager に最初に登録したときに、head, body に書くべきものの指示があるので、そちらに従ってください。

    最初のポップアップを消してしまった方は、
    ワークスペースの画面右上に GTMから始まるIDが書いてあります。
    そちらをクリックすると、設定方法のポップアップが再度開きます。

    正しく設定できたかの確認は、
    右上の「プレビュー」ボタンを押下すると、
    別ページが立ち上がり、出てきたURLに対してOKを押すと、
    自社サイトが立ち上がり、右下に次のようなポップアップが出ているはずです。

    Tag Assistant Connected とあれば正常に動作しています。

    タグ・トリガーと変数とは何か?

    次のセクションから具体的な使い方を解説します。
    タグマネージャーを使いこなすには基本的に以下の3つ

    • タグ
    • トリガー
    • 変数

    これを理解すれば十分扱えるようになります。

    タグとトリガーにはそれぞれ
    変数を設定することができます。

    GTMタグとトリガーと変数について

    タグ、トリガー、変数はそれぞれ、

    • 何をしたいか
    • いつするか
    • 正確には??

    を設定できます。

    タグとトリガーと変数の意味

    具体的には、

    • タグ
      • Googleアナリティクスを
    • トリガー
      • ページが開いたときに
    • 変数
      • 予約ページに遷移したか
      • 何秒スクロールできたか

    のように設定できます。

    タグマネージャータグとトリガーと変数の具体的な役割

    GA4との連携

    このセクション以降Googleアナリティクスとの連携にも触れますので、先にアナリティクスの設定もすませておいてください。
    https://analytics.google.com

    新しくタグを使いしましょう。

    タグのタブに移動して、左上の「新規」ボタンを押します。

    タグの設定をクリックします

    [Googleアナリティクス], [Googleタグ]の順番で選択していきます。

    タグIDにはアナリティクスのアカウントのタグIDをコピペしてください。

    測定IDは G- から始まる文字列です。

    タグIDはデータ[管理]の[データの収集と修正]で[データストリーム]をクリックすると、タグの設定内容が表示されます。

    これはアナリティクスの画面です。

    次にトリガーを押して、[initialization – All Pages]を選択します。

    All Pages を選択している記事もありますが、24年9月現在 initialization を選択するのが推薦です。

    できたら、名前を変更して、右上[保存]を押しましょう。

    これで完了です。

    Tag Assistant での確認

    右上プレビューから動作確認をしましょう。

    全てのページで Tag Assistant Connected になっていればOKです。

    GA4での確認

    次にGoogleアナリティクスの画面で確認します。

    GA4の画面を開いたら左のパネルから[⚙️管理]を選択します。

    下にスクロールすると、
    データの表示の中に[Debug View]の項目があります。
    これをクリックします。

    正しく実行できていれば、何時にトリガーが発火したかのログがここに記録されます。

    トリガーについて

    トリガーは発動(発火)条件のことです。
    どのタイミングで、データのカウントが行われるかを指します。

    トリガーの種類について

    トリガーには以下があります。
    箇条書きで簡単な内容をメモしました。
    (名前のままの動作のものは紹介を省略しています。)

    • ページビュー トリガー
      • ページが読み込まれた時
    • クリック トリガー
      • 全ての要素
        • リンク、画像、ボタンなど
      • リンクのみ
        • <a>タグなどのリンクの遷移のあるもののみ
    • 要素の表示トリガー
      • 選択した要素が、ユーザーに表示された際に発火
      • Id, Class タグに設定できる
    • フォーム送信トリガー
    • スクロール距離トリガー
      • ユーザーがどの程度スクロールしたかで発火
      • 縦方向、横方向に設定できる
    • YouTube動画トリガー
    • カスタムイベント トリガー
    • 履歴の変更
    • JavaScriptエラートリガー
    • タイマー トリガー
    • トリガー グループ

    参考:https://support.google.com/tagmanager/topic/7679108?sjid=14244337646739296041-AP


    テスト

    ワークスペース右上の「プレビュー」をクリックして、
    Google Tag Assistant を起動します。

    Chrome のプラグインの Tag Assistant を使おうという記事がありますが、既に使われなくなった古い方法です。


    公開

    ワークスペース右上の「公開」ボタンから、
    設定したものを本番環境に適応できます。

    バージョン管理機能もついています。

  • SEO WordPress の画像をWebPに対応させて検索パフォーマンスを上げる

    ❓ これは何

    まずはあなたのサイトの速度をチェックしてみましょう。

    Google公式のサイトの速度チェッカーを使ってみてください
    https://pagespeed.web.dev 

    自分のサイトのURLを入力すると、結果が出てくるはずです。

    今回はこれの改善の一つとして、画像系の最適化をするのに役たつPerformance Lab の使い方を紹介します。

    Performance Lab を導入する

    画像のファイル形式を Jpeg や PNG から WebP にするだけでも、
    ファイルサイズを削減できます。

    WebP形式はJpegよりも効率的な圧縮ができます。同じ画質でもWebPであればJpegよりも軽くなります。

    今回はWordPressに “Performance Lab” というプラグインを導入しましょう。

    プラグインの追加は左サイドバーの
    プラグイン / 新規プラグインを追加
    からPerformance Lab を検索してインストール、有効化すればOKです。

    プラグインを有効化したら、
    設定のタブにPerformanceの項目が追加されています。

    そちらを選択します。

    開くと次のような選択肢が出てくると思います。
    これらを有効化していきましょう!!

    設定方法

    Performance Lab には次の設定項目があります。
    それぞれの項目の説明をします。

    個人的には Performant Translations 以外は有効化していいかと思います。

    Image Placeholders

    WordPress 内のメディア ライブラリに新しくアップロードされた画像の主な色を決定して保存し、
    それを使用して、画像が読み込まれるまで表示される、フロントエンドにその色のプレースホルダー背景を作成します。

    Modern Image Formats

    WordPressで画像をアップロードする際にWebPやAVIF形式に対応させるものです。
    ホスティングサーバーがAVIFをサポートしている場合は自動的にAVIF形式の画像が作られ、サポートしていない場合はWebP形式になります。
    両方に対応している場合は、どちらの形式にするか「設定」>「メディア」で選べます。


    新しい画像をアップロードするときにだけ、これらの形式が適用されます
    既存の画像はRegenerate Thumbnailsプラグインも使えます。

    wp-cli でやると各自に出来るため、私はwp-cliで実行しました。

    wp media regenerate

    この記事でwp-cliの導入方法を解説しています。

    Performant Translations

    WordPress 6.5 以上では標準で組み込まれているので有効化する必要はないはずです!

    これは多言語対応用の機能です。

    Speculative Loading

    ユーザーの操作に基づいて特定のURLを動的に事前読み込み(プリフェッチ)や事前レンダリングできるようにします。

    デフォルトでは、ユーザーがリンクにマウスを重ねたときにWordPressのフロントエンドURLが事前レンダリングされるように設定されていますが、これは「設定」>「表示設定」の「Speculative Loading」セクションでカスタマイズできます。

    Embed Optimizer

    YouTube動画やTikTokなどの埋め込みコンテンツのパフォーマンスを最適化するために作られています。具体的には、埋め込みが画面に表示されたときにだけ読み込む「遅延読み込み」を行い、ページの読み込み中に他のリソースと競合しないようにすることで、パフォーマンスを向上させます。将来的には、さらに多くの最適化機能が追加される予定です。

    また、このプラグインは「Optimization Detective」プラグインのインストールと有効化を推奨します。このプラグインが有効な場合、訪問者の行動に基づいて、画面上部に表示される埋め込みが記録され、これらの埋め込みに対しては遅延読み込みが適用されません。遅延読み込みは読み込みに遅れを生じさせ、ユーザー体験やページのLCPスコアに悪影響を与える可能性があるためです。

    さらに、Optimization Detectiveが有効な場合、人気のある埋め込みコンテンツ(YouTube、Twitter、Vimeo、Spotify、VideoPressなど)に必要なネットワークリソースに対して事前接続リンクを追加することで、読み込み速度が向上します。

    このプラグインは設定やユーザーインターフェースがなく、インストールするだけで動作するように設計されています。

    Enhanced Responsive Images

    WordPressでのレスポンシブ画像機能を実験的に強化するものです。現在、次の機能を提供しています:

    1. テーマのレイアウト情報を使用して、sizes 属性の精度を向上させる。

    2. 遅延読み込み画像に sizes=”auto” を追加する新しいHTML仕様の実装。

    また、このプラグインは「Image Prioritizer」プラグインと連携します。このプラグインが有効になると、実際の訪問者のデータに基づいて、画面外(ページ下部)にある画像を学習し、それらの画像に対して loading=”lazy” を自動で追加します。そして、このプラグインはさらにその画像に sizes=”auto” を追加することで、遅延読み込みのパフォーマンスを向上させます。

    このプラグインには設定やユーザーインターフェースはなく、インストールするだけで自動的に動作するように設計されています。

    Embed Optimizer


    ページの表示速度を左右するLCP(Largest Contentful Paint)要素の画像読み込みを最適化します。LCP要素には、<img>タグの画像やCSSの背景画像が含まれます。テーマのレスポンシブデザインでは、異なる画面サイズ(ブレークポイント)で異なるLCP要素が存在する可能性があるため、各ブレークポイントごとにLCP画像を特定し、その画像の読み込みを優先するようにプリロードリンクが追加されます。

  • 【Google Analytics】 invalid parameter: ‘site_id’

    これは何?

    WordPress で Google Site Kit を使用していて、プラグインのアップデートなどで設定ボタンを押した際に、

    invalid parameter: 'site_id'

    というエラーが出てくる場合の対処方法です。

    なおし方

    WordPress左のサイドバーから

    ツール/ 利用可能なツール を選択します。

    タブを開くと、「Site Kit をリセット」ボタンが出てくるので、
    それを押すと、最初から設定が出来、解決します。