Google Tag Managerコンソールにログインします。

「アカウント作成」ボタンをクリックします。

必要事項を記入して「作成ボタン」をクリックします。

ワークスペースのナビゲーションで「変数」を選択し、「新規」ボタンをクリックします。

変数の名前を設定します。

変数タイプで「データレイヤーの変数」を選択します。

データレイヤーの変数名を設定します。

「デフォルト値を設定」を有効にして、RichFlyer管理サイトで取得したSDK実行キーを入力します。

ワークスペースのナビゲーションで「タグ」を選択し、「新規」ボタンをクリックします。

タグの名前を設定します。

"タグの設定"をクリックして「カスタムHTML」を選択します。

HTML入力フォームにRichFlyer SDKを使った登録処理を記述します。

※事前にRichFlyer SDKファイルをウェブサイトに配備しておく必要があります。

<script>
  //プッシュ通知の購読
  var popupSettingValue = {
    type: 'normal',
    message: "プッシュ通知でお得な情報をお届けします！！ぜひ「受け取る」をクリックして通知の許可をお願いします。",
    img: "./img/promotion.jpg",
    cancelButton: "キャンセル",
    submitButton: "受け取る"
  }
  rf_init_popup({{RF_ServiceKey}}, 'richflyer.net', 'web.net.richflyer.safari', popupSettingValue);  
</script>

"トリガー"領域をクリックします。

画面右上の+ボタンをクリックします。

トリガーの名前を設定します。

トリガーのタイプで「カスタムイベント」を選択します。

イベント名を入力します。

「保存」ボタンをクリックしてトリガーを保存します。

同様にセグメント登録用にデータレイヤー変数、カスタムHTMLタグ、カスタムイベントトリガーを作成します。

カスタムHTMLタグに設定するコードサンプル

<script>
  <!-- データレイヤー変数を使ってウェブサイトから訪問者のセグメントを取得 -->
  var stringSegments = { genre: {{genre}} };
  var numberSegments = { age: {{age}} };
  var booleanSegments = { registred: {{registered}} };
  var dateSegments = { registredDate: {{registredDate}} };

  rf_updateSegments(stringSegments, numberSegments, booleanSegments, dateSegments,
                    {{RF_ServiceKey}}, "web.net.richflyer.safari").then( function(result) {
      console.log(result);
    }).catch( function(error) {
      console.log(error);
    });  
</script>

GTMコンソールで"管理"を選択し「Googleタグマネージャーをインストール」をクリックします。

ダイアログに記載されている手順に従い表示されているコードをウェブサイトに貼り付けます。

データレイヤーの変数を扱うためのコードを実装します。

<!-- headセクションに追加 -->
<script>
    window.dataLayer = window.dataLayer || [];
</script>

プッシュ通知の購読タグを実行するためにカスタムイベントを実装します。

<!-- (例)ボタンが押されたらポップアップを表示してプッシュ通知受信の許諾を得る -->
<!-- "subscribe_notification"はトリガーのカスタムイベント名 -->
<button type="button" onclick="dataLayer.push({'event': 'subscribe_notification'})">プッシュ通知の購読</button>

セグメント登録タグを実行するためのカスタムイベントを実装します。

<!-- (例)会員登録ボタンを押したら訪問者の好みのジャンル、年齢、会員登録状況をセグメント登録する -->
<form name="segments" action="#">
   ジャンル: <input type="text" name="genre"><br>
   年齢: <input type="text" name="age"><br><br>
   <input type="button" value="会員登録" onclick="register()">
</form>

<!-- "register_segment"はトリガーのカスタムイベント名 -->
<script>
    function register() {
        dataLayer.push({
                'genre': document.segments.genre.value,
                'age': document.segments.age.value,
                'registered': true,
                'registeredDate': new Date(),
                'event': 'register_segment'
        });
    }
</script>

ウェブサイトを表示します。

「プッシュ通知の購読」をクリックします。

ポップアップが表示されました。
「受け取る」をクリックしてプッシュ通知受信の許諾手続きを行います。

続けてセグメントの登録を行います。

例として会員登録ボタンを押したらユーザーの属性をセグメントとして登録するケースを想定しています。

ジャンルと年齢を入力して「会員登録」ボタンをクリックします。

ボタンがクリックされたタイミングでセグメント情報がRichFlyerのサーバーに送られます。

RichFlyer管理サイトに移動して配信条件を作成します。

作成した条件: 年齢が20歳以上でジャンルが"Sports"のユーザー

メッセージ作成画面にて作成した配信条件を指定します。

作成が完了したらメッセージを配信します。

無事にプッシュ通知を受信することができました！