masalibの日記

システム開発、運用と猫の写真ブログです

GTMでjavascripを実行

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

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

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

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

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

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

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

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

前提として

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

作業としては大きく2つ

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

の2つになります

トリガーを設定

  1. タグマネージャーのタグのメニューで新規を押す
  2. トリガーの設定画面がでるのでトリガータイプをページビューに設定する
  3. 一部のページビューを選択する
  4. 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)なのね・・・