<特徴>
１．ecコンシェルとGoogle Tag Manager（GTM）を組み合わせることで、サイトのシステム開発なしで、リアルタイムに動くカウントダウンタイマーを簡単に実装できます。
２．「終了日時（分単位まで）」「タイマー上部のテキスト」「終了時のメッセージ」「背景色」はecコンシェルの画面から簡単に変更可能です。一度GTMを設定してしまえば、以降のキャンペーン設定でGTMを操作する必要はありません。
３．タイムセールやキャンペーン終了間近の「駆け込み需要」を視覚的に強く喚起し、コンバージョン率の向上が期待できます。
<注意事項>
※本設定は高度なカスタマイズとなります。
マニュアル通りのコピー＆ペーストで動作するように設計されていますが、指定のIDやHTML構造を変更・削除すると動作しなくなりますのでご注意ください。
必ずテスト配信にて「正しくカウントダウンが進むか」「指定のリンク先に遷移するか」など、想定通り動作するかを確認してから本番公開をお願いいたします。
マニュアル通りのコピー＆ペーストで動作するように設計されていますが、指定のIDやHTML構造を変更・削除すると動作しなくなりますのでご注意ください。
必ずテスト配信にて「正しくカウントダウンが進むか」「指定のリンク先に遷移するか」など、想定通り動作するかを確認してから本番公開をお願いいたします。
<使用手順1：ecコンシェル側の設定>
１．キャンペーン設定画面で「なにを」、「ウィジェットを登録する」の順でクリックします
２．テンプレートから「J-001 タイトル+詳細テキスト」をクリックします
３．「テキスト」メニューを開き、入力タイプを「HTML」に変更します
４．以下のようにHTMLコードを入力します
【設定の書き換え方（詳細テキスト内）】
上部の
・
・
・
・
上部の
<div id="ecc_countdown_config"> の行をキャンペーンに合わせて書き換えます。・
data-end="〇〇"：終了日時。必ず「YYYY/MM/DD HH:MM」の形式で入力してください。（例：2026/09/30 23:59）・
data-title="〇〇"：タイマーの上部に表示されるテキスト・
data-finish-text="〇〇"：カウントが「0」になった際に表示されるテキスト・
data-bg="〇〇"：タイマー背景のカラーコード（#333333 など）■タイトル例（コピー用）
<div style="text-align: center !important; font-weight: bold;">タイムセール終了まで残り</div>■詳細テキスト例（コピー用）
<!-- ▼ カウントダウン設定（自由に書き換えてください） ▼ -->
<!--
data-end: 終了日時（YYYY/MM/DD HH:MM 形式）
data-title: タイマー上部のテキスト
data-finish-text: カウントが0になった時に表示するテキスト
data-bg: タイマーの背景色
-->
<div id="ecc_countdown_config"
data-end="2026/09/30 23:59"
data-title="秋の特別キャンペーン終了まで残り"
data-finish-text="本キャンペーンは終了いたしました"
data-bg="#7B101E"
style="display: none !important;">
</div>
<!-- ▼ カウントダウン本体（※ここから下は絶対に書き換えないでください） ▼ -->
<div id="ecc_countdown_wrapper" style="position: relative !important; width: 100% !important; max-width: 320px !important; margin: 0 auto !important; padding: 25px 15px !important; box-sizing: border-box !important; z-index: 10 !important; text-align: center !important; font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif !important; background: #ffffff !important; border-radius: 12px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; border: 1px solid #e0e0e0 !important;">
<div id="ecc_countdown_title" style="font-size: 14px !important; font-weight: bold !important; color: #333 !important; margin-bottom: 15px !important; letter-spacing: 1px !important;"></div>
<!-- タイマー部分 -->
<div id="ecc_countdown_timer" style="display: flex !important; justify-content: center !important; align-items: baseline !important; gap: 8px !important;">
<div style="display: flex !important; flex-direction: column !important; align-items: center !important;">
<span id="ecc_hour" style="font-size: 28px !important; font-weight: bold !important; color: #fff !important; background-color: #333 !important; padding: 8px 12px !important; border-radius: 8px !important; line-height: 1 !important; min-width: 45px !important; text-align: center !important; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.2) !important;">00</span>
<span style="font-size: 11px !important; color: #666 !important; margin-top: 4px !important; font-weight: bold !important;">時間</span>
</div>
<span style="font-size: 20px !important; font-weight: bold !important; color: #333 !important; margin-bottom: 20px !important;">:</span>
<div style="display: flex !important; flex-direction: column !important; align-items: center !important;">
<span id="ecc_minute" style="font-size: 28px !important; font-weight: bold !important; color: #fff !important; background-color: #333 !important; padding: 8px 12px !important; border-radius: 8px !important; line-height: 1 !important; min-width: 45px !important; text-align: center !important; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.2) !important;">00</span>
<span style="font-size: 11px !important; color: #666 !important; margin-top: 4px !important; font-weight: bold !important;">分</span>
</div>
<span style="font-size: 20px !important; font-weight: bold !important; color: #333 !important; margin-bottom: 20px !important;">:</span>
<div style="display: flex !important; flex-direction: column !important; align-items: center !important;">
<span id="ecc_second" style="font-size: 28px !important; font-weight: bold !important; color: #fff !important; background-color: #333 !important; padding: 8px 12px !important; border-radius: 8px !important; line-height: 1 !important; min-width: 45px !important; text-align: center !important; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.2) !important;">00</span>
<span style="font-size: 11px !important; color: #666 !important; margin-top: 4px !important; font-weight: bold !important;">秒</span>
</div>
</div>
<!-- 終了メッセージ（カウント0で表示） -->
<div id="ecc_countdown_finish" style="display: none !important; font-size: 15px !important; font-weight: bold !important; color: #7B101E !important; padding: 15px 0 !important;"></div>
<!-- 下部ボタン -->
<div id="ecc_countdown_btn" style="margin-top: 20px !important; width: 100% !important; background: #F5B01D !important; color: #fff !important; border: none !important; padding: 12px 0 !important; font-size: 16px !important; font-weight: bold !important; border-radius: 30px !important; cursor: pointer !important; box-shadow: 0 4px 0 #c28912 !important; outline: none !important; display: block !important; line-height: 1 !important; transition: all 0.2s ease !important; text-align: center !important; box-sizing: border-box !important;">詳細を見る</div>
</div>５．「表示設定（リンク先URL）」にカウントダウンバナーをタップした際の遷移先URLを設定し、保存します。
６．「キャンペーン名の入力へ進む」をクリックし、キャンペーン名を設定後、ステータス「非公開」の状態で「登録する」をクリックしてキャンペーンを保存します。
<使用手順2：GTM側の設定>
１．Google Tag Manager（GTM）の管理画面を開き、「タグ」＞「新規」をクリックします。
２．タグタイプを「カスタム HTML」に設定します。
３．以下のJavaScriptコードをコピーして貼り付けます。
※このスクリプトは、ecコンシェル側のHTMLから自動的に情報を読み取るため、コードの編集は一切不要です。
<script>
(function() {
var css = '@keyframes eccNodeInserted { from { opacity: 0.99; } to { opacity: 1; } } ' +
'#ecc_countdown_wrapper { animation: eccNodeInserted 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.eccIntervalObj = window.eccIntervalObj || null;
function initCountdown() {
var wrapper = document.getElementById('ecc_countdown_wrapper');
var config = document.getElementById('ecc_countdown_config');
if (!wrapper || !config || wrapper.getAttribute('data-ecc-init') === 'true') return;
wrapper.setAttribute('data-ecc-init', 'true');
var endDateStr = config.getAttribute('data-end') || "";
var titleText = config.getAttribute('data-title') || "キャンペーン終了まで";
var finishText = config.getAttribute('data-finish-text') || "終了しました";
var bgColor = config.getAttribute('data-bg') || "#333333";
var endDate = new Date(endDateStr.replace(/-/g, '/'));
var unixEndDate = endDate.getTime();
if (isNaN(unixEndDate)) return;
var titleEl = document.getElementById('ecc_countdown_title');
var timerEl = document.getElementById('ecc_countdown_timer');
var finishEl = document.getElementById('ecc_countdown_finish');
var hourEl = document.getElementById('ecc_hour');
var minEl = document.getElementById('ecc_minute');
var secEl = document.getElementById('ecc_second');
var btnEl = document.getElementById('ecc_countdown_btn');
if (titleEl) titleEl.innerText = titleText;
if (finishEl) finishEl.innerText = finishText;
if (hourEl) hourEl.style.setProperty('background-color', bgColor, 'important');
if (minEl) minEl.style.setProperty('background-color', bgColor, 'important');
if (secEl) secEl.style.setProperty('background-color', bgColor, 'important');
function updateTime() {
if (!document.getElementById('ecc_countdown_wrapper')) {
clearInterval(window.eccIntervalObj);
window.eccIntervalObj = null;
return;
}
var unixCurrentDate = new Date().getTime();
var leftDate = unixEndDate - unixCurrentDate;
if (leftDate <= 0) {
if (timerEl) timerEl.style.setProperty('display', 'none', 'important');
if (finishEl) finishEl.style.setProperty('display', 'block', 'important');
if (btnEl) {
btnEl.style.setProperty('background', '#999', 'important');
btnEl.style.setProperty('box-shadow', 'none', 'important');
}
wrapper.style.setProperty('pointer-events', 'none', 'important');
if (window.eccIntervalObj) {
clearInterval(window.eccIntervalObj);
window.eccIntervalObj = null;
}
return;
}
var d = Math.floor(leftDate / (1000 * 60 * 60 * 24));
var h = Math.floor((leftDate % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var m = Math.floor((leftDate % (1000 * 60 * 60)) / (1000 * 60));
var s = Math.floor((leftDate % (1000 * 60)) / 1000);
var totalH = String(h + d * 24);
var strM = String(m).length < 2 ? "0" + m : String(m);
var strS = String(s).length < 2 ? "0" + s : String(s);
if (hourEl) hourEl.innerText = totalH;
if (minEl) minEl.innerText = strM;
if (secEl) secEl.innerText = strS;
}
updateTime();
if (!window.eccIntervalObj) {
window.eccIntervalObj = setInterval(updateTime, 1000);
}
}
var insertListener = function(event) {
if (event.animationName === 'eccNodeInserted') initCountdown();
};
document.addEventListener('animationstart', insertListener, false);
document.addEventListener('webkitAnimationStart', insertListener, false);
if(document.getElementById('ecc_countdown_wrapper')) initCountdown();
})();
</script>４．タグを配信するための「トリガー」を設定します。
【推奨設定】
ecコンシェルのキャンペーンを配信する予定のページにのみスクリプトが読み込まれるよう設定することをおすすめします。
・トリガーのタイプ：ページビュー
・発生場所：一部のページビュー
・条件例：Page Path が /item/ から始まる、等カウントダウンウィジェットを配信する予定のページを指定
※サイト全域で一律稼働させたい場合は「All Pages」を選択しても問題ありませんが、サイトの表示速度や運用ルールの観点から、必要なページに絞ることを推奨します。
５．設定を保存し、Google Tag Managerのプレビュー機能やテスト環境等と、ecコンシェルのプレビュー機能を活用し実際の画面でルーレットが動くか確認してください。
<使用手順3：キャンペーンの公開>
１．動作確認後、キャンペーンのステータスを「公開」に変更し、接客を開始します。
※作成したキャンペーンがカウントダウンの終了日以降に配信されないよう、ecコンシェル側の「配信条件」で配信期間等を適切に設定してください。