このチャプターのゴール

Google Tag Manager(GTM)の基本的な設定方法を理解できている
GTMを使ったmiiboのUIカラーカスタマイズ方法を理解できている

Google Tag Managerとは

Google Tag Manager（GTM）は、Webサイトやアプリにタグを追加・管理し、コードを直接編集せずにマーケティングや分析のタグを管理できるGoogleのツールです。
miiboでは、GTMを使用することで以下のようなカスタマイズが可能になります。

アクセス解析の設定
UIのカスタマイズ（色、デザインなど）

GTMの基本設定

アカウントとコンテナの作成

Google Tag Manager公式サイトにアクセスし、Googleアカウントでログイン
「アカウントを作成」をクリック
アカウント設定で以下を入力：
- アカウント名：会社名や組織名を入力　(例：「サンプルサイト」）
- 国：「日本」を選択
- 「次へ」をクリック
コンテナの設定：
- コンテナ名：エージェント名などを入力（例：「miibo_custom」）
- ターゲットプラットフォーム：「ウェブ」を選択
- 「作成」をクリック
利用規約に同意して「はい」をクリック
インストール用のコードを取得

miiboへのGTM設定

管理画面のサイドバーから「外部サービス連携」をクリック
一覧から「Google Tag Managerを利用する」をクリック
GTMで表示されたインストール用のコードの1つ目をmiiboのhead用タグ欄に貼り付ける
コードの2つ目をmiiboのbody用タグ欄に貼り付ける
「設定を保存する」で完了

GTMの活用例：UIカスタマイズ

miiboのチャットインターフェースは、GTMを使用して要素をカスタマイズすることが可能です。

カスタマイズ要素

サンプルでは以下の要素のカラーカスタマイズを行なっています(ライトモード)

class名	説明	初期値(背景色)	初期値(枠色)	初期値(文字色)
.sidebar	サイドバー	# f5f6fa	-	-
.text-muted	エージェント紹介文と提供者名	-	-	# aab0b7
.btn-secondary	サイドバーのボタン*	# edeef6	# edeef6	# 212529
.text-dark	会話履歴リスト	-	-	# 242939
.bg-light	AIのチャットバブル	# f5f6fa	-	# 7f808c
.bg-primary	ユーザーのチャットバブル	# 0176ff	-	-
.btn-basic	クイックリプライ	# fff	# fff	# 212529
.btn-primary	送信ボタン*	# 0176ff	# 0176ff	-
.chat-footer	ユーザーの入力欄	# fff	-	-

※ ボタンにはマウスオーバー(hover)も設定可能です

カスタマイズ用のサンプルコード

各要素について、カスタマイズしたい色のカラーコードで書き換えます。
カラーコードはHEX形式（#FFFFFFなど）で指定してください。

<script>
// グローバルスコープで即時実行
var customStyleInjected = false;

// 各パーツの色を変更する
var css = '\
  .card-body .text-muted { color: #XXXXXX !important; }\
  .sidebar { background-color: #XXXXXX !important; }\
  .card-body .btn.btn-secondary { background-color: #XXXXXX !important; border-color: #XXXXXX !important; color: #XXXXXX !important; }\
  .card-body .btn.btn-secondary:hover { background-color: #XXXXXX !important; border-color: #XXXXXX !important; }\
  .list-group .text-dark { color: #XXXXXX !important; }\
  .message-row .message-content.bg-light { background-color: #XXXXXX !important; color: #XXXXXX !important; }\
  .message-content.bg-primary { background-color: #XXXXXX !important; }\
  .btn-primary,\
  button.btn-primary,\
  input.btn-primary,\
  a.btn-primary,\
  .btn.btn-primary,\
  [class*="btn-primary"] { background-color: #XXXXXX !important; border-color: #XXXXXX !important; }\
  .btn-primary:hover { background-color: #XXXXXX !important; border-color: #XXXXXX !important; }\
  .card .btn-block.btn-basic { background-color: #XXXXXX !important; border-color: #XXXXXX !important; color: #XXXXXX !important }\
  .chat-footer { background-color: #XXXXXX !important; }\
';

// スタイルを注入する関数
function injectStyles() {
  if (customStyleInjected) return;
  
  var style = document.createElement('style');
  style.type = 'text/css';
  style.setAttribute('data-gtm-style', 'custom');
  style.setAttribute('data-priority', 'highest');
  
  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }

  // headタグに直接挿入を試みる
  var head = document.head || document.getElementsByTagName('head')[0];
  if (head) {
    head.insertBefore(style, head.firstChild);
    customStyleInjected = true;
    return;
  }

  // headタグがない場合は作成して挿入
  head = document.createElement('head');
  head.appendChild(style);
  document.documentElement.insertBefore(head, document.documentElement.firstChild);
  customStyleInjected = true;
}


// 即時実行
injectStyles();

// documentが存在しない場合のバックアップ
if (!document.body) {
  (function checkAndInject() {
    if (document.body) {
      injectStyles();
    } else {
      setTimeout(checkAndInject, 1);
    }
  })();
}

// readyStateの変更を監視
document.onreadystatechange = function() {
  injectStyles();
};

// バックアップとしてDOMContentLoadedでも実行
document.addEventListener('DOMContentLoaded', function() {
  injectStyles();
});

// MutationObserverの設定
if (window.MutationObserver) {
  var observer = new MutationObserver(function(mutations) {
    var shouldUpdate = mutations.some(function(mutation) {
      return mutation.addedNodes.length > 0 || 
             (mutation.attributeName === 'class' && 
              mutation.target.classList.contains('btn-primary'));
    });
    if (shouldUpdate) {
      injectStyles();
    }
  });

  // bodyが利用可能になったら監視を開始
  (function startObserver() {
    if (document.body) {
      observer.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: true,
        attributeFilter: ['class']
      });
    } else {
      setTimeout(startObserver, 1);
    }
  })();
}

// 最後のバックアップとして短いインターバルで確認
setInterval(function() {
  injectStyles();
}, 50);
</script>

※ カラーコード後ろの!importantは削除しないでください

適用イメージ

各要素のカラーコードを書き換えると以下のように適用されます。

適用したスタイル

// 各パーツの色を変更する  
var css = '  
  .card-body h5 { color: #d92361 !important; }  
  .card-body .text-muted { color: #a3869c !important; }  
  .sidebar { background-color: #e2c2cd !important; }  
  .card-body .btn.btn-secondary { background-color: #faf5f7 !important; border-color: #e2c2cd !important; color: #c8406e !important; }  
  .card-body .btn.btn-secondary:hover { background-color: #f3dee5 !important; border-color: #f3dee5 !important; }  
  .list-group .text-dark { color: #c8406e !important; }  
  .message-row .message-content.bg-light { background-color: #faf5f7 !important; color: #cb7694 !important; }  
  .message-content.bg-primary { background-color: #d82461 !important; }  
  .btn-primary,  
  button.btn-primary,  
  input.btn-primary,  
  a.btn-primary,  
  .btn.btn-primary,  
  [class*="btn-primary"] { background-color: #d82461 !important; border-color: #d82461 !important; }  
  .btn-primary:hover { background-color: #ff4585 !important; border-color: #ff4585 !important; }  
  .card .btn-block.btn-basic { background-color: #faf5f7 !important; border-color: #e2c2cd !important; color: #c8406e !important }  
  .chat-footer { background-color: #f4f4f4 !important; }  
';