あなたのサイトにGoogleタグマネージャーをインストールする方法
公開: 2022-04-12Google Tag Manager（GTM）は、ウェブサイトやモバイルアプリケーションでのタグの操作を大幅に簡素化する無料のサービスです。 GTMを使用すると、ページのコードを簡単に変更したり、新しいフラグメントを追加したり、サイトを分析システム、広告、その他のサービスと統合したりできます。
開始するには、サイトにタグマネージャーコードをインストールする必要があります。 その後、他のすべての設定は、プログラマーを介さずにサービスインターフェイスで調整できます。 Google Tag Managerと、それがGoogleAnalyticsと連携してどのように機能するかについては記事をご覧ください。 すでにこれに精通している場合は、時間を無駄にせずにGTMのインストールに進んでください。
つまり、Google Tag Managerをインストールするには、次のことを行う必要があります。
- GoogleTagManagerでアカウントとコンテナを作成します。
- サイトにGoogleタグマネージャーコードをインストールします。
- コンテナを公開します。
- GoogleTagManagerを確認してください。
1. GoogleTagManagerでアカウントとコンテナを作成します
タグマネージャーのホームページで、[登録]ボタンをクリックし、Gmailアドレスまたはその他のGoogleアカウントを使用してサインインします。
次に、TagManagerで直接アカウントを作成する必要があります。 これを行うには、[タグマネージャーにサインイン]をクリックします。
次に、[アカウントの作成]をクリックします。
アカウントの名前を考えてください—会社名を使用するのが最も便利です。 次に、国を選択し、[データをGoogleや他のサービスと匿名で共有する]（オプション）の横にあるチェックボックスをオンにして、[続行]をクリックします。
次に、コンテナを構成する必要があります。 Google TagManagerの構造とGoogleAnalyticsの構造を比較すると、コンテナはGAのリソースに相当します。 サイト全体のタグ、トリガー、変数を保存します。 1つのGTMアカウントには、ウェブサイト、モバイルアプリケーション、AMPページなどの複数のコンテナを含めることができます。 便利にするために、作成されたリソースにちなんでコンテナに名前を付けることをお勧めします。 たとえば、これはサイトのアドレスである可能性があります。
コンテナの名前を入力したら、コンテナを使用する場所（この例ではWeb ）を選択し、[作成]をクリックします。
タグマネージャーを使用するためのルールをお読みください。 ページの下部にあるチェックボックスをオンにして、GDPRに従ったデータ処理の条件に同意することを確認し、[はい]をクリックします。
この後、Webサイトにインストールする必要のあるGTMコードフラグメントを含むウィンドウが表示されます。
コードをすぐにコピーして、監視するサイトのすべてのページにインストールするか、[ OK ]をクリックして、後で最初のタグをコンテナに追加するときに実行できます。 [管理]→ [Googleタグマネージャーのインストール]で、いつでもコードを表示およびコピーできます。
2.サイトにGoogleTagManagerコードをインストールします
Webサイトの開発に精通していて、管理パネルにアクセスできる場合は、タグマネージャーのコードを簡単に追加できます。 これは、WordPressを介してこれを行う方法の例です。 それ以外の場合は、プログラマーに助けを求める必要があります。 そうしないと、ページのソースコードが破損するリスクがあります。
Google Tag Managerコードは2つのフラグメントで構成され、非同期で読み込まれます。 つまり、ページの主要部分は、GTMコンテナがロードされるのを待たずにロードを継続します。 コードの最初の部分は、ページヘッダーの開始<head>タグのできるだけ近くに配置する必要があります。
これは、最初のフラグメントの位置が高いほど、ロードが速くなるためです。 <body>タグに挿入すると、このタグを読み込む前にページを離れたユーザーに関するデータが失われるリスクがあります。
コードの2番目の部分はバックアップとして機能し、JavaScriptを無効にしたユーザーのアクションを追跡するのに役立ちます。 開始<body>タグの直後に配置する必要があります。
重要！
GTMコードは、追跡するページ、つまりサイト全体に直接配置する必要があります。 コードを非表示のiframeに配置したり、別のタグ管理システムにデプロイしたりすると、メインページでタグを正しく追跡できなくなります。
AMPページへのGoogleTagManagerのインストール
AMPテクノロジーを使用してページをすばやく読み込んでモバイルデバイスに適合させる場合は、コードの最初の部分を終了</head>タグの前に配置する必要があります。
また、コードの2番目の部分は、開始<body>タグの直後に挿入する必要があります。
3.コンテナを公開します
コンテナにタグを1つも追加していない場合でも、サイトにGTMコードをインストールした直後にタグを公開することをお勧めします。 そうしないと、コンテナで404エラーが発生します。 ただし、これは重要ではありません。 TrackJSなどの特定のサービスを使用してJavaScriptエラーを追跡している場合、404エラーがレポートに散らばります。 開発者に不必要なストレスを与えないために、空のコンテナを公開することをお勧めします—それは誰にも害を与えません。
コンテナを公開するには、タグマネージャの[ワークスペース]タブに移動し、右上隅にある[送信]ボタンをクリックします。
[公開してバージョンを作成]を選択します。 これはコンテナの最初のバージョンであるため、[バージョンの説明]フィールドは空白のままにすることができます。 次に、[公開]をクリックします。
終わり。 コンテナが公開されました。
4.Googleタグマネージャーをチェックしてください
タグマネージャコードをサイトに追加した後、特別なGoogleTagAssistant拡張機能を使用してデータが正しく転送されているかどうかを確認できます。 これはChromeブラウザへの追加であり、サイトにインストールされているGoogle製品のタグとその機能を示します。
アドオンをダウンロードしてインストールすると、Chromeツールバーにこのアイコンが表示されます
。 それをクリックして、チェックするシステムタグとページを選択します。 [完了]をクリックします。
次に、確認するページに移動して、タグアシスタントアイコンをクリックします。 拡張機能をアクティブにするには、[有効にする]をクリックします。
現在のページを更新すると、タグアシスタントにより、ページにインストールされているタグとその機能が表示されます。 緑のアイコンはデータが問題なく送信されていることを示し、青は重大な問題がないことを示し、赤は重大な問題があることを示します。
特定のタグをクリックすると、エラーの考えられる原因とその修正方法のヒントが表示されます。
タグアシスタントの詳細については、Googleヘルプをご覧ください。
さらにいくつかのヒント
サイトにGTMコードをインストールするときは、開発者にGoogleオプティマイズスニペットを同時に追加するよう依頼してください。 現時点でサイトのコンテンツを試す予定がない場合でも、これは良い考えです。 A / Bテストを実施するときはいつでも、すべての準備が整います。
このコードスニペットは、Google Optimizeコンテナを非同期でロードし、コンテナがロードされるまで元のページを表示しないために必要です。 Optimizeスニペットを使用すると、テストで変更が加えられたページが読み込まれるまで、ユーザーにはページの元のコンテンツが表示されません。
手動で挿入したタグをGoogleTagManagerに転送する場合は、データが重複しないように、サイトのコードからタグを削除することを忘れないでください。 これは重要なポイントです。
次は何ですか
サイトにコードをインストールした後、タグマネージャーインターフェイスでタグと変数を追加して構成する必要があります。 これを行う方法については、記事「Google Tag Managerとは何か」と、それを使用してGoogle Analyticsを設定する方法またはウェビナーを参照してください。一歩先を行く：GoogleTagManagerを操作するためのテクニックと微妙な点。
PS正確で完全なデータに基づいて意思決定を行うために、マーケティングアナリストが実行する必要のある20のステップのチェックリストを用意しました。 フォームに記入してください。チェックリストをメールでお送りします。