サイトのトップページ等に、プロモーション枠、infomation の表示枠等、何かメッセージをユーザに通知したい場合があります。
サーバ側プログラムで動的に HTML を生成しているページの場合、プログラム内にメッセージを埋め込んでしまうと、メッセージ変更の度にデプロイが必要になってしまい、何らかの方法で外だしをしている場合が、多いかと思います。 また、プロモーション枠 というのが結構曲者で、プロモーションとして訴求したいカテゴリごとに通知を出し分けしたいというプロモーション要件 というものが発生して、且つ、なかなか決まらない、そして変更が頻繁に入って突貫工事的な実装になることが個人的には多くあります。

この、バナー配信、<wbr>メッセージ配信 と、プロモーション要件 を GTM(Google Tag Manager) を使って外だしにできないか試してみました。試してみた結果を記載します。

目次

[TOC]

参考

このあたりの領域の課題を解決する方法

調べてみたところ、このあたりの領域の課題を解決する方法として、以下のような解決策があるように思います。1

自社で、メッセージ配信、バナー配信サーバ を構築する

自分が考えているのは、自社広告 (自社のメッセージ通知) にあたるもので、広告というと他社(お客)の広告も含まれますが、考え方は同じなのかと思います。
有料の広告配信サーバ、オープンソースの広告配信サーバがあるようです。構築して自社の部署単位等で、広告主として扱うことで、バナー管理等は行えるのかと思いました。
オープンソースの広告配信サーバは、Free Open Source Ad Server - Revive Adserver 以外は見つからなかったですが、他にもあるのかもしれません。

DMP や、マーケティングオートメーションツールを使う

この分野は疎いです。適当な説明になりますが、DMP、マーケティングオートメーションツールの機能の一つに、広告の配信機能があります。ユーザごとにメッセージ配信、バナー配信を切り替えることも実現できそうです。

実装方法 switch 文でユーザ属性を判定して文言を切り替える

Google Tag Managerを使ってバナーやメッセージをデプロイなしに切り替える - $shibayu36->blog; を参考にして、switch 文でユーザ属性を判定して、表示文言を切り替えるようにしました。サンプルページを作成しましたので、ご確認ください。
gtm-banner-example | kemsakurai.github.io

以下、実装した箇所について説明します。

  • HTML に dataLayer 変数 を定義する
  • データレイヤーの変数を作成する
  • トリガーを作成する
  • HTML カスタムタグを作成する

HTML に dataLayer 変数 を定義する

サンプルページには以下のデータレイヤ変数を push するスクリプトを埋め込みました。userType (ユーザ属性) は、実際はサーバ側で RDB から取得した値を元に設定するのではないかと思います。

ユーザ個人を特定できる情報を渡すのは、規約に抵触しますので、個人は特定できないがユーザのカテゴリ分けはできる情報を設定する形になるかと思います。

    <script>
        var userTypes = ['A','B','C'];
        var userType = userTypes[Math.floor(Math.random() * userTypes.length)];
        window.dataLayer = window.dataLayer || [];
        dataLayer.push({'userType': userType});
    </script>

データレイヤーの変数を作成する

デフォルト値 UNKNOWN の データレイヤーの変数を作成して、HTML に定義した 値を取得します。
データレイヤーの<wbr>変数

トリガーを作成する

Page Path を配信対象の URL のみに絞り込んだトリガーを作成しました。
トリガーの種類を ページビュー・ウィンドウの<wbr>読み込み にしているのは、gatsbyjs/gatsby: ⚛️📄🚀 Blazing fast static site generator for React で静的 HTML を生成しており、ページの読み込んだ直後はデータレイヤー変数が書き出しが完了しないためです。1、2

トリガー

HTML カスタムタグを作成する

以下のような HTML カスタムタグを作成しました。
userType でデータレイヤ変数を参照し、switch 文で userType の値ごとに、設定する HTML を切り替えています。

<script>
  var userType = {{userType}};
  var container = document.getElementById("gtm-banner-container");
  if (typeof container !== "undefined") {
      switch (userType) {
          case "A":
              container.innerHTML = '<p>Hello GTM banner! Type [' + userType + ']</p>';
              break;
            case "B":
                container.innerHTML = '<p>こんにちわ GTM banner! Type [' + userType + ']</p>';
              break;
            case "C":
                container.innerHTML = '<p>Olá GTM banner! Type [' + userType + ']</p>';
              break;
          default:
              container.innerHTML = '<p>GTM banner! Type [' + userType + ']</p>';
              break;
      }
  }
</script>

バナーの出力イメージ

上記の設定後、ページを開くと以下のような文言が出力されます。この文言はページを開くたびにランダムで切り替わります。
バナー

ルックアップテーブルによりメッセージの切り替えを行う

GTM には、ルックアップテーブルという機能があります。 switch 文を、 ルックアップテーブルを使って置き換えてみました。ルックアップテーブルの機能の説明は、以下の記事がわかりやすいです。
Googleタグマネージャに新マクロ「ルックアップテーブル」が登場

このサイトには、ルックアップテーブル以外にも、「正規表現の表」変数で「部分一致が可能なルックアップテーブル的変数」が可能になりました という記事もあり、そちらも参考になりました。

今回は、「正規表現の表」までは必要なかったので、ルックアップテーブルを使用しました。以下、実装した箇所について説明します。

  • バナー文言を返す カスタムJavaScript 変数 を作成する
  • ルックアップテーブルを作成する
  • HTML カスタムタグを作成する

バナー文言を返す カスタムJavaScript 変数を作成する

ルックアップテーブルで使用する HTML 文言を返す JavaScript を作成します。
ユーザーの種別 A、B、C と デフォルトのバナー文言、計4つを作成しました。

  • A Banner
    A Banner には、showdownjs/showdown: A Markdown to HTML converter written in Javascript を使って マークダウンから文字列を変換するようにしてみました。画面のHTML側に、<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.8.2/showdown.js"></script> を追加して、読み込んだ showdown.js を使用しています。 

    function() {
    var converter = new showdown.Converter();
    var text = '**Hello, markdown! A Banner!!**  \n\
この文言は、GTMからマークダウン形式で配信しています。\
';
    var html = converter.makeHtml(text);
    return html;
}

  • B Banner 

    function () {
    return '\
    <p>Hello B Banner</p>\
    <p>この文言は、GTMからHTML形式で配信しています。</p>\
  ';
}

  • C Banner 

    function() {
    return "<p>Type C Banner</p>";
}

  • Default Banner 

    function() {
    return "<p>Default Banner</p>";     
}

ルックアップテーブルを作成する

上記の カスタム JavaScript 変数 使って以下のようなルックアップテーブルを作成しました。
入力として userType を使用し、出力として、カスタム JavaScript 変数を使用しています。
ルックアップテーブル

HTML カスタムタグを作成する

ルックアップテーブルを使用すると、HTML カスタムタグ はシンプルになります。switch 文の実装がまるっとなくなるイメージです。 

<script>
  var container = document.getElementById("gtm-banner-lookup-container");
  if (typeof container !== "undefined") {
      var html = {{userTypeBannerTable}};
      container.innerHTML = html;
  }
</script>

まとめ

GTM を使って、ユーザのカテゴリごとのバナー、メッセージ配信を実装してみました。以下、まとめます。

  • データレイヤ変数を用いることで、ユーザのカテゴリごとに、メッセージ配信を作ることはできる。

  • 実装方式は、switch 文、if 文を用いて、ごりごり記述も、ルックアップテーブルを用いて、分岐ロジックと文言の外だしもできる。

  • JavaScript が得意で、大したメッセージの配信を行わない場合、GTM で JavaScript を記述するほうがわかりやすいかもしれない。

  • JavaScript を実装したくない、中、大規模にメッセージ配信を行う場合は、ルックアップテーブルと、カスタム JavaScript で外だししたほうが使いまわしがきく。

カスタム変数で、HTML や、マークダウンを記述できる機能があると、リアルにメッセージ配信で使えるのですが、現状は機能として提供されていないようです。本来の使い方からは逸脱するかと思いますが、アプリケーションにメッセージを埋め込むよりは、GTM経由での配信が幸せになれそうに思います。
以上です。

  1. ページ生成時に、データレイヤー変数を書き出す方法があるのかもしれませんが、すぐには解決できなそうなため、諦めました。 ↩↩

  2. ページ遷移して表示すると、DOM のロードが終わっているため、GTMイベントが発行されません。 ↩

コメント

カテゴリー

最近の投稿