[高度なカスタマイズ事例]おみくじウィジェット – ecコンシェルサポートサイト

<特徴>

１．ecコンシェルとGoogle Tag Manager（GTM）を組み合わせることで、システム開発なしで「おみくじ機能」をサイト上に実装できます。
２．「当選確率」「当たりの名称」「遷移先URL」や「表示されるテキスト」はecコンシェルの画面から簡単に変更可能です。一度GTMを設定すれば、以降はGTMを触る必要はありません。
３．季節のイベント（お正月など）や日常の運試しコンテンツとして、ユーザーの回遊率や購買意欲の向上に貢献します。

<注意事項>

※本設定は高度なカスタマイズとなります。
マニュアル通りのコピー＆ペーストで動作するように設計されていますが、指定のIDやHTML構造を変更・削除すると動作しなくなりますのでご注意ください。
必ずテスト配信にて「タップ時にアニメーションが動作するか」「確率通りに当たるか」「正しいURLに遷移するか」など想定通り動作するかを確認してから本番公開をお願いいたします。

<使用手順1：ecコンシェル側の設定>

１．キャンペーン設定画面で「なにを」＞「ウィジェットを登録する」をクリックし、テンプレートから「J-001 タイトル+詳細テキスト」を選択します。

２．「テキスト」メニューを開き、入力タイプを「HTML」に変更します。

３．以下のHTMLコードをコピーして貼り付けます。

【設定の書き換え方（詳細テキスト内）】
上部の <div id="ecc_omikuji_config"> および <div class="ecc_prize"> の行をキャンペーンに合わせて書き換えます。

■テキスト設定
・data-title="〇〇"：おみくじ上部のメインテキスト
・data-desc="〇〇"：おみくじ上部のサブテキスト
・data-result-title="〇〇"：結果画面の上部に出るテキスト

■当選設定
※おみくじの結果パターンは、行をコピーして増やすことでいくつでも自由に設定可能です。（大吉・中吉・小吉・末吉・凶など）
・data-name="〇〇"：結果画面に出るテキスト
・data-prob="〇〇"：当選確率（%）。※すべての項目の合計が必ず「100」になるようにしてください。
・data-url="〇〇"：当選後にタップしたときの遷移先URL

■タイトル例（コピー用）

<div style="text-align: center !important; font-weight: bold;">運試しに挑戦！</div>

■詳細テキスト例（コピー用）

<!-- ▼ おみくじ設定（自由に書き換えてください） ▼ -->
<!--
  【テキスト設定】
  data-title: おみくじ上部のメインテキスト
  data-desc: おみくじ上部のサブテキスト
  data-result-title: 結果画面に出るタイトル
-->
<div id="ecc_omikuji_config" 
     data-title="HAPPY SALE 運試し" 
     data-desc="タップしておみくじを引いてみよう！" 
     data-result-title="あなたの運勢は..." 
     style="display: none !important;">
     
  <!-- 【当選設定（行数は自由に増減可能）】 -->
  <div class="ecc_prize" data-name="【大吉】さらに10%OFF！" data-prob="10" data-url="https://example.com/daikichi"></div>
  <div class="ecc_prize" data-name="【中吉】送料無料" data-prob="30" data-url="https://example.com/chukichi"></div>
  <div class="ecc_prize" data-name="【小吉】500円分ポイント" data-prob="60" data-url="https://example.com/shokichi"></div>
</div>

<!-- ▼ おみくじ本体（※ここから下は絶対に書き換えないでください） ▼ -->
<div id="ecc_omikuji_wrapper" style="position: relative !important; width: 100% !important; max-width: 300px !important; margin: 0 auto !important; padding: 25px 15px !important; z-index: 10 !important; text-align: center !important; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; background: #fff !important; border-radius: 8px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important; border: 2px solid #b71c1c !important; box-sizing: border-box !important;">
  
  <!-- テキストはJSで自動挿入されます -->
  <div id="ecc_omikuji_title" style="font-weight: bold !important; font-size: 18px !important; color: #b71c1c !important; margin-bottom: 5px !important; letter-spacing: 1px !important;"></div>
  <div id="ecc_omikuji_desc" style="font-size: 12px !important; color: #666 !important; margin-bottom: 15px !important;"></div>
  
  <div id="ecc_omikuji_box" style="font-size: 70px !important; line-height: 1 !important; margin-bottom: 15px !important; cursor: pointer !important; display: inline-block !important; user-select: none !important; transition: transform 0.1s !important;">⛩️</div>
  <br>
  
  <button id="ecc_omikuji_btn" style="background: #b71c1c !important; color: #fff !important; border: none !important; padding: 12px 30px !important; font-size: 16px !important; font-weight: bold !important; border-radius: 25px !important; cursor: pointer !important; box-shadow: 0 4px 0 #8e181c !important; outline: none !important; display: inline-block !important; line-height: 1 !important; transition: all 0.1s !important;">おみくじを引く！</button>
  
  <div id="ecc_omikuji_result" style="display: none !important;"></div>
</div>

４．「表示設定（リンク先URL）」にデフォルトのキャンペーンURL等を設定し、保存します。

<使用手順2：GTM側の設定>

１．Google Tag Manager（GTM）の管理画面で「タグ」＞「新規」をクリックします。
２．タグタイプを「カスタム HTML」に設定します。
３．以下のスクリプトをコピーして貼り付けます。（※コードの編集は一切不要です）

■GTM用スクリプト（コピー用）

<script>
(function() {
  var css = '@keyframes eccOmikujiInserted { from { opacity: 0.99; } to { opacity: 1; } } ' +
            '#ecc_omikuji_wrapper, [data-ecc-wrapper="omikuji"] { animation: eccOmikujiInserted 0.001s; }';
  var style = document.createElement('style');
  style.type = 'text/css';
  if (style.styleSheet) style.styleSheet.cssText = css;
  else style.appendChild(document.createTextNode(css));
  document.head.appendChild(style);

  window._ecc_omikuji_memory = window._ecc_omikuji_memory || {};
  if (!window._ecc_omikuji_clear_timer_set) {
      window._ecc_omikuji_clear_timer_set = true;
      setInterval(function() {
          var container = document.querySelector('.ec-concier-widget-container, .ec-concier-frame');
          if (!container) window._ecc_omikuji_memory = {}; 
      }, 1000);
  }

  function initOmikuji(wrapper) {
      if (!wrapper || wrapper.getAttribute('data-ecc-init') === 'true') return;
      wrapper.setAttribute('data-ecc-init', 'true');
      wrapper.setAttribute('data-ecc-wrapper', 'omikuji');

      var config = null;
      var pNode = wrapper.parentNode;
      if (pNode) config = pNode.querySelector('[id="ecc_omikuji_config"]');
      if (!config) {
          var prev = wrapper.previousElementSibling;
          if (prev && prev.id === 'ecc_omikuji_config') config = prev;
      }
      if (!config) config = document.getElementById('ecc_omikuji_config');
      if (!config) return;

      var prizeEls = config.querySelectorAll('.ecc_prize');
      if (prizeEls.length === 0) return;

      var box = wrapper.querySelector('[id="ecc_omikuji_box"]');
      var btn = wrapper.querySelector('[id="ecc_omikuji_btn"]');
      if (!box || !btn) return;

      var resultTitleText = 'あなたの運勢は...';
      if (config.hasAttribute('data-result-title')) {
          resultTitleText = config.getAttribute('data-result-title');
      }
      var titleEl = wrapper.querySelector('[id="ecc_omikuji_title"]');
      if (titleEl) {
          titleEl.innerHTML = config.hasAttribute('data-title') ? config.getAttribute('data-title') : '🔥 HAPPY SALE 運試し 🔥';
      }
      var descEl = wrapper.querySelector('[id="ecc_omikuji_desc"]');
      if (descEl) {
          descEl.innerHTML = config.hasAttribute('data-desc') ? config.getAttribute('data-desc') : 'タップしておみくじを引いてみよう！';
      }

      var prizes = [];
      var campaignId = "";
      for (var i = 0; i < prizeEls.length; i++) {
          var name = prizeEls[i].getAttribute('data-name');
          campaignId += name || "";
          prizes.push({
              name: name,
              probability: parseFloat(prizeEls[i].getAttribute('data-prob')),
              url: prizeEls[i].getAttribute('data-url'),
              index: i
          });
      }
      campaignId = campaignId.replace(/[^a-zA-Z0-9]/g, '');

      var resultArea = wrapper.querySelector('[id="ecc_omikuji_result"]');
      if (!resultArea) {
          resultArea = document.createElement('div');
          resultArea.id = 'ecc_omikuji_result';
          wrapper.appendChild(resultArea);
      }

      var savedIndex = window._ecc_omikuji_memory[campaignId] !== undefined ? window._ecc_omikuji_memory[campaignId] : null;

      function showResult(hitItem) {
          btn.style.setProperty('display', 'none', 'important');
          resultArea.innerHTML = 
              '<span style="font-size:14px!important;color:#666!important;font-weight:bold!important;display:block!important;margin-bottom:10px!important;">' + resultTitleText + '</span>' +
              '<span style="font-size:20px!important;font-weight:bold!important;color:#b71c1c!important;display:block!important;margin-bottom:15px!important;">' + hitItem.name + '</span>' +
              '<span style="font-size:12px!important;color:#fff!important;background:#b71c1c!important;padding:10px 20px!important;border-radius:20px!important;display:inline-block!important;font-weight:bold!important;cursor:pointer;">ここをタップして獲得！</span>';
          
          resultArea.style.setProperty('position', 'absolute', 'important');
          resultArea.style.setProperty('top', '50%', 'important');
          resultArea.style.setProperty('left', '50%', 'important');
          resultArea.style.setProperty('transform', 'translate(-50%, -50%)', 'important');
          resultArea.style.setProperty('width', '85%', 'important');
          resultArea.style.setProperty('box-sizing', 'border-box', 'important');
          resultArea.style.setProperty('z-index', '100', 'important');
          resultArea.style.setProperty('background', 'rgba(255, 248, 248, 0.95)', 'important');
          resultArea.style.setProperty('box-shadow', '0 4px 15px rgba(0,0,0,0.2)', 'important');
          resultArea.style.setProperty('display', 'block', 'important');
          resultArea.style.setProperty('padding', '15px', 'important');
          resultArea.style.setProperty('border-radius', '8px', 'important');
          resultArea.style.setProperty('border', '1px dashed #b71c1c', 'important');
      }

      if (savedIndex !== null && prizes[savedIndex]) {
          showResult(prizes[savedIndex]);
      } else {
          resultArea.style.setProperty('display', 'none', 'important');
      }

      var isAnimating = false;
      
      var interceptor = function(e) {
          if (window._ecc_ignore_interceptor) return;
          if (!document.body.contains(wrapper)) {
              window.removeEventListener(e.type, interceptor, true);
              return;
          }

          var mainBanner = wrapper;
          var pNode = wrapper.parentNode;
          while(pNode && pNode.tagName !== 'BODY' && pNode.tagName !== 'HTML') {
              if (typeof pNode.className === 'string' && pNode.className.indexOf('ec-concier-layout-wrapper') !== -1) {
                  mainBanner = pNode; break;
              }
              pNode = pNode.parentNode;
          }

          if (e.target === mainBanner || mainBanner.contains(e.target)) {
              e.stopPropagation();

              if (e.type === 'click') {
                  e.preventDefault();

                  var isStart = (e.target === btn || btn.contains(e.target) || e.target === box || box.contains(e.target));
                  var isRes = (resultArea.style.display !== 'none' && (e.target === resultArea || resultArea.contains(e.target)));

                  if (isStart) {
                      if (isAnimating || savedIndex !== null) return;
                      isAnimating = true;

                      var rand = Math.random() * 100, cumulative = 0, hit = prizes[prizes.length - 1];
                      for (var j = 0; j < prizes.length; j++) {
                          cumulative += prizes[j].probability;
                          if (rand <= cumulative) { hit = prizes[j]; break; }
                      }

                      window._ecc_omikuji_memory[campaignId] = hit.index;
                      savedIndex = hit.index;

                      btn.style.setProperty('background', '#999', 'important');
                      btn.innerText = 'おみくじを引いています...';
                      btn.style.setProperty('box-shadow', 'none', 'important');
                      btn.style.setProperty('transform', 'translateY(2px)', 'important');

                      var shakeInterval = setInterval(function() {
                          var deg = (Math.random() * 30) - 15;
                          box.style.setProperty('transform', 'rotate(' + deg + 'deg)', 'important');
                      }, 80);

                      setTimeout(function(){
                          clearInterval(shakeInterval);
                          box.style.setProperty('transform', 'rotate(0deg)', 'important');
                          showResult(hit);
                          isAnimating = false;
                      }, 1500);

                  } else if (isRes) {
                      if (savedIndex !== null && !isAnimating) {
                          window._ecc_ignore_interceptor = true;
                          var targetPrize = prizeEls[savedIndex];
                          if (targetPrize) { try { targetPrize.click(); } catch(err){} }
                          window._ecc_ignore_interceptor = false;
                          
                          var destUrl = prizes[savedIndex].url;
                          if (destUrl && destUrl !== 'javascript:void(0)') {
                              setTimeout(function(){ window.location.href = destUrl; }, 100);
                          }
                      }
                  }
              }
          }
      };

      if (!wrapper.hasAttribute('data-click-bound')) {
          wrapper.setAttribute('data-click-bound', 'true');
          ['mousedown', 'mouseup', 'touchstart', 'touchend', 'pointerdown', 'pointerup', 'click'].forEach(function(ev) {
              window.addEventListener(ev, interceptor, true);
          });
      }
  }

  function scanAndInit() {
      var wrappers = document.querySelectorAll('[id="ecc_omikuji_wrapper"], [data-ecc-wrapper="omikuji"]');
      for(var i=0; i<wrappers.length; i++) initOmikuji(wrappers[i]);
  }

  var insertListener = function(event) {
      if (event.animationName === 'eccOmikujiInserted') scanAndInit();
  };
  document.addEventListener('animationstart', insertListener, false);
  document.addEventListener('webkitAnimationStart', insertListener, false);
  
  function startObserver() {
      if (!document.body) { setTimeout(startObserver, 100); return; }
      var scanTimer;
      var observer = new MutationObserver(function() { clearTimeout(scanTimer); scanTimer = setTimeout(function() { scanAndInit(); }, 200); });
      observer.observe(document.body, { childList: true, subtree: true });
      setTimeout(scanAndInit, 500);
  }
  startObserver();
  scanAndInit();
})();
</script>

４．タグを配信するための「トリガー」を設定します。

【推奨設定】
ecコンシェルのキャンペーンを配信する予定のページにのみスクリプトが読み込まれるよう設定することをおすすめします。
・トリガーのタイプ：ページビュー
・発生場所：一部のページビュー
・条件例：Page Path が /example から始まる等おみくじウィジェットを配信する予定のページを指定

※サイト全域で一律稼働させたい場合は「All Pages」を選択しても問題ありませんが、サイトの表示速度や運用ルールの観点から、必要なページに絞ることを推奨します。

５．設定を保存し、Google Tag Managerのプレビュー機能やテスト環境等と、ecコンシェルのプレビュー機能を活用し実際の画面でおみくじが動くか確認してください。

６．GTMを「公開（リリース）」して完了です。

{[{category.name}]}

<特徴>

<注意事項>

<使用手順1：ecコンシェル側の設定>

<使用手順2：GTM側の設定>