Shopify サイトに埋め込みフォームを追加する方法

このページで学べること

Klaviyo の埋め込みフォームを Shopify サイトに追加する方法をご覧ください。これには、Klaviyo でフォームを作成し、表示したい場所（フッターなど）のサイト ファイルに埋め込みコードを貼り付ける作業が含まれます。

始める前に

Klaviyo で埋め込みフォームを作成する前に、Shopify と外部連携し、サインアップフォーム機能（「オンサイト トラッキング」とも呼ばれます）を有効にする必要があります。Shopify ストアでは、サインアップフォームを表示し、データを適切に同期するには、アプリ埋め込みを有効にする必要があります。

アプリ埋め込みが有効になっていることを確認するには：

1. Shopify 外部連携の設定ページに移動します。
2. Onsite Tracking セクションまでスクロールします。
   • Shopify ストアで Klaviyo のアプリ埋め込みが有効になっていますという緑色のバナーが表示されている場合は、準備完了です。記事の次のセクションに進み、埋め込みフォームをサイトに追加してください。
     

• 黄色のバナーに Klaviyo のアプリ埋め込みがオフになっています。オンにした後、Shopify テーマエディターで [保存] を選択し、変更を適用してください。
  
  • この記事を続ける前に、Shopify 向けの Klaviyo のアプリ埋め込みを有効にするガイドをご参照ください。
    

この記事の例では、Shopify 2.0 テーマを使用しています。使用しているテーマは異なる場合があります。その場合、一部のファイル名やコードスニペットの場所に影響する可能性があります。

サイトに埋め込みフォームを追加する

Shopify のサンキューまたは注文ステータスページにフォームを埋め込みたいですか？Shopify はこの機能をネイティブではサポートしなくなりましたが、Klaviyo の SMS アプリブロック機能を使用して、Shopify のチェックアウト（Shopify Plus のみ）、サンキュー、または注文ステータスページで SMS 同意を収集できます。

1. 埋め込みフォームを作成します。
2. フォームエディターで、[ターゲティングと行動] > [表示]を選択します。
3. Embed Code の下で、以下のようにコード内からフォーム ID をコピーします：
   

4. フォームを公開します。
5. Shopify のダッシュボードに移動します。
6. [Online Store] > [Themes] を選択します。
7. [カスタマイズ] をクリックします。
   

8. 上部のメニュー バーで、フォームを追加するページ テンプレート（例: ホーム ページまたはパスワード ページ）を選択します。
   

9. 左側のメニューで Apps の下にある [セクションを追加] > [Apps] > [Klaviyo 埋め込みフォーム] を選択します。
   • このフォームをこの特定のページにのみ表示したい場合は、テンプレートセクションで設定してください。
     

• フォームをウェブサイトのすべてのページに表示し続けたい場合は、Footer セクションでこれを行います。サイトのフッターに埋め込みフォームを設置することも、リストを増やすための Klaviyo のベストプラクティスである点にご注意ください。
  

10. 左側のメニューで、新しく作成した [Klaviyo 埋め込みフォーム] セクションをクリックします。
11. Klaviyo からコピーしたフォーム ID を、指定のテキストボックスに貼り付けます。
    

12. [保存] をクリックして、埋め込みフォームをページ テンプレートに追加します。保存するまで、埋め込みフォームはプレビューに表示されない点にご注意ください。
13. 任意：保存後、メニュー内でクリックしてドラッグし、Klaviyo Embedded Form アプリを並べ替えることができます。

埋め込みコードを貼り付けて Shopify で変更を保存したら、ウェブサイトに戻ってページを更新します。サイト訪問者はフォームを表示でき、フォームに入力してリストに参加するオプションを利用できます。

フォームが表示されない場合は、埋め込みフォームのトラブルシューティングをご確認ください。

次の手順

次に、ウェルカムシリーズフローを作成して、新しい購読者にすぐに効果をもたらしましょう。

その他のリソース