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

<特徴>

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

<注意事項>

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

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

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

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

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

【設定の書き換え方（詳細テキスト内）】
上部の <div class="ecc_prize"> の行をキャンペーンに合わせて書き換えます。
・data-name="〇〇"：結果画面に出るテキスト
・data-prob="〇〇"：当選確率（%）。※合計が必ず「100」になるようにしてください。
・data-url="〇〇"：当選後にタップしたときの遷移先URL

■タイトル（コピー用）

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

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

<!-- ▼ 当選設定（画面には表示されません。自由に書き換えてください） ▼ -->
<div id="ecc_omikuji_config" 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;">
  
  <div style="font-weight: bold !important; font-size: 18px !important; color: #b71c1c !important; margin-bottom: 5px !important; letter-spacing: 1px !important;">🔥 HAPPY SALE 運試し 🔥</div>
  <div 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 { 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);

  function initOmikuji() {
      var wrapper = document.getElementById('ecc_omikuji_wrapper');
      var box = document.getElementById('ecc_omikuji_box');
      var btn = document.getElementById('ecc_omikuji_btn');
      var resultArea = document.getElementById('ecc_omikuji_result');

      if (!wrapper || !box || !btn || wrapper.getAttribute('data-ecc-init') === 'true') return;
      wrapper.setAttribute('data-ecc-init', 'true');

      var prizes = [];
      var configElements = document.querySelectorAll('#ecc_omikuji_config .ecc_prize');
      if (configElements.length > 0) {
          for (var i = 0; i < configElements.length; i++) {
              prizes.push({
                  name: configElements[i].getAttribute('data-name'),
                  probability: parseFloat(configElements[i].getAttribute('data-prob')),
                  url: configElements[i].getAttribute('data-url')
              });
          }
      } else return;

      var isDrawing = false;
      var ecContainer = wrapper;
      while (ecContainer && ecContainer.tagName !== 'BODY' && ecContainer.tagName !== 'HTML') {
          var cls = ecContainer.className || '';
          if (cls.indexOf('ec-concier-widget-container') !== -1 || 
              cls.indexOf('ec-concier-preview-container') !== -1 ||
              cls.indexOf('ec-concier-frame') !== -1) {
              break;
          }
          ecContainer = ecContainer.parentNode;
      }
      if (ecContainer.tagName === 'BODY' || ecContainer.tagName === 'HTML') ecContainer = wrapper;

      wrapper.addEventListener('click', function(e) {
          var isTriggerClick = (e.target === btn || btn.contains(e.target) || e.target === box || box.contains(e.target));
          
          if (!isTriggerClick) { e.preventDefault(); e.stopPropagation(); return; }
          if (isDrawing) { e.preventDefault(); e.stopPropagation(); return; }
          isDrawing = true;
          e.preventDefault();

          var clone = ecContainer.cloneNode(true);
          clone.id = clone.id ? clone.id + '_clone' : 'ecc_top_clone';
          var cloneLinks = clone.querySelectorAll('a');
          for(var k = 0; k < cloneLinks.length; k++) cloneLinks[k].removeAttribute('href');
          if (clone.tagName === 'A') clone.removeAttribute('href');

          ecContainer.parentNode.insertBefore(clone, ecContainer.nextSibling);

          ecContainer.style.setProperty('opacity', '0', 'important');
          ecContainer.style.setProperty('pointer-events', 'none', 'important');
          ecContainer.style.setProperty('height', '0', 'important');
          ecContainer.style.setProperty('min-height', '0', 'important');
          ecContainer.style.setProperty('margin', '0', 'important');
          ecContainer.style.setProperty('padding', '0', 'important');
          ecContainer.style.setProperty('overflow', 'hidden', 'important');
          ecContainer.style.setProperty('border', 'none', 'important');

          clone.addEventListener('click', function(ev) {
              var t = ev.target;
              var isClose = false;
              while(t && t !== clone) {
                  var tcls = t.className || '';
                  if (tcls.indexOf('close') !== -1 || t.innerText === '×') { isClose = true; break; }
                  if (t.tagName === 'svg' || t.tagName === 'IMG') {
                      var rect = t.getBoundingClientRect();
                      if (rect.width > 0 && rect.width <= 40) { isClose = true; break; }
                  }
                  t = t.parentNode;
              }
              if(isClose) { ev.preventDefault(); ev.stopPropagation(); clone.remove(); }
          });

          var cBox = clone.querySelector('#ecc_omikuji_box');
          var cBtn = clone.querySelector('#ecc_omikuji_btn');
          var cResultArea = clone.querySelector('#ecc_omikuji_result');

          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; }
          }

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

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

          setTimeout(function(){
              clearInterval(shakeInterval);
              cBox.style.setProperty('transform', 'rotate(0deg)', 'important');
              
              cBtn.style.setProperty('visibility', 'hidden', 'important');
              
              cResultArea.innerHTML = 
                  '<span style="font-size:14px!important;color:#666!important;font-weight:bold!important;display:block!important;margin-bottom:10px!important;">あなたの運勢は...</span>' +
                  '<span style="font-size:20px!important;font-weight:bold!important;color:#b71c1c!important;display:block!important;margin-bottom:15px!important;">' + hit.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>';
              
              cResultArea.style.setProperty('position', 'absolute', 'important');
              cResultArea.style.setProperty('top', '50%', 'important');
              cResultArea.style.setProperty('left', '50%', 'important');
              cResultArea.style.setProperty('transform', 'translate(-50%, -50%)', 'important');
              cResultArea.style.setProperty('width', '85%', 'important');
              cResultArea.style.setProperty('z-index', '100', 'important');
              cResultArea.style.setProperty('background', 'rgba(255, 248, 248, 0.95)', 'important');
              cResultArea.style.setProperty('box-shadow', '0 4px 15px rgba(0,0,0,0.2)', 'important');
              cResultArea.style.setProperty('display', 'block', 'important');
              cResultArea.style.setProperty('padding', '15px', 'important');
              cResultArea.style.setProperty('border-radius', '8px', 'important');
              cResultArea.style.setProperty('border', '1px dashed #b71c1c', 'important');

              cResultArea.onclick = function(ev) {
                  ev.preventDefault(); ev.stopPropagation();
                  window.location.href = hit.url;
              };
          }, 1500);
      });
  }

  var insertListener = function(event) {
      if (event.animationName === 'eccOmikujiInserted') initOmikuji();
  };
  document.addEventListener('animationstart', insertListener, false);
  document.addEventListener('webkitAnimationStart', insertListener, false);
  if(document.getElementById('ecc_omikuji_wrapper')) initOmikuji();
})();
</script>

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

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

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

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

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

{[{category.name}]}

<特徴>

<注意事項>

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

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