次の手順に沿って、ウェブサイトの Google タグ マネージャー コンテナに必要なコード スニペットをインストールします。同様の手順を使用して、他のタイプのコンテナのタグ マネージャーを設定する場合は、次のリソースを参照してください。
- iOS: iOS 向け Google タグ マネージャー
- Android: Android 向け Google タグ マネージャー
- AMP: AMP とタグ マネージャーの設定ガイド
- サーバー: サーバーサイド タグ マネージャー
始める前に
- タグ マネージャー アカウントとコンテナを作成する必要があります。
- ウェブサイトのコードにアクセスできる必要があります。
手順
- https://tagmanager.google.com にアクセスします。
- Google アカウントにログインします。Google アカウントの作成方法についての詳細
- 編集するタグ マネージャーのコンテナを開きます。
- [ワークスペース] タブで、コンテナ ID（「GTM」で始まるもの）を選択します。
- [Google タグ マネージャーをインストールする] ダイアログで、ウェブサイトの各ページに対して次の手順を行います。
注: ウェブサイト作成ツールや、Wix、WordPress、Shopify などのコンテンツ マネジメント システム（CMS）を使用してウェブサイトを構築している場合は、ウェブサイトの各ページのコードを更新せずに Google タグを設定できます。詳しくは、ウェブサイト作成ツールや CMS で Google タグを設置する方法をご覧ください。
- 最初のコードブロックをコピーして、できる限り
<head>タグの上のほうに貼り付けます。例
次のサンプル HTML コードでは、最初の Google タグ マネージャーのコード スニペットを <head> 開始 HTML タグの後に貼り付けます。次の例では「GTM-ABCDEFGH」を使用していますが、この ID はコンテナ ID に置き換える必要があります。<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-ABCDEFGH');</script>
<!-- End Google Tag Manager -->
<title>サンプルのウェブページ</title>
</head>
<body>
<!-- ウェブサイトのコンテンツ -->
<h1>ようこそ、私のウェブサイトへ</h1>
<p>これはウェブページのサンプルの段落です。</p>
</body>
</html> - 2 つ目のコードブロックをコピーし、
<body>開始タグの直後に貼り付けます。例
次のサンプル HTML コードでは、2 つ目の Google タグ マネージャーのコード スニペットを <body> 開始 HTML タグの直後に貼り付けます。次の例では「GTM-ABCDEFGH」を使用していますが、この ID はコンテナ ID に置き換える必要があります。<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-ABCDEFGH');</script>
<!-- End Google Tag Manager -->
<title>サンプルのウェブページ</title>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-ABCDEFGH"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- Content of your website -->
<h1>ようこそ、私のウェブサイトへ</h1>
<p>これはウェブページのサンプルの段落です。</p>
</body>
</html> - ウェブサイトのリンクを入力し、[テスト] をクリックして、ウェブサイトをテストします。
- 最初のコードブロックをコピーして、できる限り
- [OK] をクリックします。
次のステップ
Google タグ マネージャーを使って、タグの設定と管理を行います。