> ## 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 매개변수를 기반으로 특정 구매 후 퍼널을 표시할 수 있어요. 다음과 같은 경우에 유용해요:

* **캠페인별 오퍼** - 마케팅 캠페인에 따라 서로 다른 업셀을 표시
* **다이렉트 투 체크아웃 링크** - 고객이 스토어프런트를 건너뛸 때 퍼널을 트리거
* **채널 어트리뷰션** - 트래픽 소스(이메일, 소셜 미디어, 광고)에 따라 오퍼를 개인화
* **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)

여섯 가지 매개변수 모두 추적되며 퍼널 트리거에 사용할 수 있어요.

<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` 배열에 나열된 여섯 가지 표준 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 캠페인이 가장 많은 업셀을 유도하는지 확인하세요