gtag.js デベロッパー ガイド

グローバル サイトタグ(gtag.js)は、AdWords、アナリティクス、DoubleClick にイベントデータを送信できるタグ設定フレームワークおよび API です。サービスごとに複数のタグを管理するよりも、gtag.js を使用することをおすすめします。そうすることで、最新のトラッキング機能と統合からより簡単にメリットを得ることができます。

gtag.js を使用すると、ウェブサイトにコードを追加するだけで、簡単に複数の Google サービスにデータを送信できます。追加のアカウントを作成したり、別の管理画面で設定を管理する必要はありません。

Google タグマネージャは、Google タグと第三者タグをすべてサポートするさまざまな機能を備えた堅牢なタグ管理システムです。タグマネージャ管理画面では、サイトのコードを調整することなく、タグを追加および変更することができます。詳しくは、タグマネージャに関するデベロッパー ガイドをご覧ください。

Google タグマネージャを使用している場合は、gtag.js コードをサイトに追加するよりも、そのまま Google タグマネージャを使用してください。ただし、gtag.js と Google タグマネージャは共存するように設計されているため、同じページに両方を導入しても問題なく動作します。

このガイドについて

このガイドでは、AdWords、DoubleClick、アナリティクスに共通する gtag.js の一般的な使用例について説明します。具体的には次のとおりです。

  • AdWords、DoubleClick、アナリティクスの基本設定
  • イベントデータの送信方法

gtag.js の使い方は多くの場合、使用するサービスと取得する必要があるデータによって異なります。サービス固有のドキュメントや使用例については、以下のリンクよりご覧ください。

gtag.js を使用する手順

AdWords、DoubleClick、アナリティクスのどのサービスにデータを送信するかに関わりなく、gtag.js を使用するための基本的なモデルは次のとおりです。

  1. サイトのすべてのページにグローバル スニペットを追加し、アナリティクス、AdWords、DoubleClick で動作するように設定します。詳しくは、下記のグローバル スニペットを追加するをご覧ください。
  2. gtag() コマンドを使用してイベントを取得し、1 つ以上のサービス(アナリティクス、AdWords、DoubleClick など)にデータを送信します。詳しくは、下記の gtag() コマンドを使ってデータを設定して送信するをご覧ください。

グローバル スニペットを追加する

グローバル スニペットは、サイトのすべてのページの上部に設定します。gtag() コマンドは、グローバル スニペットがページの上部の gtag() コマンドの前にない限り、データを送信できません。

1 つのサービスにだけデータを送信する場合は、各サービス(アナリティクスAdWordsDoubleClick)のガイドをご覧ください。独自のスニペットを作成する場合は、下の該当するタブを選択して、スニペットをコピーし、ウェブサイトの各ページの <head> タグの直後に貼り付けます。各ページに必要なグローバル スニペットは 1 つだけです。

複数のサービスにデータを送信する場合は、下記のグローバル スニペットに別のサービスまたはアカウントを追加するをご覧ください。

Google アナリティクス

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());

  gtag('config', 'GA_TRACKING_ID');
</script>

GA_TRACKING_ID を確認するには:

  1. アナリティクス アカウントで [アナリティクス設定] をクリックします。
  2. [アカウント] 列のメニューからアカウントを選択します。
  3. [プロパティ] 列のメニューからプロパティを選択します。
  4. [プロパティ] で [トラッキング情報] > [トラッキング コード] をクリックします。

トラッキング ID とプロパティ番号がページの上部に表示されます。

AdWords

<!-- Global site tag (gtag.js) - AdWords -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-GOOGLE_CONVERSION_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());

  gtag('config', 'AW-GOOGLE_CONVERSION_ID');
</script>

AW-GOOGLE_CONVERSION_ID を確認するには:

  1. AdWords で、[ツール] > [コンバージョン] > [コンバージョン アクション] に移動します。
  2. [名前] 列で、gtag.js に使用するコンバージョン アクションの名前を選択します。
  3. コードボックスで、変数 google_conversion_id の値を見つけます。

グローバル スニペットに別のサービスまたはアカウントを追加する

スニペット

いずれかのサービスに gtag.js スニペットをインストールしたら、追加の config コマンドを追加するだけで、追加のサービスでも動作するように設定することができます。

次の例では、Google アナリティクスのグローバル スニペットの一番下に AdWords アカウントを追加しています。

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-12345-6">
</script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());

  gtag('config', 'UA-12345-6');
  gtag('config', 'AW-123456789');
</script>

gtag.js スニペットの最初の行の src 属性に URL が含まれていることに注目してください。

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-12345-6">

このコード行は gtag.js ライブラリを読み込み、グローバル サイトタグの ID として使用されるトラッキング ID を末尾に追加して、グローバル サイトタグの発生元と関連付けます。

複数のサービスやアカウントをグローバル スニペットに追加する方法の例については、gtag.js ルーティング ガイドをご覧ください。

gtag() コマンドを使ってデータを設定して送信する

コマンドがグローバル スニペットの下にある限り、ページ上のどこでも gtag() コマンドを呼び出すことができます。使用できるコマンドは、configsetevent の 3 つです。

config

config コマンドを使用して、特定のサービスのアカウントの設定を初期化します。config コマンドの形式は次のとおりです。

gtag('config', '<target_ID>', {<additional_config_info>});

アナリティクスのグローバル スニペットの上記のような行は、次の 2 つのことを行います。

<target_ID> はデータ送信先のサービスのアカウント ID で、 は追加の構成オプションを指定するためのオプションのオブジェクトです。

target_ID で指定するサービスによって、config コマンドの動作が異なる場合があります。たとえば、AdWords コンバージョン ID とともに config コマンドを呼び出すと、リマーケティング リクエストが開始され、クリック ID がファーストパーティの Cookie にコピーされます。config コマンドが Google アナリティクスのプロパティ ID とともに呼び出されると、Google アナリティクス トラッカーが開始されます。それにより、ページ上の後続の event コマンドが使用され、指定された Google アナリティクス プロパティにページビュー ヒットが自動的に送信されます。

オプションの <additional_config_info> オブジェクトでパラメータを指定することで、config の動作を調整して拡張できます。たとえば、次のパラメータを追加すると、Google アナリティクスのページビューが自動的に送信されるのを妨ぐことができます。

gtag('config', 'UA-12345-6', {'send_page_view': false});

set

set コマンドを使用すると、ページ上の後続すべてのイベントに自動的に関連付けられる値を設定できます。たとえば、サイトのすべてのトランザクションで同じ通貨を使用する場合は、set コマンドを使用してグローバル スニペットの後に通貨フィールドを指定します。

gtag('set', {'currency': 'USD'});

1 つの set コマンドで複数の属性を設定することができます。

gtag('set', {
  'country': 'US',
  'currency': 'USD'
});

event

event コマンドは、イベントデータの送信方法を指定します。たとえば、値と通貨のパラメータとともに「コンバージョン」イベントを送信するには、次のとおりに設定します。

gtag('event', 'conversion', {
  'value': 1.0,
  'currency': 'USD'
});

特定の状況に適した、推奨イベント推奨パラメータのセットが用意されています。たとえば、「page_view」イベントは Google アナリティクスにページビューヒットを送信します。推奨イベントと推奨パラメータについて詳しくは、イベント リファレンスをご覧ください。

推奨イベントにはない名前を使用して、独自のイベント名を作成することもできます。これらはカスタム イベントと呼ばれます。