마케팅 분석 SDK

마케팅 분석 브라우저 SDK는 브라우저 SDK를 확장하여 마케팅 채널을 기반으로 사용자와 이벤트를 식별합니다. 이 라이브러리는 오픈소스입니다. GitHub에서 소스를 확인하십시오.

SDK 설치

마케팅 분석 브라우저 SDK를 시작하려면 npm 또는 스크립트 로더를 사용하여 프로젝트에 패키지를 설치하십시오.

노드 패키지 설치

npm install @amplitude/marketing-analytics-browser

스크립트 로더를 사용하여 설치

Amplitude는 또한 이 패키지를 CDN을 통해 배포합니다. 이 스크립트를 복사하여 HTML 파일에 붙여넣습니다.

<script type="text/javascript">
!function(){"use strict";!function(e,t){var r=e.amplitude||{_q:[],_iq:[]};if(r.invoked)e.console&&console.error&&console.error("Amplitude snippet has been loaded.");else{var n=function(e,t){e.prototype[t]=function(){return this._q.push({name:t,args:Array.prototype.slice.call(arguments,0)}),this}},s=function(e,t,r){return function(n){e._q.push({name:t,args:Array.prototype.slice.call(r,0),resolve:n})}},o=function(e,t,r){e[t]=function(){if(r)return{promise:new Promise(s(e,t,Array.prototype.slice.call(arguments)))}}},i=function(e){for(var t=0;t<m.length;t++)o(e,m[t],!1);for(var r=0;r<y.length;r++)o(e,y[r],!0)};r.invoked=!0;var a=t.createElement("script");a.type="text/javascript",a.integrity="sha384-PPfHw98myKtJkA9OdPBMQ6n8yvUaYk0EyUQccFSIQGmB05K6aAMZwvv8z50a5hT2",a.crossOrigin="anonymous",a.async=!0,a.src="https://cdn.amplitude.com/libs/marketing-analytics-browser-0.3.2-min.js.gz",a.onload=function(){e.amplitude.runQueuedFunctions||console.log("[Amplitude] Error: could not load SDK")};var c=t.getElementsByTagName("script")[0];c.parentNode.insertBefore(a,c);for(var u=function(){return this._q=[],this},p=["add","append","clearAll","prepend","set","setOnce","unset","preInsert","postInsert","remove","getUserProperties"],l=0;l<p.length;l++)n(u,p[l]);r.Identify=u;for(var d=function(){return this._q=[],this},v=["getEventProperties","setProductId","setQuantity","setPrice","setRevenue","setRevenueType","setEventProperties"],f=0;f<v.length;f++)n(d,v[f]);r.Revenue=d;var m=["getDeviceId","setDeviceId","getSessionId","setSessionId","getUserId","setUserId","setOptOut","setTransport","reset"],y=["init","add","remove","track","logEvent","identify","groupIdentify","setGroup","revenue","flush"];i(r),r.createInstance=function(){var e=r._iq.push({_q:[]})-1;return i(r._iq[e]),r._iq[e]},e.amplitude=r}}(window,document)}();
amplitude.init("YOUR_API_KEY_HERE");
</script>

구성

마케팅 분석 SDK는 웹 기여 및 페이지 뷰 추적을 구성하기 위해 다음과 같은 옵션을 지원합니다.

일괄 처리 동작 구성

고성능 환경을 지원하기 위해 SDK는 이벤트를 일괄 처리로 전송합니다. SDK는 메소드에 track의해 기록된 모든 이벤트를 메모리 대기열에 저장합니다. SDK는 백그라운드에서 이벤트를 일괄적으로 플러시합니다.flushQueueSize 및 flushIntervalMillis을 사용하여 일괄 처리 동작을 사용자 지정할 수 있습니다. 기본적으로 serverUrl은 https://api2.amplitude.com/2/httpapi입니다. 한 번에 대량의 데이터를 전송하려면 useBatch를 true로 설정하여 setServerUrl를 https://api2.amplitude.com/batch의 배치 이벤트 업로드 API로 설정하십시오. 일반 모드와 배치 모드 모두 동일한 이벤트 업로드 임계값과 플러시 시간 간격을 사용합니다.

amplitude.init(API_KEY, OPTIONAL_USER_ID, {
  // Events queued in memory will flush when number of events exceed upload threshold
  // Default value is 30
  flushQueueSize: 50,
  // Events queue will flush every certain milliseconds based on setting
  // Default value is 10000 milliseconds
  flushIntervalMillis: 20000,
  // Using batch mode with batch API endpoint, `https://api2.amplitude.com/batch`
  useBatch: true,
});

EU 데이터 상주

Amplitude의 EU 서버로 데이터를 전송하기 위해 클라이언트를 초기화할 때 서버 영역을 구성하십시오. SDK는 사용자가 서버 영역을 설정한 경우 이를 기반으로 데이터를 전송합니다.

amplitude.init(API_KEY, OPTIONAL_USER_ID, {
  serverZone: "EU",
});

마케팅 어트리뷰션

Amplitude는 마케팅 기여를 추적하여 UTM, 리퍼러, 클릭 ID 매개변수를 사용하여 사용자의 트래픽 소스를 식별합니다.

UTM 매개 변수

UTM(Urchin Traffic 모니터링) 매개 변수는 다양한 광고 캠페인과 추천 사이트의 효과를 분석하는 데 도움을 줍니다. UTM 매개변수는 대소문자를 구분하므로 대소문자 표기가 다를 때 Amplitude는 이를 다른 값으로 취급합니다.

다음과 같은 다섯 가지 표준 UTM 매개변수가 있습니다.

다음은 UTM 매개 변수를 사용하는 예제 URL입니다.

https://www.amplitude.com/?utm_source=newsletter&utm_campaign=product_analytics_playbook&utm_medium=email&utm_term=product%20analytics&utm_content=banner-link

참조자 매개 변수

리퍼러는 목적지 페이지로 연결된 페이지의 URL입니다. Amplitude는 다음 매개변수를 추적합니다.

사용자가 목적지 페이지로 직접 이동한 경우 참조자는 빈 문자열('')입니다.

클릭 ID 매개변수

클릭 ID는 URL 쿼리 매개 변수로 포함된 캠페인 식별자. 광고 플랫폼은 이러한 ID를 사용하여 캠페인 및 기타 기여을 식별합니다. Amplitude는 클릭 ID와 관련된 추가 캠페인 속성에 액세스할 수 없지만, 다음 표에 지정된 클릭 ID 값을 추적할 수 있습니다.

퍼스트 터치 어트리뷰션

Amplitude는 첫 번째 세션이 시작될 때 초기 어트리뷰션 데이터를 캡처합니다. Amplitude는 사용자의 어트리뷰션 데이터를 처음 볼 때 첫 접촉 어트리뷰션 값을 설정합니다. Amplitude는 다음 사용자 기여을 한 번만 설정합니다.

• initial_utm_source.
• initial_utm_medium.
• initial_utm_campaign.
• initial_utm_term.
• initial_utm_content.
• initial_referrer.
• initial_referring_domain.
• initial_gclid.
• initial_fbclid.
• initial_dclid.
• initial_gbraid.
• initial_ko_click_id.
• initial_msclkid.
• initial_ttclid.
• initial_twclid.
• initial_wbraid.
• initial_li_fat_id.
• initial_rdt_cid.

멀티 터치 기여 분석

Amplitude는 각 세션이 시작될 때 어트리뷰션 데이터를 캡처하고 해당 값을 사용자 속성으로 설정합니다. 자연 또는 직접 트래픽의 경우 이러한 기여을 사용할 수 없을 수도 있습니다. 이 경우 Amplitude는 사용자 ID에서 이러한 사용자 기여을 설정해제합니다.

모든 새로운 캠페인에 대해(Amplitude가 새로운 어트리뷰션 데이터를 보게 될 때), Amplitude는 사용자 세션의 상태에 관계없이 변화를 캡처합니다. 모든 새로운 캠페인에서 세션을 재설정하도록 resetSessionOnNewCampaign을 true로 구성하십시오. 기본 동작은 새 캠페인에서 세션을 재설정하지 않습니다.

Amplitude는 다음 사항을 사용자 기여으로 추적합니다.

• utm_source.
• utm_medium.
• utm_campaign.
• utm_term.
• utm_content.
• referrer.
• referring_domain.
• gclid.
• fbclid.
• dclid.
• gbraid.
• ko_click_id.
• msclkid.
• ttclid.
• twclid.
• wbraid.
• li_fat_id.
• rdt_cid.

처음에 페이지를 직접 또는 자연 검색을 통해 방문한 사용자의 경우, 초기 값은 기본적으로 "EMPTY"이 됩니다. 다른 초기값을 사용하려면 attribution.initialEmptyValue를 임의의 문자열 값으로 설정하십시오.

amplitude.init(API_KEY, OPTIONAL_USER_ID, {
  attribution: {
    initialEmptyValue: "none",
  },
});

특정 도메인에서 추천자를 제외합니다

지정된 추천자 목록에 대한 어트리뷰션 데이터 수집을 거부하도록 Amplitude를 구성하십시오.

amplitude.init(API_KEY, OPTIONAL_USER_ID, {
  attribution: {
    excludeReferrers: ["www.test.com"],
  },
});

새 캠페인에서 세션 재설정

전체 캠페인 매개 변수가 변경될 경우 attribution.resetSessionOnNewCampaign로true 설정하여 새 세션을 시작하도록 Amplitude를 구성합니다. 기본적으로 attribution.resetSessionOnNewCampaign은 false 입니다.

amplitude.init(API_KEY, OPTIONAL_USER_ID, {
  attribution: {
    resetSessionOnNewCampaign: true,
  },
});

어트리뷰션 추적 비활성화

attribution.disabled을 true로 설정하여 자동 어트리뷰션 데이터 수집을 거부하도록 Amplitude를 구성합니다. 기본적으로 attribution.disabled은 false 입니다.

amplitude.init(API_KEY, OPTIONAL_USER_ID, {
  attribution: {
    disabled: true,
  },
});

페이지 보기

pageViewTracking을 true로 설정하여 페이지 보기 추적을 활성화합니다. SDK는 페이지가 로드될 때 페이지 보기 이벤트를 발생시킵니다.

amplitude.init(API_KEY, OPTIONAL_USER_ID, {
  pageViewTracking: true,
});

더 많은 옵션을 전달하려면 pageViewTracking을 객체로 설정하십시오.

기여이 변경될 때 페이지 보기 이벤트를 추적하십시오

기여 정보가 변경될 때만 페이지 보기 이벤트를 전송하도록 trackOn옵션을 'attribution'으로 설정하십시오.

amplitude.init(API_KEY, OPTIONAL_USER_ID, {
  pageViewTracking: {
    trackOn: "attribution",
  },
});

특정 기준에 따라 페이지 보기 이벤트를 추적하십시오.

또한 trackOn를 함수 콜백으로 설정하여 SDK가 페이지 보기 이벤트를 전송할 때 이를 완전히 사용자 지정할 수도 있습니다.

amplitude.init(API_KEY, OPTIONAL_USER_ID, {
  pageViewTracking: {
    trackOn: () => {
      return window.location.pathname === "/landing_page";
    },
  },
});

단일 페이지 앱 페이지 뷰 추적

react-router와 같은 기록 기반 라우터를 사용하는 단일 페이지 앱을 사용하는 경우 사용자가 페이지 대상 구간을 탐색할 때 페이지 보기 이벤트를 전송하도록 trackHistoryChanges을 활성화하십시오. 다음 trackHistoryChanges에 대한 가능한 값:

경로 변경 사항만 추적하려면 trackHistoryChanges를 pathOnly로 설정하십시오. 기본적으로 SDK는 페이지 보기 변경 사항을 확인할 때 전체 페이지 URL을 고려합니다.

amplitude.init(API_KEY, OPTIONAL_USER_ID, {
  pageViewTracking: {
    trackHistoryChanges: "pathOnly", // or 'all'
  },
});

SDK는 페이지 보기 이벤트에서 다음 정보를 추적합니다.

Ampli와 함께 마케팅 분석 SDK 사용

마케팅 분석 SDK의 인스턴스를 ampli.load()에 전달하여 이 SDK와 함께 Ampli를 사용하십시오.

1. 마케팅 분석 브라우저 SDK를 프로젝트에 추가합니다.
2. SDK의 인스턴스를 생성합니다.
3. 인스턴스를 ampli.load()에 전달합니다.

이 예제에서는 "Amplitude" 인스턴스를 ampli.load에 전달합니다.

amplitude.init(REACT_APP_AMPLITUDE_API_KEY, undefined, {
  ...DefaultConfiguration,
  logLevel: 3,
});
ampli.load({
  client: {
    instance: amplitude,
  },
});