<特徴>
１．ecコンシェルのウィジェットを拡張し、ユーザーの選択によって画面が切り替わる「シナリオウィジェット」をサイト上に実装できます。
２．システム開発は一切不要です。ecコンシェル管理画面の「複数リンク」テンプレートを使い、テキスト入力の工夫だけで「分岐先のステップ」や「ボタンの数」を自由にコントロールできます。
３．診断コンテンツやアンケート、商材の絞り込みなど、一方的なバナー表示ではなく「対話型」の接客を行うことで、高いエンゲージメントとCVRの向上が期待できます。
<注意事項>
※本設定は高度なカスタマイズとなります。
マニュアル通りの指定ルールに従って動作するように設計されていますが、入力する記号（:: や カンマ）を間違えたり、指定外のテンプレートを使用すると正しく動作しませんのでご注意ください。
必ずテスト配信にて「ボタンが正しく表示されるか」「指定したステップへ遷移するか」など想定通り動作するかを確認してから本番公開をお願いいたします。
マニュアル通りの指定ルールに従って動作するように設計されていますが、入力する記号（:: や カンマ）を間違えたり、指定外のテンプレートを使用すると正しく動作しませんのでご注意ください。
必ずテスト配信にて「ボタンが正しく表示されるか」「指定したステップへ遷移するか」など想定通り動作するかを確認してから本番公開をお願いいたします。
<使用手順1：ecコンシェル側の設定>
１．キャンペーン作成画面の「なにを」で「ウィジェットを新規作成」をクリックし、テンプレート一覧から必ず「G-001 複数リンク横(画像+タイトル+詳細)」を選択します。
２．左側のメニュー項目（テキスト、リンク項目、デザイン、表示設定）を、以下の手順に従って設定します。
【テキスト】の設定
「大タイトル」の欄に、必ず
※このキーワードを合図に、自動的にシナリオウィジェットとして描画されます。
「大タイトル」の欄に、必ず
[シナリオ] というキーワードを入力してください。※このキーワードを合図に、自動的にシナリオウィジェットとして描画されます。
【リンク項目】の設定（シナリオの作成）
作成したい画面（ステップ）の数だけ、画面下部の「項目を追加する」をクリックします。
上から順に「項目1＝最初の画面（ステップ1）」「項目2＝次の画面（ステップ2）」として扱われます。各項目の入力欄を以下のルールで入力してください。
-
画像：通常通りアップロードします。
※画像を非表示にしたいステップは、画像を空にするか、下の「中タイトル」欄に[画像なし]と入力してください。 -
中タイトル：通常通り見出しを入力します。
（例）[画像なし] あなたの肌の悩みは？ -
詳細テキスト：
ここに「本文」と「ボタン名」の両方を記述します。本文とボタン名を::（半角コロン2つ） で区切ります。ボタンを複数並べたい場合は,（半角カンマ） で区切ります。
※カンマで区切った順番通りに、上から1つ目、2つ目のボタンとして表示されます。
（例）気になるお悩みを教えてください::乾燥が気になる,脂っぽさが気になる -
リンク先URL：
「詳細テキスト」欄で設定したボタンの順番と完全に連動させて、カンマ区切りで遷移先を入力します。
・特定のステップへ進む場合：step:2（※項目2へ進む）、step:3（※項目3へ進む）など
・ウィジェットを閉じる場合：close
・特定のWebページへ飛ばす場合：https://...などの通常URL【重要】ボタンと遷移先の連動例
詳細テキスト：気になるお悩みを教えてください::乾燥が気になる,脂っぽさが気になる
リンク先URL：step:2,step:3
⇒ 1つ目のボタン「乾燥が気になる」をタップすると「項目2（step:2）」へ進み、2つ目のボタン「脂っぽさが気になる」をタップすると「項目3（step:3）」へ進みます。
【デザイン】【表示設定】について
背景カラー、テキストカラー、文字サイズ、角の丸み、不透明度、シャドウ、および表示位置（バナーで左に表示するなど）の設定は、そのまま実際のシナリオウィジェットのデザインに反映されます。
※CSSなどの専門知識がなくても、プレビュー画面を見ながらお好みの見た目に自由に調整いただけます。
背景カラー、テキストカラー、文字サイズ、角の丸み、不透明度、シャドウ、および表示位置（バナーで左に表示するなど）の設定は、そのまま実際のシナリオウィジェットのデザインに反映されます。
※CSSなどの専門知識がなくても、プレビュー画面を見ながらお好みの見た目に自由に調整いただけます。
※設定イメージ
<使用手順2：GTM側の設定>
１．Google Tag Manager（GTM）の管理画面で「タグ」＞「新規」をクリックします。
２．タグタイプを「カスタム HTML」に設定します。
３．以下のスクリプトをコピーして貼り付けます。
【オプション】各ステップの表示やボタンタップをGA4等で計測したい場合
コード内に2箇所ある
ステップ表示時に
コード内に2箇所ある
/* と */ を削除（コメントアウトを解除）してください。ステップ表示時に
ec_story_step_view、ボタンタップ時に ec_story_click というイベント名でデータ（ステップ数やボタン名）が送信されるようになり、GA4等での詳細な行動分析が可能になります。■GTM用スクリプト（コピー用）
<script>
/**
* =======================================================================
* 「シナリオウィジェット」拡張スクリプト
* =======================================================================
*/
(function() {
if (window._story_engine_loaded) return;
window._story_engine_loaded = true;
// ==========================================
// 1. CSS定義（デザイン・レイアウト設定）
// ==========================================
var style = document.createElement('style');
// ▼ 【変更不可】システム稼働に必須なCSS
var coreCss =
"@keyframes storyFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\n" +
"#ec_story_custom_wrapper { z-index: 2147483647; animation: storyFadeIn 0.3s ease-out; }\n" +
".ec-story-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(0, 0, 0, 0.6) !important; display: flex !important; align-items: center !important; justify-content: center !important; }\n" +
"div[title*='[シナリオ]'] { opacity: 0 !important; visibility: hidden !important; }\n" +
".ec-concier-widget-container:has(div[title*='[シナリオ]']), .ec-concier-widget-container[data-story-hidden='true'] { opacity: 0 !important; pointer-events: none !important; z-index: -9999 !important; }\n";
// ▼ 【デザイン変更可能】サイトに合わせて色、余白、ボタンの見た目を調整できます
var designCss =
".ec-story-card { padding: 24px; width: 340px; max-width: 90vw; box-sizing: border-box; font-family: 'Helvetica Neue', Arial, sans-serif; position: relative; text-align: center; }\n" +
".ec-concier-close-button { position: absolute !important; top: -30px !important; right: 10px !important; width: 25px !important; height: 25px !important; border-radius: 25px !important; background-color: #ffffff !important; box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 4px !important; cursor: pointer !important; outline: none !important; }\n" +
".ec-concier-close-button-child-1, .ec-concier-close-button-child-2 { position: absolute !important; top: 11px !important; left: 5px !important; width: 15px !important; height: 3px !important; background-color: #666666 !important; border-radius: 2px !important; }\n" +
".ec-concier-close-button-child-1 { transform: rotate(45deg) !important; }\n" +
".ec-concier-close-button-child-2 { transform: rotate(-45deg) !important; }\n" +
".ec-concier-close-button:hover .ec-concier-close-button-child-1, .ec-concier-close-button:hover .ec-concier-close-button-child-2 { background-color: #333333 !important; }\n" +
".ec-story-title { margin: 0 0 16px 0; font-weight: bold; line-height: 1.4; }\n" +
".ec-story-desc { margin-bottom: 20px; line-height: 1.6; white-space: pre-wrap; }\n" +
".ec-story-btn { display: block; width: 100%; padding: 12px 16px; margin-bottom: 10px; background: #ffffff; color: #0056b3; border: 2px solid #0056b3; border-radius: 8px; font-weight: bold; cursor: pointer; transition: all 0.2s ease; box-sizing: border-box; }\n" +
".ec-story-btn:hover { background: #0056b3; color: #ffffff; box-shadow: 0 4px 12px rgba(0, 86, 179, 0.25); transform: translateY(-2px); }\n" +
".ec-story-btn-primary { display: inline-block; background: #0056b3; color: #ffffff; border: none; padding: 14px 24px; border-radius: 8px; font-weight: bold; text-decoration: none; transition: all 0.2s ease; cursor: pointer; }\n" +
".ec-story-btn-primary:hover { background: #004494; box-shadow: 0 4px 12px rgba(0, 86, 179, 0.3); transform: translateY(-2px); color: #fff; }";
style.innerHTML = coreCss + designCss;
document.head.appendChild(style);
// ==========================================
// 2. 制御関数
// ==========================================
window.ecStoryAction = function(stepIndex, target) {
/*
// [計測] GA4等の外部ツールへクリックイベントを送信
if (window.dataLayer) {
window.dataLayer.push({
'event': 'ec_story_click',
'story_step': stepIndex,
'click_target': target
});
}
*/
var targetStr = String(target).trim();
var isHttp = targetStr.indexOf('http') === 0;
var hiddenWidget = document.querySelector('.ec-concier-widget-container[data-story-hidden="true"]') || document.querySelector('.ec-concier-widget-container');
if (hiddenWidget) {
var originalItems = hiddenWidget.querySelectorAll('.item');
var clickedItem = originalItems ? originalItems[stepIndex - 1] : null;
if (clickedItem) {
try { clickedItem.click(); } catch(e){}
}
}
if (targetStr === 'close') {
var wrapper = document.getElementById('ec_story_custom_wrapper');
if (wrapper) wrapper.remove();
} else if (targetStr.indexOf('step:') === 0) {
var stepNum = parseInt(targetStr.replace('step:', ''), 10);
if (!isNaN(stepNum)) window.renderStoryStep(stepNum);
} else if (!isNaN(targetStr) && targetStr !== '') {
window.renderStoryStep(parseInt(targetStr, 10));
} else if (isHttp) {
setTimeout(function() { window.location.href = targetStr; }, 200);
}
};
// ==========================================
// 3. UIの生成・描画関数
// ==========================================
window.renderStoryStep = function(stepIndex) {
var config = window._ec_story_config;
var items = window._ec_story_items;
var item = items[stepIndex - 1];
if (!item) return;
var bgColor = config.backgroundColor || '#ffffff';
var titleColor = config.titleColor || '#333333';
var descColor = config.descriptionColor || '#555555';
var bRadius = config.borderRadius !== undefined ? config.borderRadius : 0;
var opacity = config.opacity !== undefined ? config.opacity / 100 : 1;
var shadow = config.boxShadowType === 'on' ? 'rgba(51, 51, 51, 0.6) 0px 3px 6px 0px' : 'none';
var titleSize = config.itemHeaderFontSize || 16;
var descSize = config.descriptionFontSize || 14;
var marginBottom = config.marginBottom !== undefined ? config.marginBottom : 0;
var rawTitle = item.header || '';
var showImage = true;
if (rawTitle.indexOf('【画像なし】') !== -1 || rawTitle.indexOf('[画像なし]') !== -1) {
showImage = false;
rawTitle = rawTitle.replace('【画像なし】', '').replace('[画像なし]', '').trim();
}
var title = rawTitle;
/*
// [計測] 表示ログの送信（GA4等）
if (window.dataLayer) {
window.dataLayer.push({
'event': 'ec_story_step_view',
'story_step': stepIndex,
'story_title': title
});
}
*/
var rawDesc = (item.description || '').replace(/：：/g, '::').replace(/[，、]/g, ',');
var rawUrl = (item.url || '').trim().replace(/[，、]/g, ',');
var descText = '';
var btnLabels = [];
var targets = [];
if (rawUrl.indexOf('step:') === 0) {
targets = rawUrl.replace('step:', '').split(',');
} else if (rawUrl.indexOf('javascript:') === 0) {
targets = rawUrl.replace('javascript:', '').split(',');
} else if (rawUrl === 'close') {
targets = ['close'];
} else if (rawUrl !== '') {
targets = rawUrl.split(',');
}
if (rawDesc.indexOf('::') !== -1) {
var parts = rawDesc.split('::');
descText = parts[0].trim();
btnLabels = parts[1].split(',');
} else {
if (targets.length > 1 || (targets.length === 1 && targets[0].indexOf('http') !== 0)) {
descText = '';
btnLabels = rawDesc.split(',');
} else {
descText = rawDesc;
btnLabels = ['詳細を見る'];
}
}
var buttonsHtml = '';
var textHtml = descText ? '<div class="ec-story-desc" style="color: ' + descColor + '; font-size: ' + descSize + 'px !important;">' + descText + '</div>' : '';
targets.forEach(function(target, i) {
target = target.trim();
var label = btnLabels[i] ? btnLabels[i].trim() : (target.indexOf('http') === 0 ? '詳細を見る' : '選択肢 ' + (i+1));
var isNumeric = !isNaN(target) && target !== '';
var actionTarget = isNumeric ? target : "'" + target + "'";
if (target.indexOf('http') === 0 && targets.length === 1) {
buttonsHtml += '<button class="ec-story-btn-primary" style="font-size: ' + descSize + 'px !important;" onclick="ecStoryAction(' + stepIndex + ', ' + actionTarget + ')">' + label + '</button>';
} else {
buttonsHtml += '<button class="ec-story-btn" style="font-size: ' + descSize + 'px !important;" onclick="ecStoryAction(' + stepIndex + ', ' + actionTarget + ')">' + label + '</button>';
}
});
var imgHtml = (showImage && item.image) ? '<img src="' + item.image + '" style="max-width:100%; height:auto; border-radius:6px; margin-bottom:16px; box-shadow:0 2px 8px rgba(0,0,0,0.1);">' : '';
var titleHtml = title ? '<h2 class="ec-story-title" style="color: ' + titleColor + '; font-size: ' + titleSize + 'px !important;">' + title + '</h2>' : '';
var pos = config.position || 'under-center';
var scriptType = config.scriptType || '';
var isModal = (scriptType === 'modal' || pos === 'modal' || pos === 'center');
var wrapperClass = isModal ? "ec-story-overlay" : "";
var wrapperStyle = "";
if (!isModal) {
var bottomVal = 20 + marginBottom;
if (pos === 'under-right') {
wrapperStyle = 'position:fixed; bottom:' + bottomVal + 'px; right:20px;';
} else if (pos === 'under-left') {
wrapperStyle = 'position:fixed; bottom:' + bottomVal + 'px; left:20px;';
} else {
wrapperStyle = 'position:fixed; bottom:' + bottomVal + 'px; left:50%; transform:translateX(-50%);';
}
}
var customHtml =
'<div id="ec_story_custom_wrapper" class="' + wrapperClass + '" style="' + wrapperStyle + '">' +
'<div class="ec-story-card" style="background-color: ' + bgColor + '; border-radius: ' + bRadius + 'px; box-shadow: ' + shadow + '; opacity: ' + opacity + ';">' +
'<div tabindex="0" role="button" class="ec-concier-close-button" onclick="document.getElementById(\'ec_story_custom_wrapper\').remove()">' +
'<div class="ec-concier-close-button-child-1"></div>' +
'<div class="ec-concier-close-button-child-2"></div>' +
'</div>' +
imgHtml +
titleHtml +
textHtml +
buttonsHtml +
'</div>' +
'</div>';
var existing = document.getElementById('ec_story_custom_wrapper');
if (existing) {
existing.outerHTML = customHtml;
} else {
document.body.insertAdjacentHTML('beforeend', customHtml);
}
};
// ==========================================
// 4. フック処理
// ==========================================
function applyStoryHook(araInstance) {
if (!araInstance || araInstance._isStoryHooked) return;
var originalOpen = araInstance.openWidgetWith;
if (typeof originalOpen !== 'function') return;
araInstance.openWidgetWith = function(t, e, r) {
// ▼ [シナリオ] というキーワードが含まれているか判定
if (t && t.contents && t.contents[0] && t.contents[0].title.indexOf('[シナリオ]') !== -1) {
window._ec_story_config = JSON.parse(JSON.stringify(t.contents[0]));
window._ec_story_items = window._ec_story_config.items;
if (t.contents[0].items) {
for (var i = 0; i < t.contents[0].items.length; i++) {
t.contents[0].items[i].url = 'javascript:void(0);';
}
}
var result = originalOpen.apply(this, arguments);
setTimeout(function() {
var container = document.querySelector('.ec-concier-widget-container:has(div[title*="[シナリオ]"])') || document.querySelector('.ec-concier-widget-container');
if (container) {
container.setAttribute('data-story-hidden', 'true');
}
}, 0);
window.renderStoryStep(1);
return result;
}
return originalOpen.apply(this, arguments);
};
araInstance._isStoryHooked = true;
}
// ==========================================
// 5. 初期起動チェック
// ==========================================
if (window.ara && window.ara.openWidgetWith) {
applyStoryHook(window.ara);
} else {
var checkCount = 0;
var timer = setInterval(function() {
checkCount++;
if (window.ara && window.ara.openWidgetWith) {
applyStoryHook(window.ara);
clearInterval(timer);
} else if (checkCount > 30) {
clearInterval(timer);
}
}, 100);
}
})();
</script>４．タグを配信するための「トリガー」を設定します。
【重要】スクリプトの配信タイミングについて
シナリオウィジェットを正しく動作させるには、ecコンシェルの本来のウィジェットが画面に表示される「前」にこのスクリプトが読み込まれている必要があります。
以下のいずれかの方法で設定してください。
シナリオウィジェットを正しく動作させるには、ecコンシェルの本来のウィジェットが画面に表示される「前」にこのスクリプトが読み込まれている必要があります。
以下のいずれかの方法で設定してください。
【おすすめ設定：初期化トリガーを使用する】
通常の「ページビュー」よりも早く発火するトリガーを使用します。
・トリガーのタイプ：初期化（Initialization）
・発生場所：一部の初期化イベント
・条件例：Page Path が /example から始まる等、配信予定のページを指定
【確実な設定：タグの順序付けを使用する】
※ecコンシェルの「計測タグ」「カートタグ」「コンバージョンタグ」もGTMで配信している場合有効です。
基本タグ側の設定で「詳細設定 ＞ タグの順序付け」を開き、「ecコンシェル計測タグが発火する前に、シナリオウィジェット拡張タグを発火させる」ように設定します。
※サイト全域で一律稼働させたい場合は「初期化 - All Pages」を選択しても問題ありませんが、サイトの表示速度や運用ルールの観点から、必要なページに絞ることを推奨します。
５．設定を保存し、Google Tag Managerのプレビュー機能やテスト環境等と、ecコンシェルのプレビュー機能を活用し実際の画面で正しく画面が遷移するか確認してください。
６．GTMを「公開（リリース）」して完了です。