釣りとキャンプとコーヒーが好きなサラリーマンの趣味サイト。釣り場やキャンプ場とかの見てきたことや、Webの仕事で困ったことを記録していきます。

GTMでSessionStrageを利用して画面の出しわけをする方法。


訳あって、ラジオボタンのフォームで入力された内容を次のページへGTMで持ち越す制御を考えることに。
流れとしては

  1. submitボタンのクリックイベントをトリガにGTMのタグ発火
  2. session strage内に選択されたラジオボタンの内容をカスタムイベントタグで書き込み
  3. 遷移先ページ(今回はテストなので同一ページ)でsession strageの内容を受け取る
  4. ってイメージで考えてますが、果たしてうまくいくでしょうか。

    ①入力内容を次のページで受け取るためのサンプルフォーム

    以下のラジオボタンのうち、どちらかを選択してください。

    以下のラジオボタンのうち、どちらかを選択してください。パート2

    2つめのラジオボタングループの中からどれかを選び「送信する」するボタンをクリックすると、
    SessionStrageの書き込み内容や、対応したルックアップテーブルの内容を出力します。


    セッションストレージの中身


    ルックアップテーブルの返却値


    設定内容は以降で説明します。

    ②SessionStrageへの書き込み結果

    GTMには以下のカスタムHTMLタグを仕込んでいます。
    SeesionStrageはタブ(ウィンドウ)毎に保持されるので、
    同一ページ内遷移のみで利用することができます。

    
    <script>
       var form = $("#post-form");
       var form_data = form.serializeArray();
          form_value_object = {};
          form_value_object["prj_item_no[]"] = [];
          $.each(form_data, function(index, object) {
            if (object.name == "prj_item_no[]") {
              return form_value_object[object.name].push(object.value);
            } else {
              return form_value_object[object.name] = object.value;
            }
          });
      
      if(('sessionStorage' in window) && (window.sessionStorage !== null)) {
        // セッションストレージが使える
    sessionStorage.removeItem('formChoiceResult'); sessionStorage.setItem('formChoiceResult', form_value_object["item_answr[2]"]); console.log('sessionStarage done tag'); console.log(form_value_object["item_answr[2]"]); } else { // 使えない。。 console.log('Not Availavle tag'); }

    SessionStrageに書き込んだ内容をルックアップテーブルで置き換えて取得する

    ここで問題が。SessionStrageに書き込んだのはいいんだけど、ページをリロードしたあとで、
    その内容をもとにルックアップテーブルの出力値をどうやって取得したらいいんだろう・・・・
    悩んだ結果、javascript変数を使うことにしました。
    下記のjavascript変数をルックアップテーブルの入力値とします。
    上のラジオボタン3~5に対して、”ルックアップテーブルの値は1~3”を割り当てています。

    
    function(){
       if(('sessionStorage' in window) && (window.sessionStorage !== null)) {
           // セッションストレージが使える
         var result1 = sessionStorage.getItem('formChoiceResult');
         console.log(result1);
         return result1;
       } else {
          // 使えない。。。
         console.log('Not Availavle');
          return null;
       }
    }
    

    ルックアップテーブルの設定はこちら。

    javascript変数の返却値がnull以外の場合、
    sessionStrageに保存された情報があるとしてタグが発火し、
    そのカスタムhtmlの中でルックアップテーブルの値を参照するという流れです。

    まとめ

    今回、フォームで入力され送信される値をもとにGTMで出しわけを行った。
    手順をまとめる下記の通り。

    1. 「送信する」のクリックイベントをGTMで取得し、フォームの入力をsessionStrageに保存
    2. javascript変数でsessionStrageの値を取得。ルックアップテーブルはこの変数の値に応じて出力を設定
    3. ②のjavascript変数がnull以外を発火の条件として、ルックアップテーブルの値を参照する
    4. はじめてjavascript変数を使ったけど、こういうときに役に立つことを学んだ。
      GTMっておもしろいな~笑


コメントを残す

メールアドレスが公開されることはありません。