Google Tag Managerを利用する

このチャプターのゴール

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

Google Tag Managerとは

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

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

GTMの基本設定

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

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

miiboへのGTM設定

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

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

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

カスタマイズ要素

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

class名説明初期値(背景色)初期値(枠色)初期値(文字色)
.sidebarサイドバー# f5f6fa--
.text-mutedエージェント紹介文と提供者名--# aab0b7
.btn-secondaryサイドバーのボタン*# edeef6# edeef6# 212529
.text-dark会話履歴リスト--# 242939
.bg-lightAIのチャットバブル# 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; } ';

カスタマイズの適用手順

タグの作成方法

  1. GTMダッシュボードで「タグ」→「新規」をクリック

  2. タグ名を設定(例:「miibo カラーカスタマイズ」)

  3. タグの種類で「カスタムHTML」を選択

  4. カスタマイズコードを貼り付け

トリガーの設定

  1. タグ設定画面で「トリガー」セクションをクリック

  2. 「All Pages」を選択

  3. 「保存」をクリック

公開前の確認(プレビュー)

  1. GTMダッシュボードの右上にある「プレビュー」ボタンをクリック

  2. 新しいタブが開き、デバッグモードの開始プロセスが始まる

  3. チャットページのURLを入力して「接続」をクリック

  4. 指定したウェブサイトが別タブで開き、GTMデバッグパネルが表示される

  5. miiboチャットボットの表示を確認し、カラーが正しく適用されているか確認

  6. 問題がなければGTMダッシュボードに戻り、「バージョン名」を入力した上で「公開」をクリックし変更を公開


Did this page help you?