トラブルシューティング

設定完了後に表示できない場合等の対処法についてご案内します。

CRM PLUS on LINE
トラブルシューティング MENUを表示する

Flex Messageプレビューのエラー対処方法 | 購入・発送完了通知のテンプレート使用時

「CRM PLUS on LINE」が提供している「Shopify Flow」のテンプレート(購入完了通知・発送通知)を元にボタン色やテキスト文字などを編集したい場合、Flex Messageのコードを編集いただく必要があります。

Flex Messageのコードをプレビューしながら編集できる「LINE Flex Message Simulator」上で確認しながら編集を行いますが、「CRM PLUS on LINE」が提供しているテンプレートの内容をそのままLINE Flex Message Simulator にコピー&ペーストすると、下記のようにエラーが表示され、プレビューを確認できません。

▼LINE Flex Message Simulator上でのエラー表示画面例

本記事ではプレビュー画面でのエラーを解消して、「購入・発送完了通知」のメッセージ内容のカスタマイズをプレビューできるようにする方法についてご紹介します。

▼まだ「購入完了通知」や「発送完了通知」のテンプレートをダウンロードしていない場合は、下記手順をご参照ください。

Shopify Flowのテンプレートを使って購入完了通知・発送通知を送る

▼Flex Messageのカスタマイズ方法については、下記記事をご参照ください。
LINEのFlex Message Simulatorを使って追跡番号付き「発送完了通知」を編集する方法

今回はワークフロー例として、「CRM PLUS on LINE」が「Shopify Flow」に提供しているテンプレート「購入完了通知をLINE配信(Send a notification when a purchase is completed)」を使用し、下記2パターンのエラー解消方法を解説していきます。

  1. そもそもプレビューが表示されない場合
  2. 画像がプレビューに正しく反映されない場合

Case1.そもそもプレビューが表示されない場合

1. 「Flex Messageのコンテナ」を全文コピーする

Shopify Flowのテンプレート内のアクション「LINEでFlexメッセージを送る」を選択し、「Flex Messageのコンテナ」を全文コピーします。

2. LINE Flex Message Simulator上でのエラーを確認する

弊社提供のShopify Flowテンプレート(Flex Message)では、リンク・画像リンクなどに変数を用いている場合があります。

今回の場合、ボタンリンクに変数({{shop.primaryDomain.url}}/account/?openExternalBrowser=1 )が使用されています。このままShopify Flowでワークフローを実行すると適宜変数が代入されるのですが(例:{{shop.primaryDomain.url}} → https://example.com )、Flex Message Simulator上では汎用的なURLと認識されないため、エラーになってしまいます。

3. LINE Flex Message Simulatorでプレビュー表示するため、汎用的なURLに置換する

上記画像でも”invalid uri”とエラー表示が出ていますが、これはいわゆるURLの体裁の文字列(http://、https:// で始まるものです)が入力されていないことにより表示されます。

赤字でエラーになっているボタン箇所の「uri」を選択して、任意の標準URLに置き換えます。たとえばストアのドメインURLなど、任意のURLを入力するとエラーが解消されます。

▼編集前:元々記載されていた変数は後ほど(Shopify Flowへの本番反映時に)使用するので、どこかにメモしておくことをおすすめします。

▼編集後:URL記載例)https://socialplus-demo.shopify.com/

一般的な形式のURLが入力されたことでエラーが解消され、画面内の左にプレビュー画像も表示されました。

この状態から、ボタンカラーを別色に変更するなどカスタマイズが可能です。‍

▼Flex Messageのカスタマイズ方法については、下記記事をご参照ください。
LINEのFlex Message Simulatorを使って追跡番号付き「発送完了通知」を編集する方法

4. Jsonをコピーして、ワークフローへ貼り付ける

ボタンカラーを別色にするなどのカスタマイズが完了したら、ページ右上の「View as JSON」を押してコードをコピーします。

コピーしたコードを、手順1で開いた「Shopify Flow」のアクション内の【Flex Messageのコンテナ】に上書きします。

5. 手順3で置き換えたURLを、再度もとの変数に置き換える

LINE Flex Message Simulator上でプレビュー表示するために置き換えたURLの箇所を、変更前に元々入っていた変数に戻します。変数に戻し忘れてしまうと、どのお客様にも指定したURLでLINE配信されてしまいますので、必ず変数へとご変更ください。

▼編集前:汎用的なURLの箇所を探します。

▼編集後:手順3でメモしておいた変数へ書き換えます。

6. テスト配信

これで編集は完了です。ワークフローをオンにして、実際にイメージしたLINE配信ができているかお手元のスマホで確認してみてください。

▼テスト配信の方法は、下記記事内の「テスト配信の方法(2パターン)」章をご覧ください。

Shopify Flowのテンプレートを使って購入完了通知・発送通知を送る

Case2. 画像がプレビューに正しく反映されない場合

Case1はURLの変数がプレビューエラーの原因でした。

Case2では、画像URLの変数が原因の場合の解決策をご紹介します。

▼編集前:元々記載されていた変数は後ほど(Shopify Flowへの本番反映時に)使用するので、どこかにメモしておくことをおすすめします。

▼編集後:Case1と同じく、任意の画像リンクを準備して置き換えます。※画像リンクの取得方法は:Shopify管理画面の「コンテンツ」→「ファイル」より画像リンクをコピー

エラーが解消されたので、左側に画像付きでプレビュー画像が表示されました。

あとはプレビューを確認しながら、ボタン色・テキストなどの編集を行なってください。

▼Flex Messageのカスタマイズ方法
LINEのFlex Message Simulatorを使って追跡番号付き「発送完了通知」を編集する方法

編集が完了したら、ワークフローをオンにして、実際にイメージしたLINE配信ができているかお手元のスマホで確認してみてください。

▼テスト配信の方法は、下記記事内の「テスト配信の方法(2パターン)」章をご覧ください。

Shopify Flowのテンプレートを使って購入完了通知・発送通知を送る

Freeプランに利用期間制限はありません!お気軽にインストールしてお試しください!

CRM PLUS on LINEに関するお問い合わせやご相談など、お気軽にお問い合わせください。