As a developer, you will likely configure Tags and Triggers in GTM at some moment. React ベースのプロジェクトの GTM でクリック トリガーを開始する方法についての簡単な手順を探している場合は、正しい場所にたどり着きました。段階的に勉強していきましょう！
この記事では、Reactアプリでクリックトリガーを設定する手順を説明します。GTMの基本的な概念を理解すれば、わずかな設定で必要なタグ管理機能を利用できます。Google Tag Managerとは何か、タグとトリガーがどのように役立つかを見ていきましょう。
Google Tag Manager – GTMとは何か、およびその使用方法
Google Tag Manager (GTM) は、基本的なコード設定を行うことで、あらゆるウェブサイトやモバイルアプリにタグを簡単に統合できるタグ管理システムです。GTMを利用する主な利点は、ウェブパネルのインターフェースから直接タグの設定を変更できることです。それを踏まえた上で、GTMを扱う際に理解しておくべき3つの基本的な概念があります：
- タグは、ウェブサイトやモバイルアプリから分析データを収集して送信するコード片やトラッキングピクセル（Facebook Pixelなど）です。
- トリガーはイベントを監視し、タグを実行するタイミングを決めます。
- 変数は、タグやトリガーが必要とする追加データに関係します（例：URLが/some/urlのときにタグを実行する）。
Google Tag Managerを利用するメリットは？
Google タグ マネージャーは直感的で包括的なウェブサイトおよびデジタル マーケティング ツールであるため、ビジネスやチームにいくつかの利点をもたらします。 Google タグマネージャーを利用する主なメリットは以下の 4 つです。
1. GTM にはコーディングの知識は必要ありません
Google Tag Managerを使用すれば、マーケターを含む誰でも、高度な技術スキルなしでタグを実装できます。ユーザーフレンドリーなインターフェースにより、ウェブ開発者の助けを借りずにGTMトラッキングコードを変更、削除、追加できますが、当該分野の知識があることが推奨されます。これにより、技術的なサポートが不足している小規模企業でも、インターネットトラッキングを最大限に活用できるようになります。
2. GTMで柔軟な運用と試行が可能になる
GTMはウェブ開発者を必要としないため、マーケター自身がさまざまな手法やアイデアを試せます。外部の支援なしに実験を行い、新たなデジタルマーケティングの動向に合わせて計画を改善できます。
3. GTM はより高速なページ読み込み速度をサポートします
Google Tag Managerは、タグを同期的にではなく、非同期的に実行するように構成されています。これは、すべてのタグがロードされるのを待ってから実行されるのではなく、各タグがロード直後に展開されることを意味します。これにより、読み込み速度の遅いタグが他のタグの展開を妨げる可能性を回避できます。
4. GTM はすべてを 1 か所で管理します
GTMは、すべてのGTMトラッキングコードを個別のプラットフォームで開発・管理するのではなく、単一の場所で保持するため、タグの実装プロセス全体を簡素化し、強化します。単一のインターフェースからすべての展開済みタグを生成および表示できるため、重複や潜在的なミスを回避でき、生産性が大幅に向上します。
Google Tag Managerの目的は？
GTMは無限の数のウェブサイトおよびデジタルマーケティング活動を追跡する能力を持っていますが、ほとんどの組織はそれらのうちのほんの一部しか活用していません。
- ダウンロード数
- スクロール
- クリック数
- フォーム
- 動画
1. PDF ダウンロードを監視する
デジタル マーケティング戦略の一環として、多くの企業がガイドラインやホワイト ペーパーなどのダウンロード可能な PDF を Web サイトで提供しています。ただし、ダウンロードに関する統計にアクセスできない場合は、効果的な計画が大幅に妨げられます。
Google Tag Managerは、PDFのダウンロードを監視し、そのパフォーマンスを評価するために使用されます。ダウンロードを追跡できるようになれば、収集したデータを有用なインサイトに変換できます。
- ダウンロード数の上位と下位を特定する。
- ダウンロードが成功したか失敗したかの理由を特定する
- ダウンロードを強化するための戦略を検討し、GTMを使用して進捗を監視してください。
2. トラックのスクロール動作
ウェブサイトやページ上のスクロールアクティビティを検出できる能力も、GTMを利用するもう一つのメリットです。
人々がサイトのコンテンツをどう閲覧し、関わっているかを理解すると、サイト上の活動について有用な情報が得られます。
- ページのどの部分がよく閲覧されていますか？
- どのような情報が、より高い、あるいは低い反応を得ていますか？
- 多くの訪問者がスクロールを止める位置
GTMで収集したデータを使うと、多くのユーザーが各ページをどのように閲覧しているかを総合的に把握できます。その情報を基に、ウェブサイトのユーザー体験を改善する戦略を立てられます。
- サイトの構造化方法
- どのような資料を共有しますか？
- 改善が必要な箇所
3. リンククリックの統計と記録
Google Tag Managerの利点は、リンクのクリック、正確には訪問者がウェブサイト上でクリックしたURLを追跡できることです。ユーザーのスクロール動作だけでなく、クリックアクティビティを知ることで、ウェブサイト内でのユーザーの回遊について重要な洞察を得ることができます。
- サイトの訪問者はどのようにしてあるページから別のページへ移動するのですか？
- どの行動喚起（CTA）が最も多くクリックされていますか？
Google Tag Managerは、リンクのクリックを理解するだけでなく、そのデータを基に行動するためにも活用しましょう。
- コンバージョンを最大化するために、数クリックでサイトを更新するか、数クリックでページを調査します。
- 何がCTAの高いクリック率に寄与しているかを学び、クリック率の低いCTAのコピーを修正します。
4. フォーム送信の追跡
ニュースレターへの登録、アンケートへの回答、イベントへの申し込みは、ウェブサイト上で特定の目的と機能を持つフォームの例です。GTMはフォーム送信の正確な追跡を可能にします。
フォームの追跡にGoogle Tag Managerを使う理由：
- フォーム送信を通じて生成されたウェブサイトのリードをレポートします。
- 提出されたフォームの数に基づいてキャンペーンのROIを算出します。
5. ビデオアクティビティを監視する
動画は、ますます人気が高まるデジタルマーケティング手法です。動画コンテンツが増えるなか、人々がその情報とどう関わるかを理解する必要があります。
- 個人の動画視聴方法
- クリップをどのくらいの長さ視聴していますか？
- ビデオの視聴を完了した場合、または完了したとき
動画から得たデータは、組織の動画戦略に役立ちます。
- 今後の動画制作方法
- 読者が好むコンテンツは？
- 貴社のクライアントにとって理想的な動画の長さ
GTMアカウントの作成
無料アカウントの設定は簡単な2段階の手順ですが、既存のGoogle AnalyticsやGmailのアカウントとは別です。円滑に設定できるよう、アカウント作成手順をまとめました。画面は次のようになります：
進め方は以下の通りです：
ステップ1：アカウントを登録します。
Google タグマネージャーのページで、緑色の「無料登録」ボタンをクリックします。アカウント名（ビジネス）、国、ウェブサイトのURL、およびGoogle タグマネージャーを利用したい場所（ウェブ、iOS、Android、AMP）の入力を求められます。完了したら、青色の「作成」ボタンをクリックしてください。
ステップ2：サイトにJavaScriptコードを挿入します
コードと設置手順が表示されます。一つのコードをページのheadタグ内の上部に、もう一つを開始bodyタグの直後に設置します。今すぐ設置することも、後から設置することもできます。コードはダッシュボードで確認できます。完了したら「Ok」をクリックしてください。
ステップ3：タグを作成します
Googleタグマネージャーのアカウントを取得したら、すぐにタグを設置する方法を理解したいはずです。
Google Tag Managerでは、無制限のタグ設定が可能です。
対象顧客の行動を詳しく報告するのに役立ちますが、タグが整理されていなければ、効率が悪くなる可能性があります。
Googleはタグの命名規則として、「タグタイプ – アプリ名 – 詳細」を推奨しています。
たとえば、あるタグ設定を「AdWordsコンバージョン – iOS – 2018年2月キャンペーン」とし、別の設定を「Google Analytics – CTA – About Usページ」として識別することがあります。
これにより、特定のキャンペーンやサイトに関するデータを正確に特定・収集できます。
例えば、2番目のタグ「Google Analytics – CTA – About Us page」は、About Us（私たちについて）のコールトゥアクションボタンのパフォーマンスを示しています。この情報は重要であり、タグを「CTA button」のようなより一般的な名称にすると、失われてしまう可能性があります。
内容が明確になったので、タグの作成方法を見てみましょう：
ステップ3.1：Google Tag Managerの管理画面で新しいタグを作成します。
Google タグマネージャーのダッシュボードで、「新しいタグを追加」をクリックします（以下、赤丸で囲まれています）。
ステップ3.2：タグを設定します。
ページ上部の「タグ設定」ボックス内の任意の場所をクリックして、タグの種類を選択します。
以下にコードを直接追加できます。または、次のステップでテンプレートから始めることもできます。
ステップ3.3：タグの種類を選択します。
タグには複数の種類があります。ここにすべてが表示されているわけではなく、独自の種類も作成できます。アプリとサイトでGoogle Analyticsによる訪問者の計測を設定する場合は、「Google Analytics 4」を選んでください。
ステップ3.4：サイトのGA4に接続します
測定IDを入力する欄が表示されます。アカウントから測定IDをコピーして、この欄に貼り付けてください。
*その前に完了する必要があります ウェブサイトのGA4設定。
ステップ3.5：トリガーを選択し、タグを実行するタイミングを指定します。
トリガーを選択してください（トリガーとは、「ユーザーがページを閲覧するたび」のように、タグを記録したいタイミングのことです）。私は、ウェブページのいずれかが閲覧されるたびにデータを受け取るために「すべてのページ」を選択しましたが、選択内容は目的によって異なる場合があります。
ステップ3.6：タグを保存します。
「タグ設定」と「トリガー」ボックスの情報に満足したら、青色の「保存」ボタンをクリックしてください。
ステップ4：「送信」ボタンを押してタグを有効にします。
その後、青色の「送信」ボタンをクリックしてください。そうしないと、タグは機能しません。
「Submit」をクリックすると、「Submission Configuration」ページが表示されます。「Publish and Create Version」と「Create Version」を選択できます。サイトの全ページにタグを適用する準備ができていたため、「Publish and Create Version」を選び、画面右上の青い「Publish」ボタンをクリックしました。
ステップ5：タグを整理するために名前と説明を付けます。[任意]
最後に、この「コンテナバージョン説明」が表示されます。タグを構造化された状態に保つために、各タグに、何をキャプチャしようとしているのかを説明する名前と説明を付けてください。
WordPress向けGoogle Tag Manager
組織がウェブサイトのホスティングにWordPressを利用している場合、WordPressへのGoogleタグマネージャーの統合は、シンプルなノーコードの手順で行えます。
Site KitはGoogleが作成した公式WordPressプラグインです。Google Tag Managerなど主要なGoogleツールの導入と設定を簡素化し、ウェブで成果を上げるための信頼できる最新の指針を提供します。Site Kitが対応するGoogle製品の一覧をご確認ください。
進め方は以下の通りです：
1. WordPress アカウントにサインインします。
2. サイトが公開されていること、つまりメンテナンス モードやパスワードで保護されていないことを確認します。
3. 左側のメニューで、「プラグイン」をクリックします。
4. [プラグイン] ページの上部で [新規追加] をクリックし、「サイト キット」を検索します。
5. [Google サイト キット] ページで [今すぐインストール] をクリックします。
6. プラグインがインストールされたら、左側のメニューから「プラグイン」を選択します。
7. [Site Kit by Google] の下にある [有効化] をクリックします。
8. プラグインがアクティブ化されたら、左側の [Site Kit] をクリックします。
9. [Google でサインイン] をクリックして、Google アカウントでサインインします。
10. ウィザードに従って、Google タグ マネージャーと Google アナリティクス 4 を有効にします。
11. 許可を与えた後、「続行」をクリックしてサイトの所有権を確認します。
12. [許可] を選択して、Google アカウント情報へのアクセスを許可します。
13. Search Console にサイトを追加するには、[サイトの追加] ボタンをクリックします。
14. プラグインの設定が完了しました。
15. 「Proceed to my Dashboard」をクリックしてダッシュボードに進みます。
16. 左側のメニューから [サイト キットとダッシュボード] を選択します。
17. 「Analytics」見出しの下にある「Connect Service」をクリックします。
18. [続行] をクリックして、さらに権限を与え続けます。 Site Kit の Google アカウントへの拡張アクセスを提供し、WordPress を Google Analytics に統合し続ける方法。
19. すでに存在する分析プロパティを選択し、「分析の構成」をクリックします。
これで、アナリティクスの設定が完了しました。
まとめ
Google Analytics 4とGoogle Tag Managerを使用することで、より情報に基づいたマーケティングの意思決定が可能になり、クライアントのアクティビティのトラッキングが大幅に強化されます。
GTMを使用してこの最新バージョンを実装し、GA4が提供する柔軟性を活用してください。
GA4とGTMの導入、またはGA3からGA4へのGoogleタグ移行で支援が必要ですか？お手伝いしますので、お気軽に お問い合わせ 当社と一緒に！