<特徴>
１．ecコンシェルとGoogle Tag Manager（GTM）を組み合わせることで、システム開発なしで「本格的なルーレット」をサイト上に実装できます。
２．「当選確率」「当たりの名称」「遷移先URL」はecコンシェルの画面から簡単に変更可能です。一度GTMを設定すれば、以降はGTMを触る必要はありません。
３．ユーザーが自ら「START」を押してアタリを引き当てるため、通常のバナーよりも高いクリック率やクーポン利用率が期待できます。
<注意事項>
※本設定は高度なカスタマイズとなります。
マニュアル通りのコピー＆ペーストで動作するように設計されていますが、指定のIDやHTML構造を変更・削除すると動作しなくなりますのでご注意ください。
必ずテスト配信にて「タップ時にアニメーションが動作するか」「確率通りに当たるか」「正しいURLに遷移するか」など想定通り動作するかを確認してから本番公開をお願いいたします。
マニュアル通りのコピー＆ペーストで動作するように設計されていますが、指定のIDやHTML構造を変更・削除すると動作しなくなりますのでご注意ください。
必ずテスト配信にて「タップ時にアニメーションが動作するか」「確率通りに当たるか」「正しいURLに遷移するか」など想定通り動作するかを確認してから本番公開をお願いいたします。
<使用手順1：ecコンシェル側の設定>
１．キャンペーン設定画面で「なにを」＞「ウィジェットを登録する」をクリックし、テンプレートから「J-001 タイトル+詳細テキスト」を選択します。
２．「テキスト」メニューを開き、入力タイプを「HTML」に変更します。
３．以下のHTMLコードをコピーして貼り付けます。
【設定の書き換え方（詳細テキスト内）】
上部の
・
・
・
・
上部の
<div class="ecc_prize"> の行をキャンペーンに合わせて書き換えます。・
data-name="〇〇"：結果画面に出るテキスト・
data-prob="〇〇"：当選確率（%）。※合計が必ず「100」になるようにしてください。・
data-url="〇〇"：当選後にタップしたときの遷移先URL・
data-degree="〇〇"：止まる角度（※変更しないでください）■タイトル（コピー用）
<div style="text-align: center !important; font-weight: bold;">限定クーポンが当たる！</div>■詳細テキスト（コピー用）
<!-- ▼ 当選設定（画面には表示されません。自由に書き換えてください） ▼ -->
<div id="ecc_roulette_config" style="display: none !important;">
<div class="ecc_prize" data-name="【大当】50%OFF" data-prob="10" data-degree="0" data-url="https://example.com/50off"></div>
<div class="ecc_prize" data-name="送料無料クーポン" data-prob="30" data-degree="90" data-url="https://example.com/free"></div>
<div class="ecc_prize" data-name="10%OFFクーポン" data-prob="30" data-degree="180" data-url="https://example.com/10off"></div>
<div class="ecc_prize" data-name="500円引クーポン" data-prob="30" data-degree="270" data-url="https://example.com/500"></div>
</div>
<!-- ▼ ルーレット本体（※ここは絶対に書き換えないでください） ▼ -->
<div id="ecc_roulette_wrapper" style="position: relative !important; width: 100% !important; max-width: 320px !important; margin: 0 auto !important; padding: 25px 15px !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-size: 12px !important; color: #666 !important; margin-bottom: 20px !important;">STARTをタップして回そう！</div>
<div style="position: relative !important; width: 200px !important; height: 200px !important; margin: 0 auto 15px !important;">
<div style="position: absolute !important; top: -12px !important; left: 50% !important; transform: translateX(-50%) !important; width: 0 !important; height: 0 !important; border-left: 15px solid transparent !important; border-right: 15px solid transparent !important; border-top: 22px solid #333 !important; z-index: 10 !important;"></div>
<div id="ecc_roulette_board" style="width: 100% !important; height: 100% !important; border-radius: 50% !important; border: 4px solid #333 !important; box-sizing: border-box !important; position: relative !important; overflow: hidden !important; background: conic-gradient(from -45deg, #b71c1c 0deg 90deg, #fff 90deg 180deg, #b71c1c 180deg 270deg, #fff 270deg 360deg) !important; transform: rotate(0deg) !important;">
<div style="position: absolute !important; width: 80px !important; height: 20px !important; top: 86px !important; left: 96px !important; transform-origin: 0 50% !important; transform: rotate(-90deg) translate(30px, 0) !important; color: #fff !important; font-weight: bold !important; font-size: 13px !important; line-height: 20px !important; text-align: left !important;">50%OFF</div>
<div style="position: absolute !important; width: 80px !important; height: 20px !important; top: 86px !important; left: 96px !important; transform-origin: 0 50% !important; transform: rotate(0deg) translate(30px, 0) !important; color: #b71c1c !important; font-weight: bold !important; font-size: 13px !important; line-height: 20px !important; text-align: left !important;">500円引</div>
<div style="position: absolute !important; width: 80px !important; height: 20px !important; top: 86px !important; left: 96px !important; transform-origin: 0 50% !important; transform: rotate(90deg) translate(30px, 0) !important; color: #fff !important; font-weight: bold !important; font-size: 13px !important; line-height: 20px !important; text-align: left !important;">10%OFF</div>
<div style="position: absolute !important; width: 80px !important; height: 20px !important; top: 86px !important; left: 96px !important; transform-origin: 0 50% !important; transform: rotate(180deg) translate(30px, 0) !important; color: #b71c1c !important; font-weight: bold !important; font-size: 13px !important; line-height: 20px !important; text-align: left !important;">送料無料</div>
</div>
<div id="ecc_roulette_btn" style="position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 60px !important; height: 60px !important; background: #333 !important; color: #fff !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: bold !important; font-size: 14px !important; cursor: pointer !important; border: 3px solid #fff !important; z-index: 11 !important; box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;">START</div>
</div>
<div id="ecc_roulette_result" style="display: none !important;"></div>
</div>４．「表示設定（リンク先URL）」にデフォルトのキャンペーンURL等を設定し、保存します。
<使用手順2：GTM側の設定>
１．Google Tag Manager（GTM）の管理画面で「タグ」＞「新規」をクリックします。
２．タグタイプを「カスタム HTML」に設定します。
３．以下のスクリプトをコピーして貼り付けます。（※コードの編集は一切不要です）
■GTM用スクリプト（コピー用）
<script>
(function() {
var css = '@keyframes eccRouletteInserted { from { opacity: 0.99; } to { opacity: 1; } } ' +
'#ecc_roulette_wrapper { animation: eccRouletteInserted 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 initRoulette() {
var wrapper = document.getElementById('ecc_roulette_wrapper');
var board = document.getElementById('ecc_roulette_board');
var btn = document.getElementById('ecc_roulette_btn');
var resultArea = document.getElementById('ecc_roulette_result');
if (!wrapper || !board || !btn || wrapper.getAttribute('data-ecc-init') === 'true') return;
wrapper.setAttribute('data-ecc-init', 'true');
var prizes = [];
var configElements = document.querySelectorAll('#ecc_roulette_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')),
degree: parseInt(configElements[i].getAttribute('data-degree')),
url: configElements[i].getAttribute('data-url')
});
}
} else return;
var isSpinning = 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 isBtnClick = (e.target === btn || btn.contains(e.target));
if (!isBtnClick) { e.preventDefault(); e.stopPropagation(); return; }
if (isSpinning) { e.preventDefault(); e.stopPropagation(); return; }
isSpinning = 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 cBoard = clone.querySelector('#ecc_roulette_board');
var cBtn = clone.querySelector('#ecc_roulette_btn');
var cResultArea = clone.querySelector('#ecc_roulette_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 = '回転中...';
cBoard.style.setProperty('transform', 'rotate(0deg)', 'important');
cBoard.style.setProperty('transition', 'transform 3s cubic-bezier(0.25, 0.1, 0.25, 1)', 'important');
setTimeout(function() {
cBoard.style.setProperty('transform', 'rotate(' + (1800 + hit.degree) + 'deg)', 'important');
}, 50);
setTimeout(function(){
cBtn.style.setProperty('display', 'none', 'important');
cResultArea.innerHTML =
'<span style="font-size:14px!important;color:#666!important;font-weight:bold!important;display:block!important;">おめでとうございます！</span>' +
'<span style="font-size:18px!important;font-weight:bold!important;color:#b71c1c!important;display:block!important;margin-top:5px!important;">' + hit.name + '</span>' +
'<span style="font-size:12px!important;color:#000!important;display:block!important;margin-top:10px!important;text-decoration:underline!important;cursor:pointer;">ここをタップして獲得！</span>';
cResultArea.style.setProperty('position', 'absolute', 'important');
cResultArea.style.setProperty('top', '55%', '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, 243, 243, 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;
};
}, 3050);
});
}
var insertListener = function(event) {
if (event.animationName === 'eccRouletteInserted') initRoulette();
};
document.addEventListener('animationstart', insertListener, false);
document.addEventListener('webkitAnimationStart', insertListener, false);
if(document.getElementById('ecc_roulette_wrapper')) initRoulette();
})();
</script>４．タグを配信するための「トリガー」を設定します。
【推奨設定】
ecコンシェルのキャンペーンを配信する予定のページにのみスクリプトが読み込まれるよう設定することをおすすめします。
・トリガーのタイプ：ページビュー
・発生場所：一部のページビュー
・条件例：Page Path が /example から始まる等ルーレットウィジェットを配信する予定のページを指定
※サイト全域で一律稼働させたい場合は「All Pages」を選択しても問題ありませんが、サイトの表示速度や運用ルールの観点から、必要なページに絞ることを推奨します。
５．設定を保存し、Google Tag Managerのプレビュー機能やテスト環境等と、ecコンシェルのプレビュー機能を活用し実際の画面でルーレットが動くか確認してください。
６．GTMを「公開（リリース）」して完了です。