GTMでjavascripを実行 - masalibの日記

Reactのお仕事をしたくてランサーズを見ていたらjavascriptがあった

https://www.lancers.jp/work/detail/3332844

依頼内容は以下のとおりです

当方がユーザーとして利用している予約システムで、エンドユーザーが完了契機に到達したタイミングで、指定されたURLにソケット通信でHTTPリクエストを送信できる仕組みを開発したいです。

□補足１
予約システムの完了画面はソースコードを操作できないため、「完了契機に到達したタイミング」で任意のスクリプトを実行する場合は、GTMの利用が必要です。

□補足２
もし、当方の希望要件がGTMのみで実現できない場合は、GTMで自社サーバー（レンタルサーバー）にリダイレクトをかけ、リダイレクト先でポストバックを実行することも検討しています。

■開発言語
可能であれば、JSの開発（補足１）を優先的に検討いただける方をお探ししています

実際には受けていないのですが勝手に想定してお仕事をやってみました

前提として

「完了契機に到達したタイミング」がURLで判別できるとしました。POSTのパラータで判別する場合はもう少し複雑になるかと思う
送信するサーバー側はCORSの設定はやっている。アフィリエイトの会社がこの設定をやっていないとは考えられないのですが・・・

作業としては大きく２つ

GTMのトリガーにコンバージョンURLを設定する
GTMのタグにカスタムHTMLを設定して、その中にjavascripを設定する

の２つになります

トリガーを設定

タグマネージャーのタグのメニューで新規を押す
トリガーの設定画面がでるのでトリガータイプをページビューに設定する
一部のページビューを選択する
Page URLに該当のURLを設定する

カスタムHTMLにjavascripを設定

タグマネージャーのタグのメニューで新規作成を押す

カスタムHTMLを選択して下記のjavascripを貼り付ける

<script>
console.log("test tag start")
  
fetch('https://jsonplaceholder.typicode.com/todos/1').then(function (response) {
  return response.json();
}).then(function (json) {
  return console.log(json);
});  

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8'
  }
}).then(function (response) {
  return response.json();
}).then(function (json) {
  return console.log(json);
});

  
</script>

ちなみにECMASCRIPT6(es2015)じゃないと動かないみたい・・・

This language feature is only supported for ECMASCRIPT6 mode or better: arrow function.

エラーがでたのでbabalでトランスパイラしました

Babel · The compiler for next generation JavaScript

変更前

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

変更後

fetch('https://jsonplaceholder.typicode.com/todos/1').then(function (response) {
  return response.json();
}).then(function (json) {
  return console.log(json);
});

感想

タグマネージャーってECMASCRIPT6(es2015)なのね・・・