> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# チェックアウト直行UTMリンクの使い方

> チェックアウト直行リンクのセットアップを含め、UTMパラメーターを使ってポストパーチェスファネルをトリガーする方法を学びます

Aftersellは、UTMパラメーターに基づくファネルのトリガーをサポートしています。これは高度なユースケース向けのオプション機能です。顧客が特定のUTMクエリ文字列付きでサイトを訪れたときにファネルを有効化するように設定できます。

このセットアップはオプションであり、通常は、チェックアウト直行リンクやキャンペーン固有のオファーなど、高度なトラッキングが必要な場合にのみ必要です。

<div id="how-utm-triggers-work">
  ## UTMトリガーの仕組み
</div>

UTMトリガーを使うと、URL内のUTMパラメーターに基づいて特定のポストパーチェスファネルを表示できます。これは次のような場合に便利です:

* **キャンペーン固有のオファー** - マーケティングキャンペーンに応じて異なるアップセルを表示
* **チェックアウト直行リンク** - 顧客がストアフロントをスキップした場合にファネルをトリガー
* **チャネルアトリビューション** - トラフィックソース(メール、SNS、広告)に基づいてオファーをパーソナライズ
* **A/Bテスト** - キャンペーンのバリエーションごとに異なるオファーをテスト

<div id="quick-start-basic-utm-trigger-setup">
  ## クイックスタート: 基本的なUTMトリガーの設定
</div>

(チェックアウト直行ではなく)通常のストアフロント訪問の場合、Aftersellのアプリ埋め込みを使ってUTMトリガーを設定できます。UTMトリガーをすぐに始める方法については、こちらの動画をご覧ください:

<iframe src="https://go.screenpal.com/player/cOfD38nOD9i" title="How to set up UTM Triggers" allowFullScreen style={{ width: '100%', aspectRatio: '16/9', borderRadius: '12px' }} />

<div id="enable-the-utm-app-embed">
  ### UTMアプリ埋め込みを有効にする
</div>

ストアフロントページでUTMパラメーターをトラッキングするには:

1. Shopify管理画面で **Online Store > Themes** に移動します
2. 使用中のテーマで **Customize** をクリックします
3. テーマエディターで、左サイドバーの **App embeds** アイコン(パズルピース)をクリックします
4. **Aftersell UTM Tracker** を見つけて**オン**に切り替えます
5. **Save** をクリックします

有効にすると、顧客がUTMリンク付きでストアフロントを訪れた際に、AftersellがUTMパラメーターを自動的にキャプチャします。

<div id="configure-utm-triggers-in-your-funnel">
  ### ファネルでUTMトリガーを設定する
</div>

アプリ埋め込みを有効にした後:

1. Aftersell管理画面で **Post-purchase Funnels** に移動します
2. ファネルを作成または編集します
3. **Triggers** セクションで **UTM Parameter** トリガーを追加します
4. マッチさせたいUTMパラメーターと値を設定します
5. ファネルを保存します

<div id="supported-utm-parameters">
  ## サポートされているUTMパラメーター
</div>

Aftersellは、次の標準UTMパラメーターをサポートしています:

* `utm_source` - トラフィックソースを識別します(例: google、newsletter、facebook)
* `utm_medium` - マーケティング媒体を識別します(例: email、cpc、social)
* `utm_campaign` - 特定のキャンペーンを識別します(例: spring\_sale、product\_launch)
* `utm_term` - 有料検索キーワードを識別します(例: running+shoes)
* `utm_content` - 類似コンテンツやリンクを区別します(例: banner\_ad、text\_link)
* `utm_id` - キャンペーンIDを識別します(例: campaign\_123)

6つのパラメーターすべてがトラッキングされ、ファネルのトリガーに使用できます。

<div id="partial-field-matching">
  ## 部分一致
</div>

UTMトリガーを設定する際、AftersellはUTMパラメーター値の**部分一致**をサポートしています。つまり:

* ✅ **トリガー値:** `spring` → **マッチ:** `spring_sale`、`spring_2026`、`early_spring`
* ✅ **トリガー値:** `email` → **マッチ:** `email_newsletter`、`promotional_email`
* ✅ **トリガー値:** `sale` → **マッチ:** `spring_sale`、`flash_sale`、`sale_2026`

この柔軟性により、キャンペーンのバリエーションごとに個別のトリガーを作成することなく、複数のバリエーションにマッチする幅広いトリガーを作成できます。

**例:** `utm_campaign` が `sale` を含むというトリガーを設定すると、`spring_sale`、`summer_sale`、`flash_sale_2026` など、名前に「sale」を含むあらゆるキャンペーンにマッチします。

<div id="direct-to-checkout-utm-links">
  ## チェックアウト直行UTMリンク
</div>

上記の動画で示した基本セットアップは、顧客を**チェックアウトに直接**送るリンクを**サポートしていません**。デフォルトでは、AftersellはストアフロントページでのみUTMパラメーターを検出できます。これは、テーマアプリ埋め込みに依存しているためで、この埋め込みはストアフロントページでのみ機能し、チェックアウトやサンキューページでは機能しません。

<div id="enable-utm-tracking-on-checkout-pages">
  ### チェックアウトページでUTMトラッキングを有効にする
</div>

チェックアウトページでUTMパラメーターをトラッキングする(チェックアウト直行リンク用)には、ストアに **Shopifyピクセルを追加**する必要があります。

⚠️ **重要な制限:**

* このセットアップでは、訪問者がUTMリンク経由でチェックアウトに到着した時点で**カートトークン**を持っている必要があります。カートトークンがないと、UTMデータはキャプチャされません。
* **エクスプレスチェックアウト(Shop Pay、Apple Pay、Google Pay)はサポートされていません。** これらはカートをバイパスし、カートトークンを生成しないためです。エクスプレスチェックアウトを使用する顧客は、UTMベースのファネルをトリガーしません。

<div id="setting-up-the-shopify-pixel">
  ### Shopifyピクセルの設定
</div>

チェックアウト直行のUTMトラッキングを設定するには、次の手順に従ってください:

1. Shopify管理画面で **Settings > Customer Events** に移動します。
2. **Add Custom Pixel** をクリックし、任意の名前を付けます。
3. **Permission** ドロップダウンで **Analytics** を選択します。必要な権限はこれだけです。
4. **Data Sale** ドロップダウンでは、**Data collected does not qualify as data sale** を選択できます。Aftersellは収集したすべてのデータを非公開に保ち、あなた以外の誰とも共有しません。
5. 表示されるコードエディターに、以下のコードを貼り付けます。
6. **Save**、次に **Connect** をクリックします。

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
/**  
 * IMPORTANT: This pixel can only fire on sessions where the  
 * customer has a cart object, otherwise it will be skipped.  
 * For example, clicking "Buy Now" on a product page skips the cart,  
 * going directly to checkout.  
**/  
function processData({event, cartToken}) {  
  // TODO: Edit MYSHOPIFY_DOMAIN to your domain. E.g.  
  // const MYSHOPIFY_DOMAIN = 'example-store.myshopify.com';  
  const MYSHOPIFY_DOMAIN = '';  
  
  const enableDebug = false;  
  
  // DO NOT EDIT PAST HERE  
  const SESSION_STORAGE_KEY = 'as-customer-trigger-data';  
  const HOST = 'https://start.aftersell.app';  
  
  if (!MYSHOPIFY_DOMAIN) {  
    if (enableDebug) {  
      console.log("UTM pixel didn't fire because of missing Shopify domain");  
    }  
    return;  
  }  
  if (!cartToken) {  
    if (enableDebug) {  
      console.log("UTM pixel didn't fire because of missing cart token");  
    }  
  }  
    
  let existingCustomerData = null;  
  try {  
      existingCustomerData = JSON.parse(  
          sessionStorage.getItem(SESSION_STORAGE_KEY) || 'null'  
      );  
  } catch (ignore) {  
    if (enableDebug) {  
      console.log("UTM pixel didn't fire because malformed user data json");  
    }  
  }  
    
  const allowedUrlParams = [  
        'utm_source',  
        'utm_medium',  
        'utm_campaign',  
        'utm_term',  
        'utm_id',  
        'utm_content',  
    ];  
    
  const searchParams = new URLSearchParams(event.context.window.location.search);  
  let hasCustomerData = false;  
  const customerData = {};  
  for (const param of allowedUrlParams) {  
    const paramValue = searchParams.get(param) || existingCustomerData?.[param];  
    if (paramValue) {  
        hasCustomerData = true;  
        customerData[param] = paramValue;  
    }  
  }  
  
  if (hasCustomerData) {  
    sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(customerData));  
  
    const postBody = {  
      shop: MYSHOPIFY_DOMAIN,  
      cartToken,  
      checkoutToken: event.data.checkout.token ?? undefined,  
      customerTriggerData: customerData,  
    };  
  
    if (enableDebug) {  
      console.log("UTM pixel fired with the following data:", postBody);  
    }  
      
    fetch(`\${HOST}/api/v1/storefrontSessions`, {  
        method: 'POST',  
        headers: {  
            'Content-Type': 'application/json',  
        },  
        body: JSON.stringify(postBody),  
    });  
  } else {  
    if (enableDebug) {  
      console.log("UTM pixel didn't fire because there was no data to send");  
    }  
  }  
}  
  
analytics.subscribe('checkout_started', (event) => {  
   // minimum realistic time between adding item to cart and clicking checkout  
    const COOKIE_POLLING_INTERVAL_MS = 500;  
  
    let currentCookieValue = getCookieValue({ cookie: document.cookie, cookieName: 'cart' });  
    processData({event, cartToken: currentCookieValue});  
  
    setInterval(() => {  
        const newCookieValue = getCookieValue({ cookie: document.cookie, cookieName: 'cart' });  
        if (newCookieValue !== currentCookieValue) {  
            currentCookieValue = newCookieValue;  
            processData({event, cartToken: newCookieValue});  
        }  
    }, COOKIE_POLLING_INTERVAL_MS);  
});  
  
function getCookieValue({ cookie, cookieName }) {  
    const cartCookieRegex = new RegExp(`^\${cookieName}=`);  
    const cartCookie = cookie  
        .split(';')  
        .map((val) => val.trim())  
        .find((val) => cartCookieRegex.test(val));  
    if (!cartCookie) return null;  
    const cartCookieValue = cartCookie.replace(`\${cookieName}=`, '');  
    return cartCookieValue;  
}
```

**重要な設定上の注意:**

* **`MYSHOPIFY_DOMAIN` を編集する:** 空の文字列を、ストアのmyshopify.comドメイン(例: `'example-store.myshopify.com'`)に置き換える必要があります
* **デバッグモードを有効にする(任意):** `enableDebug = true` に設定すると、トラブルシューティング用のコンソールログが表示されます
* **サポートされているパラメーター:** ピクセルは、`allowedUrlParams` 配列に記載された6つの標準UTMパラメーターすべてをトラッキングします

<div id="testing-your-utm-trigger-setup">
  ## UTMトリガー設定のテスト
</div>

UTMトリガーを設定した後、次のチェックリストを使ってすべてが正しく動作していることを確認しましょう:

<div id="for-storefront-utm-tracking-app-embed">
  ### ストアフロントのUTMトラッキング(アプリ埋め込み)の場合
</div>

* ✅ **アプリ埋め込みの有効化:** テーマ設定でAftersell UTM Trackerアプリ埋め込みがオンになっていることを確認します
* ✅ **URLのテスト:** UTMパラメーター付きでストアを訪問します(例: `yourstore.com?utm_campaign=test`)
* ✅ **購入の完了:** 商品をカートに追加し、チェックアウトを完了します
* ✅ **ファネルの確認:** サンキューページに正しいファネルが表示されることを確認します
* ✅ **Order Browser:** AftersellのOrder Browserで、UTMトリガーが検出されたことを確認します

<div id="for-direct-to-checkout-utm-tracking-shopify-pixel">
  ### チェックアウト直行のUTMトラッキング(Shopifyピクセル)の場合
</div>

* ✅ **ピクセルのインストール:** Settings > Customer Eventsでカスタムピクセルが保存・接続されていることを確認します
* ✅ **ドメインの設定:** ピクセルコード内の `MYSHOPIFY_DOMAIN` が正しく設定されていることを確認します
* ✅ **カートトークンの存在:** チェックアウトに進む前に顧客のカートに商品が入っていることを確認します(トラッキングに必須)
* ✅ **URLのテスト:** UTMパラメーター付きのチェックアウト直行リンクを使用します(例: `yourstore.com/checkout?utm_campaign=test`)
* ✅ **購入の完了:** チェックアウトプロセスを完了します
* ✅ **ファネルの確認:** サンキューページに正しいファネルが表示されることを確認します
* ✅ **Order Browser:** AftersellのOrder Browserで、UTMトリガーが検出されたことを確認します
* ⚠️ **エクスプレスチェックアウト:** Shop Pay、Apple Pay、Google PayはUTMトリガーでは機能しないことを覚えておいてください

<div id="troubleshooting-tips">
  ### トラブルシューティングのヒント
</div>

UTMトリガーが機能しない場合:

1. **デバッグモードを有効にする:** ピクセルコードで `enableDebug = true` に設定し、ブラウザのコンソールでエラーメッセージを確認します
2. **カートトークンを確認する:** チェックアウトに到達する前に顧客のカートに商品が入っていることを確認します(ピクセルにはカートトークンが必要です)
3. **トリガー設定を確認する:** ファネルトリガーのUTMパラメーターと値がURLのパラメーターと一致していることを確認します
4. **部分一致をテストする:** トリガーは部分一致を使用することを覚えておいてください - `sale` は `spring_sale`、`flash_sale` などにマッチします
5. **ファネルの優先度を確認する:** 複数のファネルがマッチする場合、最も優先度の高いファネルのみが表示されます
6. **Order Browserを確認する:** AftersellのOrder Browserを使って、各注文でどのトリガーが発火したかを確認します

<div id="best-practices-for-utm-triggers">
  ## UTMトリガーのベストプラクティス
</div>

* **一貫した命名を使う:** UTMパラメーターの命名規則を確立しましょう(例: `utm_campaign=email_spring_2026`)
* **部分一致を活用する:** より広いトリガー値を使って、複数のキャンペーンバリエーションにマッチさせましょう
* **公開前にテストする:** UTMリンクとトリガーは、顧客に送信する前に必ずテストしましょう
* **キャンペーンを記録する:** 各キャンペーンで使用しているUTMパラメーターを記録しておきましょう
* **他のトリガーと組み合わせる:** より正確なターゲティングのために、UTMトリガーを商品や注文金額のトリガーと併用しましょう
* **パフォーマンスを監視する:** Order Browserを定期的に確認し、どのUTMキャンペーンが最も多くのアップセルを生んでいるかを把握しましょう