基本操作・設定

基本操作・設定

LINE連携ページを作成し、連携特典クーポンを自動発行する

  • 更新日:

専用のLINE連携ページから連携したお客様へ、シナリオでクーポンを自動発行し、LINEで送信する設定方法です。

ページ作成 → カスタム経路作成 → ページの連携処理に経路キーを渡す改修 → シナリオ作成の順に進めます。クーポンはシナリオの実行時に発行します。

StoreCRM・Shopify・LINE公式アカウントの初期連携が完了していることが前提です。購入者はShopifyアカウントへログインしてLINE連携します。画面は導入検証ストア二で撮影した設定例です。名称・キー・特典条件はご自身の施策に合わせて設定してください。

目次

1. ShopifyでLINE連携ページを作成する

1-1. ページのタイトルを入力する

Shopify管理画面の[オンラインストア]→[ページ]→[ページを追加する]を開き、タイトルを「LINE連携クーポン」にします。本文は空欄にします。

補足:Liquidはページ本文ではなく、テーマの[カスタムLiquid]へ設置します。

ページのタイトルを入力する:赤枠が操作対象
ページのタイトルを入力する(クリックで拡大)

1-2. ページを保存する

公開状況を確認し、画面上部の[保存]をクリックします。

ページを保存する:赤枠が操作対象
ページを保存する(クリックで拡大)

1-3. 専用テンプレートの名前を入力する

ページの[テンプレートを表示]でテーマ編集を開き、上部のテンプレート選択→[ページ]→[テンプレートを作成]へ進みます。名前を「line-coupon」にします。

専用テンプレートの名前を入力する:赤枠が操作対象
専用テンプレートの名前を入力する(クリックで拡大)

1-4. 専用テンプレートを作成する

基準を[デフォルトのページ]にして[テンプレートを作成]をクリックします。

専用テンプレートを作成する:赤枠が操作対象
専用テンプレートを作成する(クリックで拡大)

1-5. カスタムLiquidセクションを追加する

専用テンプレートの[テンプレート]領域で[セクションを追加]をクリックし、[カスタムLiquid]を選択します。不要な既存の[ページ]セクションは目のアイコンで非表示にします。

カスタムLiquidセクションを追加する:赤枠が操作対象
カスタムLiquidセクションを追加する(クリックで拡大)

1-6. ページ作成用コードを貼り付ける

[カスタムLiquid]の[Liquidコード]へ、下記の「ページ作成用コード」をすべて貼り付け、右上の[保存]をクリックします。

補足:この段階では経路キーを指定しません。経路を作成してから手順3で改修します。画像は同じコード欄の完成後の表示例です。

LINE連携ページ用サンプルコード(汎用版)

以下はページ全体の表示とLINE連携処理を含むサンプルです。特定のストア名・顧客ストアのURLは含みません。ページ作成時は line-connect-page-base.liquid の全文を[カスタムLiquid]の[Liquidコード]へ貼り付けてください。

LINE連携ページ用サンプルコード一式をダウンロード(ZIP)

  • line-connect-page-base.liquid:手順1のページ作成用。経路キーは未指定です。
  • line-connect-custom-liquid.liquid:手順3の改修後の参考用。routeKey の line_coupon_page を、ご自身が手順2で作成した経路キーへ合わせてください。

画面上のコード枠から全文をコピーするか、ZIPを展開し、ページ作成用ファイルをテキストエディタで開いて全文をコピーします。表示文言やデザインはご自身のストアに合わせて変更できます。

ページ作成用コードの全文(汎用版・経路指定前)
<section class="sc-line-page" data-storecrm-line-page>

  <div class="sc-line-page__inner">
    <p class="sc-line-page__eyebrow">LINE CONNECT</p>
    <h1 class="sc-line-page__title">
      大切なお知らせを、<br>
      いつものLINEへ。
    </h1>
    <p class="sc-line-page__lead">
      ストアアカウントとLINEを連携すると、<br class="sc-line-page__desktop-break">
      あなたに必要なご案内を、いつものLINEで受け取れます。
    </p>

    <div class="sc-line-card">
      <div class="sc-line-card__icon" data-line-icon aria-hidden="true">
        <svg viewBox="0 0 24 24" role="img" aria-label="LINE">
          <title>LINE</title>
          <path fill="currentColor" d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
        </svg>
      </div>

      <div class="sc-line-card__status" data-line-badge>
        <span class="sc-line-card__status-dot" aria-hidden="true"></span>
        <span data-line-badge-text>連携状態を確認しています</span>
      </div>

      <h2 class="sc-line-card__title" data-line-title>LINE連携</h2>
      <p class="sc-line-card__description" data-line-description aria-live="polite">
        ただいま連携状態を確認しています。
      </p>

      <div class="sc-line-card__notice" data-line-notice role="status" aria-live="polite" hidden></div>

      <button class="sc-line-card__button" type="button" data-line-action disabled>
        <span class="sc-line-card__spinner" data-line-spinner aria-hidden="true"></span>
        <span data-line-button-text>確認中...</span>
        <svg class="sc-line-card__arrow" viewBox="0 0 20 20" aria-hidden="true">
          <path d="M4 10h11M11 6l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>

      <p class="sc-line-card__fine-print">
        連携にはストアへのログインが必要です。<br>
        連携後、特典クーポンやご案内をLINEでお送りします。
      </p>
    </div>

    <a class="sc-line-page__back" href="{{ routes.account_url }}">
      <svg viewBox="0 0 20 20" aria-hidden="true">
        <path d="m12 5-5 5 5 5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      マイページに戻る
    </a>
  </div>
</section>

<style>
  .sc-line-page,
  .sc-line-page * { box-sizing: border-box; }

  .sc-line-page {
    --sc-ink: #1c1c1c;
    --sc-muted: #666666;
    --sc-line: #06c755;
    --sc-border: #dedede;
    width: 100%;
    padding: 72px 24px 64px;
    color: var(--sc-ink);
    background: #ffffff;
    font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  .sc-line-page__inner { width: min(100%, 720px); margin: 0 auto; text-align: center; }
  .sc-line-page__eyebrow {
    margin: 0 0 20px;
    color: var(--sc-ink);
    font-family: 'Instrument Sans', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: .22em;
  }
  .sc-line-page__title {
    margin: 0;
    color: var(--sc-ink);
    font-family: inherit;
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: .12em;
    text-transform: none;
  }
  .sc-line-page__lead {
    margin: 22px auto 0;
    color: var(--sc-muted);
    font-size: 14px;
    line-height: 2;
    letter-spacing: .04em;
  }
  .sc-line-card {
    width: min(100%, 520px);
    margin: 38px auto 0;
    padding: 36px 40px 32px;
    border: 1px solid var(--sc-border);
    border-radius: 0;
    background: #ffffff;
  }
  .sc-line-card__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    color: var(--sc-line);
  }
  .sc-line-card__icon svg { display: block; width: 48px; height: 48px; }
  .sc-line-card__icon.is-connected { color: #008539; }
  .sc-line-card__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 28px;
    padding: 4px 10px;
    color: var(--sc-muted);
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: .04em;
  }
  .sc-line-card__status-dot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: #777777; }
  .sc-line-card__status.is-connected { color: #008539; }
  .sc-line-card__status.is-connected .sc-line-card__status-dot { background: #008539; }
  .sc-line-card__status.is-error { color: #a13c2f; }
  .sc-line-card__status.is-error .sc-line-card__status-dot { background: #a13c2f; }
  .sc-line-card__title {
    margin: 14px 0 0;
    color: var(--sc-ink);
    font-family: inherit;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: .06em;
    text-transform: none;
    overflow-wrap: anywhere;
  }
  .sc-line-card__description { min-height: 48px; margin: 10px 0 0; color: var(--sc-muted); font-size: 13px; line-height: 1.9; letter-spacing: .02em; }
  .sc-line-card__notice { margin: 18px 0 0; padding: 12px; border: 1px solid #c5dfcf; color: #17643a; background: #f4faf6; font-size: 13px; line-height: 1.8; }
  .sc-line-card__notice[hidden] { display: none; }
  .sc-line-card__button {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    margin: 24px 0 0;
    padding: 15px 18px;
    border: 1px solid var(--sc-ink);
    border-radius: 0;
    color: #ffffff;
    background: var(--sc-ink);
    box-shadow: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: .1em;
    text-transform: none;
    white-space: normal;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .sc-line-card__button:hover:not(:disabled) { background: #444444; }
  .sc-line-card__button:focus-visible,
  .sc-line-page__back:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 4px; }
  .sc-line-card__button:disabled { cursor: wait; color: #ffffff; background: #656565; border-color: #656565; opacity: 1; }
  .sc-line-card__button.is-disconnect { color: var(--sc-ink); background: #ffffff; border-color: #b8b8b8; }
  .sc-line-card__button.is-disconnect:hover:not(:disabled) { background: #f3f3f3; }
  .sc-line-card__arrow { flex: 0 0 18px; width: 18px; height: 18px; }
  .sc-line-card__button.is-disconnect .sc-line-card__arrow,
  .sc-line-card__button.is-loading .sc-line-card__arrow { display: none; }
  .sc-line-card__spinner { display: none; flex: 0 0 16px; width: 16px; height: 16px; border: 2px solid #ffffff66; border-top-color: #ffffff; border-radius: 50%; animation: sc-line-spin .75s linear infinite; }
  .sc-line-card__button.is-loading .sc-line-card__spinner { display: block; }
  .sc-line-card__button.is-disconnect .sc-line-card__spinner { border-color: #1c1c1c33; border-top-color: var(--sc-ink); }
  .sc-line-card__fine-print { margin: 20px 0 0; padding-top: 20px; border-top: 1px solid #eeeeee; color: var(--sc-muted); font-size: 11px; line-height: 1.9; }
  .sc-line-page__back { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; margin-top: 24px; padding: 10px; color: var(--sc-muted); font-size: 12px; letter-spacing: .04em; text-decoration: none; }
  .sc-line-page__back:hover { color: var(--sc-ink); text-decoration: underline; text-underline-offset: 4px; }
  .sc-line-page__back svg { width: 16px; height: 16px; }
  @keyframes sc-line-spin { to { transform: rotate(360deg); } }
  @media (max-width: 640px) {
    .sc-line-page { padding: 44px 20px 36px; }
    .sc-line-page__eyebrow { margin-bottom: 16px; font-size: 11px; }
    .sc-line-page__title { font-size: 25px; letter-spacing: .06em; }
    .sc-line-page__desktop-break { display: none; }
    .sc-line-page__lead { max-width: 330px; margin-top: 18px; font-size: 13px; }
    .sc-line-card { margin-top: 28px; padding: 28px 20px 24px; }
    .sc-line-card__title { font-size: 19px; }
    .sc-line-card__button { letter-spacing: .05em; }
    .sc-line-page__back { margin-top: 18px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sc-line-page *, .sc-line-page *::before, .sc-line-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  }
</style>

<script>
  (function () {
    var root = document.querySelector('[data-storecrm-line-page]');
    if (!root || root.getAttribute('data-initialized') === 'true') return;
    root.setAttribute('data-initialized', 'true');

    var badge = root.querySelector('[data-line-badge]');
    var badgeText = root.querySelector('[data-line-badge-text]');
    var icon = root.querySelector('[data-line-icon]');
    var title = root.querySelector('[data-line-title]');
    var description = root.querySelector('[data-line-description]');
    var notice = root.querySelector('[data-line-notice]');
    var button = root.querySelector('[data-line-action]');
    var buttonText = root.querySelector('[data-line-button-text]');
    var currentState = 'loading';

    function setNotice(message, visible) {
      notice.textContent = message || '';
      notice.hidden = !visible;
    }

    function setState(state) {
      currentState = state;
      badge.className = 'sc-line-card__status';
      icon.className = 'sc-line-card__icon';
      button.className = 'sc-line-card__button';
      button.disabled = false;
      setNotice('', false);

      if (state === 'loading') {
        badgeText.textContent = '連携状態を確認しています';
        title.textContent = 'LINE連携';
        description.textContent = 'ただいま連携状態を確認しています。';
        buttonText.textContent = '確認中...';
        button.classList.add('is-loading');
        button.disabled = true;
        return;
      }

      if (state === 'connected') {
        badge.classList.add('is-connected');
        icon.classList.add('is-connected');
        badgeText.textContent = 'LINE連携済み';
        title.textContent = 'LINEと連携されています';
        description.textContent = '大切なお知らせをLINEでお受け取りいただけます。';
        buttonText.textContent = 'LINE連携を解除する';
        button.classList.add('is-disconnect');
        return;
      }

      if (state === 'disconnected') {
        badgeText.textContent = 'LINE未連携';
        title.textContent = 'LINEと連携する';
        description.textContent = 'かんたんな認証だけで、すぐに連携を開始できます。';
        buttonText.textContent = 'LINE連携をはじめる';
        return;
      }

      if (state === 'login-required') {
        badge.classList.add('is-error');
        badgeText.textContent = 'ログインが必要です';
        title.textContent = 'ストアへログインしてください';
        description.textContent = 'LINE連携にはストアアカウントへのログインが必要です。';
        buttonText.textContent = 'ログインしてLINE連携へ';
        return;
      }

      badge.classList.add('is-error');
      badgeText.textContent = '読み込みエラー';
      title.textContent = '状態を確認できませんでした';
      description.textContent = '通信状況をご確認のうえ、もう一度お試しください。';
      buttonText.textContent = 'もう一度確認する';
    }

    function waitForStoreCRM() {
      return new Promise(function (resolve, reject) {
        var attempts = 0;
        var timer = window.setInterval(function () {
          attempts += 1;
          if (window.storecrm && typeof window.storecrm.doGetStatus === 'function') {
            window.clearInterval(timer);
            resolve(window.storecrm);
            return;
          }
          if (attempts >= 100) {
            window.clearInterval(timer);
            reject(new Error('StoreCRM script was not loaded'));
          }
        }, 100);
      });
    }

    function isUnauthorized(error) {
      return String(error || '').indexOf('401') !== -1;
    }

    async function refreshStatus(options) {
      options = options || {};
      setState('loading');

      try {
        var storecrm = await waitForStoreCRM();
        var status = await storecrm.doGetStatus();
        setState(status && status.line ? 'connected' : 'disconnected');

        if (options.message) {
          setNotice(options.message, true);
        }
      } catch (error) {
        console.error('StoreCRM LINE status error:', error);
        setState(isUnauthorized(error) ? 'login-required' : 'error');
      }
    }

    button.addEventListener('click', async function () {
      if (currentState === 'login-required') {
        var returnUrl = window.location.pathname + window.location.search;
        window.location.href = '/account/login?return_url=' + encodeURIComponent(returnUrl);
        return;
      }

      if (currentState === 'error') {
        refreshStatus();
        return;
      }

      if (currentState === 'disconnected') {
        button.disabled = true;
        button.classList.add('is-loading');
        buttonText.textContent = 'LINEへ移動しています...';

        try {
          var storecrmForConnect = await waitForStoreCRM();
          await storecrmForConnect.doLineSubscribe();
        } catch (error) {
          console.error('StoreCRM LINE connect error:', error);
          setState(isUnauthorized(error) ? 'login-required' : 'error');
        }
        return;
      }

      if (currentState === 'connected') {
        if (!window.confirm('LINE連携を解除しますか?')) return;

        button.disabled = true;
        button.classList.add('is-loading');
        buttonText.textContent = '解除しています...';

        try {
          var storecrmForDisconnect = await waitForStoreCRM();
          await storecrmForDisconnect.doLineUnsubscribe();
          await refreshStatus({ message: 'LINE連携を解除しました。' });
        } catch (error) {
          console.error('StoreCRM LINE disconnect error:', error);
          setState(isUnauthorized(error) ? 'login-required' : 'error');
        }
      }
    });

    var query = new URLSearchParams(window.location.search);
    var connectedFromCallback = query.get('line_connect') === '1';

    refreshStatus({
      message: connectedFromCallback ? 'LINE連携が完了しました。' : '',
    }).then(function () {
      if (connectedFromCallback && window.history && window.history.replaceState) {
        query.delete('line_connect');
        var cleanQuery = query.toString();
        var cleanUrl = window.location.pathname + (cleanQuery ? '?' + cleanQuery : '') + window.location.hash;
        window.history.replaceState({}, document.title, cleanUrl);
      }
    });
  })();
</script>

ページ作成用コードを貼り付ける:赤枠が操作対象
ページ作成用コードを貼り付ける(クリックで拡大)

1-7. StoreCRMの共通機能を有効にする

テーマ編集の[埋め込みアプリ]で[StoreCRMの共通機能]をONにし、右上の[保存]をクリックします。

StoreCRMの共通機能を有効にする:赤枠が操作対象
StoreCRMの共通機能を有効にする(クリックで拡大)

1-8. テンプレートをページへ割り当てる

Shopifyのページ編集へ戻り、[テーマテンプレート]で「line-coupon」を選択します。候補に出ない場合はページを再読み込みしてください。

テンプレートをページへ割り当てる:赤枠が操作対象
テンプレートをページへ割り当てる(クリックで拡大)

1-9. 割り当てを保存する

[保存]をクリックします。[表示]から専用ページを開き、LINE連携の案内が表示されることを確認します。

割り当てを保存する:赤枠が操作対象
割り当てを保存する(クリックで拡大)

2. StoreCRMでカスタム経路を作成する

2-1. LINEメニューを開く

StoreCRMで対象ストアを確認し、左メニューの[LINE]をクリックします。画像は「導入検証ストア二」で撮影しています。

LINEメニューを開く:赤枠が操作対象
LINEメニューを開く(クリックで拡大)

2-2. 流入経路を開く

[流入経路]をクリックします。

流入経路を開く:赤枠が操作対象
流入経路を開く(クリックで拡大)

2-3. カスタム流入経路を追加する

[カスタム流入経路を追加]をクリックします。

カスタム流入経路を追加する:赤枠が操作対象
カスタム流入経路を追加する(クリックで拡大)

2-4. 経路名を入力する

[経路名]に「LINE連携ページ・クーポン」を入力します。

経路名を入力する:赤枠が操作対象
経路名を入力する(クリックで拡大)

2-5. 経路キーを入力する

[経路キー]に「line_coupon_page」を入力します。

補足:半角英小文字・数字・_・-が使用できます。作成後は変更できません。コードへ渡す値と完全に一致させます。

経路キーを入力する:赤枠が操作対象
経路キーを入力する(クリックで拡大)

2-6. シナリオなしを選ぶ

[LINE連携後の動作]は[LINE連携・流入計測のみ(シナリオなし)]を選びます。シナリオは手順4で作成してから紐付けます。

シナリオなしを選ぶ:赤枠が操作対象
シナリオなしを選ぶ(クリックで拡大)

2-7. カスタム経路を作成する

[流入経路を作成]をクリックします。作成した経路キーを控えます。

補足:既に同じ経路がある場合は重複作成せず、その経路のキーを使用してください。

カスタム経路を作成する:赤枠が操作対象
カスタム経路を作成する(クリックで拡大)

3. ページの連携処理に経路キーを渡す

3-1. 連携処理へ経路キーを渡す

Shopifyの専用テンプレート「line-coupon」の[カスタムLiquid]を開き、storecrmForConnect.doLineSubscribe の呼び出しを次のように変更します。

補足:連携解除の doLineUnsubscribe() は変更しません。下記コードの line_coupon_page は、ご自身が作成した経路キーへ合わせてください。

連携処理へ経路キーを渡す:赤枠が操作対象
連携処理へ経路キーを渡す(クリックで拡大)

変更前:

await storecrmForConnect.doLineSubscribe();

変更後:

await storecrmForConnect.doLineSubscribe({
  routeKey: 'line_coupon_page'
});

3-2. 改修したコードを保存する

テーマ編集画面の右上にある[保存]をクリックします。保存後にページを再読み込みします。

補足:カスタム経路を作っただけでは、ページ側の連携処理へ経路キーは追加されません。必ずコードも改修します。

改修したコードを保存する:赤枠が操作対象
改修したコードを保存する(クリックで拡大)

4. クーポンを発行・送信するシナリオを作成する

4-1. LINEメッセージ一覧を開く

StoreCRMの[LINEメッセージ一覧]をクリックします。

LINEメッセージ一覧を開く:赤枠が操作対象
LINEメッセージ一覧を開く(クリックで拡大)

4-2. 新しいLINEメッセージを追加する

[新しくLINEメッセージを追加する]をクリックします。

新しいLINEメッセージを追加する:赤枠が操作対象
新しいLINEメッセージを追加する(クリックで拡大)

4-3. メッセージの名称を入力する

[名称]に「LINE連携特典クーポン」を入力します。

メッセージの名称を入力する:赤枠が操作対象
メッセージの名称を入力する(クリックで拡大)

4-4. メッセージ種別を選ぶ

[メッセージ種別]で[テキスト]を選択します。

メッセージ種別を選ぶ:赤枠が操作対象
メッセージ種別を選ぶ(クリックで拡大)

4-5. クーポンコードのタグをコピーする

[クーポンコード]の[コピー]をクリックします。取得したタグは [coupon_code] です。

クーポンコードのタグをコピーする:赤枠が操作対象
クーポンコードのタグをコピーする(クリックで拡大)

4-6. クーポンリンクのタグをコピーする

[クーポンリンク]の[コピー]をクリックします。取得したタグは [coupon] です。

クーポンリンクのタグをコピーする:赤枠が操作対象
クーポンリンクのタグをコピーする(クリックで拡大)

4-7. タグを含む本文を入力する

コピーしたタグを使い、下記の本文例を入力します。割引率・有効期限・利用条件は、後で設定するクーポン生成条件と一致させてください。

補足:固定のクーポンコードを入力せず、シナリオで発行した値をタグで差し込みます。

タグを含む本文を入力する:赤枠が操作対象
タグを含む本文を入力する(クリックで拡大)
LINE連携ありがとうございます。
連携特典の10%OFFクーポンを発行しました。
クーポンコード:[coupon_code]
クーポンを使う:[coupon]
有効期限は発行日から30日です。
このクーポンは連携したお客様ご本人が1回ご利用いただけます。

4-8. LINEメッセージを保存する

画面上部の[保存]をクリックします。

LINEメッセージを保存する:赤枠が操作対象
LINEメッセージを保存する(クリックで拡大)

4-9. カスタム経路の設定を開く

[LINE]→[流入経路]へ戻り、「LINE連携ページ・クーポン」の[シナリオを設定]をクリックします。

カスタム経路の設定を開く:赤枠が操作対象
カスタム経路の設定を開く(クリックで拡大)

4-10. 専用シナリオを作成する

[専用シナリオを作成]をクリックします。

補足:この入口から、開始条件が[LINE連携が完了した]の専用シナリオを作成します。通常のLINE配信シナリオでは、この経路へ紐付けられません。

専用シナリオを作成する:赤枠が操作対象
専用シナリオを作成する(クリックで拡大)

4-11. シナリオ名を入力する

[シナリオ名]に「LINE連携ページ限定クーポン」を入力します。

シナリオ名を入力する:赤枠が操作対象
シナリオ名を入力する(クリックで拡大)

4-12. 送信するメッセージを選ぶ

[送信するLINEメッセージ]で、作成した「LINE連携特典クーポン」を選択します。

送信するメッセージを選ぶ:赤枠が操作対象
送信するメッセージを選ぶ(クリックで拡大)

4-13. シナリオを保存する

[保存]をクリックします。クーポン生成を追加し終わるまで、下書きのままにします。

シナリオを保存する:赤枠が操作対象
シナリオを保存する(クリックで拡大)

4-14. フローエディタへ切り替える

シナリオ詳細の[(上級者向け) フローエディタで編集する]をクリックします。

補足:切替説明の画像は同じ検証ストアの専用シナリオです。操作時は直前に作成した「LINE連携ページ限定クーポン」を開いてください。

フローエディタへ切り替える:赤枠が操作対象
フローエディタへ切り替える(クリックで拡大)

4-15. 切り替えの確認を実行する

確認内容を読み、[実行する]をクリックします。

補足:フローエディタで一度保存すると、簡易設定へ戻せません。ここでは新規作成したシナリオを使用します。

切り替えの確認を実行する:赤枠が操作対象
切り替えの確認を実行する(クリックで拡大)

4-16. 送信前の接続線の+を押す

開始条件[LINE連携が完了した]と[LINEメッセージを送信する]の間の接続線にある[+]をクリックします。

補足:画像は生成ノード追加後の配置例です。新規作成時は開始条件と送信ノードの間へ挿入します。末尾の+から追加しないでください。

送信前の接続線の+を押す:赤枠が操作対象
送信前の接続線の+を押す(クリックで拡大)

4-17. クーポン生成を追加する

[ノードを追加]で[クーポンを生成する]をクリックします。

クーポン生成を追加する:赤枠が操作対象
クーポン生成を追加する(クリックで拡大)

4-18. クーポン生成ノードを選ぶ

追加した[クーポンを生成する]をクリックします。

クーポン生成ノードを選ぶ:赤枠が操作対象
クーポン生成ノードを選ぶ(クリックで拡大)

4-19. 割引クーポンの編集を開く

左側の[割引クーポンを編集]をクリックします。

割引クーポンの編集を開く:赤枠が操作対象
割引クーポンの編集を開く(クリックで拡大)

4-20. クーポンの種別を選ぶ

[クーポンの種別]で[商品・注文割引]を選択します。

クーポンの種別を選ぶ:赤枠が操作対象
クーポンの種別を選ぶ(クリックで拡大)

4-21. 割引の数値を入力する

割引の数値に「10」を入力します。

割引の数値を入力する:赤枠が操作対象
割引の数値を入力する(クリックで拡大)

4-22. 割引の単位を選ぶ

割引の単位に「%」を選択します。数値10と組み合わせて10%OFFになります。

割引の単位を選ぶ:赤枠が操作対象
割引の単位を選ぶ(クリックで拡大)

4-23. 有効期限を入力する

[割引クーポンの有効期限(日)]に「30」を入力します。発行から30日を設定する例です。

有効期限を入力する:赤枠が操作対象
有効期限を入力する(クリックで拡大)

4-24. 終了時刻を入力する

[有効期限の終了時刻]を「23:59」にします。

終了時刻を入力する:赤枠が操作対象
終了時刻を入力する(クリックで拡大)

4-25. 最低購入要件を選ぶ

[最低要件なし]を選択します。

最低購入要件を選ぶ:赤枠が操作対象
最低購入要件を選ぶ(クリックで拡大)

4-26. 対象商品を選ぶ

[すべての商品]を選択します。対象を絞る施策では商品またはコレクションを指定します。

対象商品を選ぶ:赤枠が操作対象
対象商品を選ぶ(クリックで拡大)

4-27. コードの先頭文字列を入力する

[クーポンコードの先頭文字列]に「LINE-」を入力します。残りの文字列は発行時に生成されます。

コードの先頭文字列を入力する:赤枠が操作対象
コードの先頭文字列を入力する(クリックで拡大)

4-28. 商品ディスカウントの併用を設定する

この例では[商品ディスカウント]の併用チェックをOFFにします。

商品ディスカウントの併用を設定する:赤枠が操作対象
商品ディスカウントの併用を設定する(クリックで拡大)

4-29. 注文ディスカウントの併用を設定する

この例では[注文ディスカウント]の併用チェックをOFFにします。

注文ディスカウントの併用を設定する:赤枠が操作対象
注文ディスカウントの併用を設定する(クリックで拡大)

4-30. 配送ディスカウントの併用を設定する

この例では[配送ディスカウント]の併用チェックをOFFにします。

配送ディスカウントの併用を設定する:赤枠が操作対象
配送ディスカウントの併用を設定する(クリックで拡大)

4-31. 利用回数を1回にする

[クーポンの合計利用回数を上書きする]をOFFのままにします。StoreCRMのデフォルトは1回利用です。

利用回数を1回にする:赤枠が操作対象
利用回数を1回にする(クリックで拡大)

4-32. 購入タイプを選ぶ

[購入タイプ(適用対象)]で[1回限りの購入のみ]を選択します。

購入タイプを選ぶ:赤枠が操作対象
購入タイプを選ぶ(クリックで拡大)

4-33. 発行した本人だけに限定する

[クーポンを発行した顧客のみに限定する]をONにします。

補足:経路の「顧客ごとに1回」はシナリオの開始頻度です。こちらは発行したクーポンを誰が使えるかの設定です。

発行した本人だけに限定する:赤枠が操作対象
発行した本人だけに限定する(クリックで拡大)

4-34. クーポン設定を保存する

クーポン設定画面の[保存]をクリックします。

補足:クーポンはこの時点で共通コードを事前発行するのではなく、シナリオの実行時に生成されます。

クーポン設定を保存する:赤枠が操作対象
クーポン設定を保存する(クリックで拡大)

4-35. 送信ノードを選ぶ

[LINEメッセージを送信する]をクリックします。

送信ノードを選ぶ:赤枠が操作対象
送信ノードを選ぶ(クリックで拡大)

4-36. 送信するLINE本文を確認する

[LINEメッセージ]に「LINE連携特典クーポン」が選ばれていることを確認します。

送信するLINE本文を確認する:赤枠が操作対象
送信するLINE本文を確認する(クリックで拡大)

4-37. フローを保存する

「LINE連携が完了した → クーポンを生成する → LINEメッセージを送信する」の接続順を確認し、上部の[保存する]をクリックします。

フローを保存する:赤枠が操作対象
フローを保存する(クリックで拡大)

4-38. シナリオを有効にする

シナリオ詳細へ戻り、[ステータス]で[有効]を選択します。

シナリオを有効にする:赤枠が操作対象
シナリオを有効にする(クリックで拡大)

4-39. カスタム経路の設定を再び開く

[LINE]→[流入経路]に戻り、「LINE連携ページ・クーポン」の[シナリオを設定]をクリックします。

カスタム経路の設定を再び開く:赤枠が操作対象
カスタム経路の設定を再び開く(クリックで拡大)

4-40. シナリオの候補を更新する

[選択肢を更新]をクリックします。作成・有効化したシナリオを候補に反映します。

シナリオの候補を更新する:赤枠が操作対象
シナリオの候補を更新する(クリックで拡大)

4-41. 専用シナリオを紐付ける

[LINE連携後の動作]で「LINE連携ページ限定クーポン(有効)」を選択します。

専用シナリオを紐付ける:赤枠が操作対象
専用シナリオを紐付ける(クリックで拡大)

4-42. 実行頻度を選ぶ

[シナリオの実行頻度]で[顧客ごとに1回だけ]を選択します。

実行頻度を選ぶ:赤枠が操作対象
実行頻度を選ぶ(クリックで拡大)

4-43. 経路の設定を保存する

[設定を保存]をクリックします。

経路の設定を保存する:赤枠が操作対象
経路の設定を保存する(クリックで拡大)

4-44. 経路の計測をONにする

一覧の対象経路を[計測ON]にします。すでにONなら変更する必要はありません。経路キー・シナリオ・実行頻度を確認して設定完了です。

経路の計測をONにする:赤枠が操作対象
経路の計測をONにする(クリックで拡大)

5. テストと運用前の確認

5-1. シナリオテストを開く

[このシナリオをテストする]をクリックします。詳しい実行手順は下の「シナリオをテストする」を参照してください。最初は外部送信・Shopifyへの実発行をOFFにして、3ノードの実行順を確認します。

シナリオテストを開く:赤枠が操作対象
シナリオテストを開く(クリックで拡大)

シナリオをテストする:対象選択・実行内容・結果確認の詳しい手順

ページからの新規連携と実際の受信を確認する

未連携のテスト顧客でShopifyへログインして作成したページからLINE連携し、公式アカウントの友だち追加まで完了します。テストモードでは、その顧客を受信可能なLINEテスト送信先へ設定してから確認してください。

LINE本文のコードとリンクが実値へ置き換わること、Shopifyに個別コードが発行されること、発行対象の顧客が意図した条件で利用できることを確認します。すでに連携済みの顧客でページを表示するだけでは、新規連携の確認になりません。

シナリオテストでクーポンの実発行をOFFにした場合、生成ノードが「完了」でもShopifyへ実クーポンは発行されません。実発行をONにするとShopifyへ実データが作成され、テスト終了後も自動削除されません。

LINE流入経路を設定・分析する:レポートと顧客別の処理結果の確認方法

うまく動かない場合

症状 確認項目
ページの連携機能を読み込めない テーマの[StoreCRMの共通機能]がONか、Shopifyへログインしているか確認します。
連携できるがカスタム経路にならない doLineSubscribe に渡した routeKey と作成済み経路のキーが一致しているか、計測がONか確認します。
クーポンが発行されない 経路に専用シナリオが紐付き、有効になっているか、生成ノードが送信ノードより前にあるか、実行履歴にエラーがないか確認します。
本文にコード・リンクが入らない [coupon_code] と [coupon] が本文に入り、送信前にクーポン生成が実行されているか確認します。
再度連携してもシナリオが始まらない [顧客ごとに1回だけ]の頻度制限と連携済みの状態を確認します。検証は未実行のテスト顧客で行ってください。
TOP
jaJapanese