GTMでLink-AGタグを設置する方法

こちらのマニュアルに従って、GTMタグをサイトに設置してください。

https://developers.google.com/tag-manager/quickstart

GTMタグの確認方法：「管理」＞「Googleタグマネージャーをインストール」

GTMタグをコピーし、クライアント様のサイトに設置してください。

その際、設置のページや場所にご注意ください。

「ワークスペース」＞「トリガー」＞「新規」からトリガーの設定を行います。

左上の部分を編集し、トリガーの名前を設定します。

「トリガーの設定」エリアをクリックします。

トリガーのタイプを「ページビュー」「DOM Ready」 「ウィンドウの読み込み」のいずれかから選択します。

トリガーのタイプについてはこちらを参照し、選択してください。

https://support.google.com/tagmanager/topic/7679108?hl=ja&ref_topic=7679384

ここでは、「ページビュー」を選択するとします。

このトリガーの発生場所を「一部のページビュー」「Page URL」「含む」を選択します。

一番右のフォームには、LPページのURLを入力してください。

「ワークスペース」＞「トリガー」＞「新規」からトリガーの設定を行います。

左上の部分を編集し、トリガーの名前を設定します。

「トリガーの設定」エリアをクリックします。

トリガーのタイプを「ページビュー」「DOM Ready」 「ウィンドウの読み込み」のいずれかから選択します。

トリガーのタイプについてはこちらを参照し、選択してください。

https://support.google.com/tagmanager/topic/7679108?hl=ja&ref_topic=7679384

ここでは、「ページビュー」を選択するとします。

このトリガーの発生場所を「一部のページビュー」「Page URL」「含む」を選択します。

一番右のフォームには、サンクスページのURLを入力してください。

「ワークスペース」＞「タグ」＞「新規」からタグの設定を行います。

左上の部分を編集し、タグの名前を設定します。

「タグの設定」エリアをクリックします。

タグのタイプは「カスタムHTML」を選択します。

HTMLの欄に、下記LPタグを貼り付けてください。

<script src="https://link-ag.net/dist/p/l/index.js"></script>

次に、上記で設定したLPタグと2.で設定したLPトリガーを紐付けます。

「トリガー」エリアをクリックします。

2.で設定したLPトリガーを選択します。

タグの設定とトリガーの紐付けができていることを確認し、「保存」します。

「ワークスペース」＞「タグ」＞「新規」からタグの設定を行います。

左上の部分を編集し、タグの名前を設定します。

「タグの設定」エリアをクリックします。

タグのタイプは「カスタムHTML」を選択します。

HTMLの欄に下記を貼り付け、文字部分を編集してください。

必須

acd 弊社より共有している固定値の広告コード

cs 弊社より共有している固定値の広告コースコード

ucd 貴社側での注文情報を識別するID

単価タイプが定率(%)の場合（単価タイプが定額の場合は不要です）

pr 商品金額

qu 数量

次に、上記で設定したCVタグと3.で設定したCVトリガーを紐付けます。

「トリガー」エリアをクリックします。

3.で設定したCVトリガーを選択します。

タグの設定とトリガーの紐付けができていることを確認し、「保存」します。

「ワークスペース」＞「変数」＞「ユーザー定義変数」＞「新規」から変数の設定を行います。

左上の部分を編集し、変数の名前を設定します。

ここでは例として「ucd」を設定するとします。

「変数の設定」エリアをクリックします。

変数のタイプを選択します。

変数のタイプについてはこちらを参照し、選択してください。

https://support.google.com/tagmanager/answer/7683362?hl=ja

ここでは、「ページ変数」＞「カスタムJavaScript」を選択するとします。

「カスタムJavaScript」の欄に任意のJavaScriptを記載し、保存します。

ここでは例として、ランダムな10桁の文字列を返す関数の定義をします。適宜、クライアント様任意のJacvaScriptを記載してください。

例）

function () {

  return Math.random().toString(36).slice(-10);

}

「ワークスペース」＞「タグ」に戻り、5.で設定したCVタグを開きます。

変数を設定したい部分を、{{変数名}} に変更します。

その際、{{や}}の外側にシングルクォーテーション「'」は不要です。

例）

'ucd': {{ucd}}

設定後、保存します。

「ワークスペース」＞「変数」に戻り、先ほど作成した変数を開きます。

「この変数への参照」に、先ほど編集したCVタグが紐づけられていれば、完了です。

右上の「プレビュー」を選択します。

しばらくすると、左のようなページが別タブで表示されるので、「Your website’s URL 」に、確認したいページ（LPページやサンクスページ等）のURLを入力します。

「Connect」を押します。

すると、確認したいページが別タブで開かれます。

元のページは画像のようになっているので、「Connect」を押します。

モーダルが消え、確認したいページのGTM設定状況が表示されますので、タグの設置状況を確認してください。

例）

左の画像では、LPページを確認しているため、LPタグが「Tags Fired」、CVタグが「Tags Not Fired」となっています。

問題なければページを閉じます。

右上の「公開」を押します。

「バージョン名」「バージョンの説明」を入力します。

「ワークスペースの変更」の内容に間違いがないことを確認し、「公開」をします。

公開が完了すると、こちらのページに遷移します。

なお、上部タブの「バージョン」を選択すると、過去のバージョンを確認できます。

簡単に過去のバージョンに戻したり、プレビューを実行できます。

確認したいページ（タグを設置したLPページやサンクスページ）をブラウザで開き、開発者モードを開きます。

・Google Chromeの場合：右クリック＞検証 ＞Elements

・Safariの場合：右クリック＞要素の詳細を表示＞要素

要素の中で検索ボックスを表示させます。

・Macの場合：「Command」＋「F」キー

・Windowsの場合：「Windows」＋「S」キー

「link-ag」と検索し、設置したLink-AGタグがあれば問題ありません。

例）LPページの場合

下記タグが設置されていればOK

<script src="https://link-ag.net/dist/p/l/index.js"></script>

例）サンクスページの場合

下記タグが設置されていればOK

<script type="text/javascript" id="">window.lag=window.lag||function(){(lag.q=lag.q||[]).push(arguments)};lag.l=+new Date;lag({acd:"hogehogehogehoge",cs:"hogehoge",ucd:google_tag_manager["GTM-HOGE"].macro(4)});</script>

その下に、

<script src="https://link-ag.net/dist/p/c/index.js"></script>

※({acd:以降は設定により変わります。

例）設定した変数を確認する場合

Consoleを使って変数の確認をすることができます。

画像では、ucdに設定した変数をElementからコピーして、Consoleに打ち込むことで、変数の中身を確認しています。