Google Tag Managerの設定の備忘録

# 概要
よくGoogle Tag Managerの設定方法を忘れるので備忘録です。


# GAキャンペーンパラメータ Cookie書き込み

```javascript
<script>
var params = location.search.substring(1).split('&');

for (var i = 0; i < params.length; i++) {
  if (params[i].match(/utm_((medium)|(source)|(campaign)|(content))=.*/)) {
    document.cookie = params[i] + ';path=/;max-age=' + 1 * 60 * 60 * 24 * 90;
    document.cookie = 'lp_url=' + location.protocol + '//' + location.host + location.pathname + ';path=/;max-age=' + 1 * 60 * 60 * 24 * 90;
  }
}
</script>
```

# UTMパラメータを含む場合のURLの正規表現
UTMパラメータを含むPage Pathと一致させたい場合、以下のような正規表現で可能。

```javascript
^/jp/thanks_download(\?.*|#.*)*$
```

# GAのcid取得

変数の設定：ファーストパーティCookie
Cookie名：_ga

# Cookieを利用する
確認画面でCVを計測する際に、値を取得できない場合に、Cookieに書き込んで持ち回る。
以下のような処理で値を取得し、Cookieに書き込みを行う。

```javascript
function(){

  var DonationAmontValue;
  var selectedValue;
  var options;
  var pageType;
  
//対象ページごとに、金額の取得方法を選択
  if( {{Page Path}}.match(/^\/index\.php$/) ){
    var checkbox = document.frm.Amount;
    for (i = 0; i < checkbox.length; i++){
      if(checkbox[i].checked){
        selectedValue = checkbox[i].value;
        break;
      }
    }
    
    if( typeof parseFloat(selectedValue.trim()) === "number" ){
      AmontValue = parseFloat(selectedValue.trim());
    }
    
  }
  //値を返す
  return AmontValue;
}
```

利用する際は、Cookie変数から値を取得する。

```javascript
<script>
  now = new Date();

  var transactionId = {{UA - cid from _ga cookie}} + '-' + now.getTime();

  var cartProducts = [];
  cartProducts.push({
	"id": transactionId,
	"name" : "{{Page Path}}",
	"price" : "{{Cookie_AmontValue}}",
	"quantity" : "1"
  });
  
  dataLayer.push({
	'event' : 'trackTrans','ecommerce': {
	'purchase': {
        'actionField': {
          'id':  transactionId,
          'revenue': '{{Cookie_AmountValue}}'
        },
     	'products': cartProducts
    }
  }
});

//cookieから値を削除
document.cookie = "Contribution=; expires=Thu, 01 Jan 1970 00:00:00 GMT; domain = hoge.com ; path = / ";
  
</script>
```


# Yahoo広告でのクロスドメイン計測
Yahoo広告を計測するためのGTMの設定について

## クロスドメインの設定
カスタムhtmlで以下を設置する。
{{yclid}}はCookieから取得した値。

```javascript
<script>
    if ({{yclid}}){
      console.log("yahoo cross domain")

      var targets = document.querySelectorAll('a');

      for (var i = 0; i < targets.length; i++) {
        var target = targets[i];
        var url = target.href;
        url += '?yclid=' + {{yclid}}; 
        target.href = url;  
      }

    }
</script>
```

## サイトジェネラルタグ
サイトジェネラルタグが発行する前に、クロスドメインタグを有効にする必要がある。

```javascript
<script async src="https://s.yimg.jp/images/listing/tool/cv/ytag.js"></script>
<script>
window.yjDataLayer = window.yjDataLayer || [];
function ytag() { yjDataLayer.push(arguments); }
ytag({"type":"ycl_cookie"});
</script>

```

## コンバージョン測定タグ

```javascript
<script async>
  
window.yjDataLayer = window.yjDataLayer || [];
function ytag() { yjDataLayer.push(arguments); }
ytag({"type":"ycl_cookie"});

ytag({
  "type": "yss_conversion",
  "config": {
    "yahoo_conversion_id": "99999999,
    "yahoo_conversion_label": "xxxxxxxxxxxxxxx",
    "yahoo_conversion_value": "3000"
  }
});
</script>
```

#onclickの計測

onclickでページを遷移する場合、、GTMが発火したとしても先にonclickで呼び出されるJavasceriptの処理が進んでしまい、ページが遷移してしまう。遷移までにタグ発火が間に合わないと、計測できない。
また、「タグの配信を待つ」のオプションは<a>タグのみで有効であり、onclickの場合は使えない。

このような場合に計測するための方法について。

## onclickでLinkerParamを付与する

```javascript
<script>
$(document).ready(function() {
  var button = document.querySelector('#btn1');
  var oclick = button.getAttribute('onclick');
  var href = oclick.match(/'(.+)'/)[1];
  button.setAttribute('onclick', '');
  button.addEventListener('click', function() {
    var linker = window.ga && window.ga.getAll ? window.ga.getAll()[0].get('linkerParam') : '';
    window.location.href = linker ? href + '?' + linker : href;
  });
  
});
  
</script>
```

## HTMLページ生成時にonclickより前に実行する関数を差し込む

```javascript:prependEvent

prependEvent = function(target, newEvent) {
  var clickHandler;
  clickHandler = target[0].onclick; // イベントを退避
  target[0].onclick = null; // クリックイベントをリセット
  target.click(newEvent); // 差し込み
  target.click(clickHandler); // その後にオリジナルをしまう
};
```

↓こんなカンジで使います。

```HTML
<input id="confirmButton" type="button" onclick="alert('first');" value="test input"/>
```

```javascript
secondFunction = function() {
  alert("second");
};

prependEvent($("input#confirmButton"), secondFunction);
```


#サブスクストア


## コンバージョンタグ
```
<!-- Global Site Tag (gtag.js) - Google Analytics tamago --> 
<script async src="https://www.googletagmanager.com/gtag/js?id=【GAのプロパティID】"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '【GAのプロパティID】', {'page_path': document.location.pathname}); 
</script>
```

参考：[公式ヘルプ](https://subscription-store.com/helpcenter/function-manual/analysis_sp/cat9/google_analytics_tags/)

## eコマーストラッキング

```javascript
<script>
gtag('event', 'purchase', {
      "transaction_id": @@order_id@@,
      "affiliation": @@shop_name@@,
      "value": @@order_total@@.
      "tax": @@tax_total@@,
      "shipping": @@shipment_total@@,
      "items": [
       @@item_code@@ 
      ]
    });
</script>
```

## アイテムコード

```javascript

{
  "id": @@item_sku@@,
  "name": @@item_name@@,
  "category": @@item_category@@,
  "quantity": @@item_quantity@@,
  "price": @@item_price@@
},
```

# 今後記載したい内容
- シャープ記号(#)付きのURLをGoogleアナリティクスで測定する
- 「スクロール距離」トリガーと「要素の表示」トリガーの使用方法について
- GTMでYouTube動画の計測