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

<特徴>

１．ecコンシェルとGoogle Tag Manager（GTM）を組み合わせることで、サイトのシステム開発なしで、リアルタイムに動くカウントダウンタイマーを簡単に実装できます。

２．カウントダウンの「終了日」はecコンシェルのウィジェット編集画面からテキストで簡単に変更可能です。一度GTMを設定してしまえば、以降のキャンペーン設定でGTMを操作する必要はありません。

<注意事項>

※本設定はカスタマイズ事例となります。
本実装は「CSSアニメーションを用いた要素出現検知」という特殊な技術を用いて、ecコンシェルとGTMを連携させています。
マニュアル通りのコピー＆ペーストで動作するように設計されていますが、独自にデザインや構成をカスタマイズする場合は、基礎的なHTML、CSS、JavaScriptの知識が必要となります。
特に、指定されているid属性（ecc_hour等）を変更・削除するとGTMとの連携が切れ、動作しなくなりますのでご注意ください。必ずテスト配信にて動作確認を行ってから本番公開をお願いいたします。

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

１．キャンペーン設定画面で「なにを」、「ウィジェットを登録する」の順でクリックします

２．テンプレートから「J-001 タイトル+詳細テキスト」をクリックします

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

４．以下のようにHTMLコードを入力します

※表示用デザインと、終了日時を設定するための非表示エリアで構成されています。

■タイトル（記述例）

<div style="text-align: center !important; font-weight: bold;">タイムセール終了まで残り</div>

■詳細テキスト（記述例）

※id="ecc_targettime" の中に終了日を YYYY-MM-DD 形式（例：2026-03-14）で入力してください。
（指定した日付の「23時59分59秒」をゴールとしてカウントダウンします）
※id="ecc_hour" などのIDはタイマー作動に必須のため変更しないでください。

<!-- ▼GTM連携用：終了日の設定（画面には表示されません）▼ -->
<div style="display: none !important;">
  <span id="ecc_targettime">2026-03-14</span>
</div>

<!-- ▼表示用：カウントダウンタイマー本体▼ -->
<div class="ecc_countdown-wrapper" style="margin-top: 5px !important; text-align: center !important;">
  <span id="ecc_hour" style="font-size: 200% !important; font-weight: bold !important; display: inline-block !important; padding: 5px !important; background-color: #000 !important; border-radius: 5px !important; color: #fff !important;">00</span>
  <span style="font-weight: bold;">時間</span>
  <span id="ecc_minute" style="font-size: 200% !important; font-weight: bold !important; display: inline-block !important; padding: 5px !important; background-color: #000 !important; border-radius: 5px !important; color: #fff !important;">00</span>
  <span style="font-weight: bold;">分</span>
  <span id="ecc_second" style="font-size: 200% !important; font-weight: bold !important; display: inline-block !important; padding: 5px !important; background-color: #000 !important; border-radius: 5px !important; color: #fff !important;">00</span>
  <span style="font-weight: bold;">秒</span>
</div>

５．「デザイン」や「表示設定（リンク先URL）」を任意で設定し、ウィジェット名を設定します。

６．「キャンペーン名の入力へ進む」をクリックし、キャンペーン名を設定後、ステータス「非公開」の状態で「登録する」をクリックしてキャンペーンを保存します。

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

１．Google Tag Manager（GTM）の管理画面を開き、「タグ」＞「新規」をクリックします。

２．タグタイプを「カスタム HTML」に設定します。

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

※このスクリプトは、ecコンシェル側のHTMLから自動的に終了日を読み取るため、日時の書き換え等の編集は一切不要です。

<script>
(function() {
  // CSSスタイルの動的注入（出現検知用）
  var css = '@keyframes eccNodeInserted { from { opacity: 0.99; } to { opacity: 1; } } ' +
            '#ecc_hour { 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);

  // 設定
  var dateId = 'ecc_targettime';
  
  // 計算ロジック
  function calcTime(unixEndDate) {
      var unixCurrentDate = new Date().getTime();
      // 指定日の終わり（23:59:59）までの差分を計算
      var leftDate = unixEndDate + (24 * 60 * 60 * 1000) - unixCurrentDate;

      if (leftDate < 0) return { h: "0", m: "0", s: "0" };
      
      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);

      // 24時間以上の場合は時間（h）に日数を加算
      return { h: String(h + d * 24), m: String(m), s: String(s) };
  }

  // 表示更新関数
  function updateTime() {
      var dateEl = document.getElementById(dateId);
      if (!dateEl) return;
      var dateText = dateEl.textContent ? dateEl.textContent.trim() : "";
      if (!dateText) return;

      var parts = dateText.split('-');
      if (parts.length < 3) return;
      var endDate = new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]), 0, 0, 0).getTime();
      var t = calcTime(endDate);
      
      var hourEl = document.getElementById('ecc_hour');
      var minEl = document.getElementById('ecc_minute');
      var secEl = document.getElementById('ecc_second');

      if (hourEl) hourEl.innerHTML = t.h;
      if (minEl) minEl.innerHTML = t.m;
      if (secEl) secEl.innerHTML = t.s;
  }

  // イベントリスナー（要素出現検知）
  var insertListener = function(event) {
      if (event.animationName === 'eccNodeInserted') {
          updateTime();
          
          if (!window.eccIntervalRunning) {
              window.eccIntervalRunning = true;
              setInterval(function(){
                  if(document.getElementById('ecc_hour')) {
                      updateTime();
                  }
              }, 1000);
          }
      }
  }

  // アニメーション開始イベントを監視（iOS Safari対応含む）
  document.addEventListener('animationstart', insertListener, false);
  document.addEventListener('webkitAnimationStart', insertListener, false);
  
  // スクリプト実行時点で既に表示されていた場合の保険
  if(document.getElementById('ecc_hour')) {
      updateTime();
  }

})();
</script>

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

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

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

５．設定を保存し、GTMを「公開（リリース）」して完了です。プレビュー等で実際の画面でカウントダウンが動くか確認してください。

<使用手順3：キャンペーンの公開>

１．動作確認後、キャンペーンのステータスを「公開」に変更し、接客を開始します。

※作成したキャンペーンがカウントダウンの終了日以降に配信されないよう、配信期間等を設定してください。

{[{category.name}]}

<特徴>

<注意事項>

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

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

<使用手順3：キャンペーンの公開>