GAのutmパラメータをMA（Marketo）に取り込む方法

私はSaaSスタートアップでデジタルマーケティング周りを主に担当しており、どの流入経路からどれくらいのリードが取れて、どれくらいの商談に繋がったのかということを常日頃気にしながら仕事をしております。

そんな中、Googleアナリティクスで使っている`utmパラメータ`を弊社で使っているMAツール`Marketo`と、連携している`Salesforce`に取り込めたら便利になるなーと思い、やってみたので、やり方をメモします。

Qiita記事書くの初めてなので、読みづらいとこはご了承ください。。
## 前提
### 環境（使っているツール）
- Marketo
- Salesforce
- Googleアナリティクス（GA）
- Googleタグマネージャー（GTM）

弊社はMarketoとSalesforceを使っていますが、別のMAツールを使っていても同じようなやり方でできると思います。
### 実現できること
GAで使っているutmパラメータをMarketo→Salesforceに取り込み、どの経路（Googleリスティング？GDN？Facebook？とか）から入ったリードが商談に繋がっているのかとかを可視化する
## 流れ
1. utmパラメータをCookieに格納するJavascriptをサイトに仕込む
2. フォーム送信時に1.のパラメータを送信するように改造する

以上です！

具体的に説明していきます。
## 1. utmパラメータをCookieに格納するJavascriptをサイトに仕込む
LPとフォームが同じページですぐにCVまで行くとかであればこのフローはいらないですが、大体の場合、
`広告などのクリック→LP遷移→サイト回遊（場合によっては離脱）→フォーム入力→コンバージョン`
といった流れだと思いますので、その前提でいったんCookieにパラメータを格納しちゃって、フォーム送信するときに格納したパラメータを取り出してMAに一緒に送る、みたいな形にしています。
### 1-1. Javascriptを書く
書くと言ってもコピペでいけます。
（初心者がいろいろなサイト参考にして作ったやつなので、書き方ダサかったりしても許してください。。）

参考：[URLのパラメータを抜き出してCookieにセットするコード](https://qiita.com/aqril_1132/items/2bde564f4c570b3e604e)

上記の記事を参考に、utmパラメータ用にカスタマイズ加えました。

```html
<script type="text/javascript">
/**
 * URLから指定したクエリの値を取得してCookieにセットするコード
 */
!function(){
  /**
   * URLから取得するクエリの名前を指定するための変数
   * @type {string}
   */
  var queryName1 = 'utm_source';
  var queryName2 = 'utm_medium';
  var queryName3 = 'utm_campaign';
  var queryName4 = 'utm_content';

  /**
   * 作成するCookieの名前を指定するための変数
   * @type {string}
   */
  var cookieName1 = "q_utm_source";
  var cookieName2 = "q_utm_medium";
  var cookieName3 = "q_utm_campaign";
  var cookieName4 = "q_utm_content";

  /**
   * 作成するCookieの生存期間を秒数で指定する変数
   * @type {number}
   */
  var maxAge = 7 * 24 * 60 * 60;

  /**
   * URLから指定したクエリの値を取得する関数
   * @param {number} q - 値を取得するクエリの名前を指定
   */
  var queryVal1 = function(q){
    var ret, param;
    var s = document.location.search;
    if(!!s){
      param = s.substring(1).split('&');
      for(var i=0,len=param.length; i<len; i++){
        if(!param[i].indexOf(q+'=')){
          ret = param[i].split('=')[1];
          break;
        } 
      }
    }
    return ret;
  }(queryName1);
  
   var queryVal2 = function(q){
    var ret, param;
    var s = document.location.search;
    if(!!s){
      param = s.substring(1).split('&');
      for(var i=0,len=param.length; i<len; i++){
        if(!param[i].indexOf(q+'=')){
          ret = param[i].split('=')[1];
          break;
        } 
      }
    }
    return ret;
  }(queryName2);
  
   var queryVal3 = function(q){
    var ret, param;
    var s = document.location.search;
    if(!!s){
      param = s.substring(1).split('&');
      for(var i=0,len=param.length; i<len; i++){
        if(!param[i].indexOf(q+'=')){
          ret = param[i].split('=')[1];
          break;
        } 
      }
    }
    return ret;
  }(queryName3);
  
    var queryVal4 = function(q){
    var ret, param;
    var s = document.location.search;
    if(!!s){
      param = s.substring(1).split('&');
      for(var i=0,len=param.length; i<len; i++){
        if(!param[i].indexOf(q+'=')){
          ret = param[i].split('=')[1];
          break;
        } 
      }
    }
    return ret;
  }(queryName4);

  // 指定したクエリの値を取得できたとき、これをCookieにセットする
  if(typeof queryVal1 !== 'undefined'){
    document.cookie = cookieName1 + '=' + queryVal1 + ';path=/; max-age=' + maxAge + ';';
  }
  if(typeof queryVal2 !== 'undefined'){
    document.cookie = cookieName2 + '=' + queryVal2 + ';path=/; max-age=' + maxAge + ';';
  }
  if(typeof queryVal3 !== 'undefined'){
    document.cookie = cookieName3 + '=' + queryVal3 + ';path=/; max-age=' + maxAge + ';';
  }
  if(typeof queryVal4 !== 'undefined'){
    document.cookie = cookieName4 + '=' + queryVal4 + ';path=/; max-age=' + maxAge + ';';
  }
}();
</script>
```
#### Cookie保持期間を変更したい場合

```Javascript
var maxAge = 7 * 24 * 60 * 60;
```
これで、`7(日間)`×`24(時間)`×`60(分)`×`60(秒)`を表しているので、必要に応じて日数とかを変更してください。最終的にCookieを保持したい秒数になればOKです。
### 1-2. サイト全体にタグを仕込む
上記1-1. で作ったタグを`Googleタグマネージャー`とかでサイト全体に仕込んでください。（タグマネの使い方はここでは割愛させてください。。）

キャプチャだけ貼っておきます。
<img width="1280" alt="ss_gtm.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535028/d74156ad-259a-e84b-7aa6-128a197fb7cd.png">
これを公開すると、utmパラメータ付きのURLで流入してきた場合に、Cookieに自動的に各パラメータが格納されるようになりました。

## 2. フォーム送信時に1.のパラメータを送信するように改造する
1.でCookieに格納したパラメータをMAツールのフォーム通過する時にしれっと送信しちゃいます。
### 2-1. MAツール上のフィールドを追加する
MAツール上でutmパラメータを格納するための項目を用意します。
※ここはお使いのMAやSFとの連携とかによってやり方変わると思うので、適宜いつもの方法で追加してください。

うちの場合はSalesforce上で新規項目を作成すると自動的にMarketoに連携されるので、その方法でやっています。

Salesforce使っている場合にざっくりやることとしては、
1. 設定 ＞ オブジェクトマネージャ
2. `リード`, `取引先責任者`, `商談` それぞれに `utm_campaign`, `utm_medium`, `utm_campaign`, `utm_content` の項目を作成
3. リードの項目の対応付け から各項目を対応付ける

といった感じです。これでMarketoとも連携しているので自動的に項目が反映されます。
### 2-2. Marketoのフォームにutm用の項目を追加する
2-1. でできたフィールドを、いつも使用しているフォームにも追加します。
<img width="1280" alt="ss_marketo.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535028/e5273942-c5dd-9f09-61f6-884ace63faae.png">
<img width="494" alt="ss_marketo_auto.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535028/a4413306-2b46-6d5b-d513-4773ac94a01b.png">


こんな感じにしています。
※フィールド名が`m_utm_source`のようになっているのは、上書きをしないようMarketoで設定しているためです。

設定内容は以下です。

**フィールドのプロパティ**
・`フィールド`：2-1.で作ったフィールド（utm_sourceとか）
・`フィールドのタイプ`：非表示

**自動入力：編集 の中身**
・`値の取得先`：Cookie値
・`パラメータ名`：q_utm_source
　※ 値に合わせて、medium / campaign / content を変えます。

これで、ユーザがフォームを通過した時、自動的にCookieに入っているパラメータを拾ってMAに送信してくれるようになりました。

あとはこれを使って流入経路〜リード〜商談をいろいろ分析するとよいと思います。

他にもっといいやり方あるよってのがあれば教えてください！！