윅스 (Wix) 코딩 예제 - 추적 및 분석 이벤트 보내기 (Wix Code Tutorial: Sending Tracking and Analytics Events)

윅스 (Wix) 코딩 예제 - 추적 및 분석 이벤트 보내기 (Wix Code Tutorial: Sending Tracking and Analytics Events)

 

 

 

설명)

 

사이트에 추적 코드를 추가하면 사용자가 사이트와 상호 작용하는 방식을 모니터링할 수 있습니다. 추적 데이터를 수집하면 온라인 행동에 대한 통찰력을 얻고 온라인 마케팅 전략을 최적화할 수 있습니다.

 

이 글에서는 페이지 코드에서 추적 이벤트를 보내는 방법을 보여줍니다. 먼저 분석 도구에 사이트를 연결합니다. 그런 다음 간단한 페이지를 설정합니다. 마지막으로 사용자가 특정 상호 작용을 수행할 때 추적 이벤트가 전송되도록 코드를 추가합니다.

 

추적 및 분석 도구 (Tracking & Analytics Tools)

먼저 원하는 추적 및 분석 도구를 사이트에 연결합니다. 현재 구글(Google) 애널리틱스 및 페이스북 픽셀(Facebook Pixel)에 코드를 통해 이벤트를 보낼 수 있습니다. 추적 및 분석 도구를 사이트에 연결하는 방법에 대해 알아보려면 추적 도구 및 분석 정보를 참조합니다.

 

 

노트 :

추적 및 분석을 사용하려면 외부 분석 도구에 대한 계정이 있어야하며 프리미엄 사이트에서만 작동해야합니다.

 

 

이 예제에서는 사이트를 구글(Google) 웹 로그 분석에 연결했습니다.

 

 

 

페이지 설정하기 (Page Setup)

평상시대로 페이지를 설정합니다. 그러나 추적 이벤트를 보내려는 시기를 결정해야합니다.

 

이 예제에서는 사용자가 버튼를 클릭하여 문서를 다운로드할 때 이벤트를 보냅니다. 우리 페이지에는 컬렉션에 저장된 문서 목록을 표시하는 반복 레이아웃이 있습니다. 다운로드 버튼 중 하나를 클릭하면 다운로드한 문서의 이름이 포함된 사용자 지정 문서 다운로드 이벤트가 전송됩니다.

 

 

 

 

페이지에는 다음 요소들이 있습니다.

 

유형(Type)	ID	사용(Usage)
텍스트(Text)	docTitle	문서 제목 표시
버튼(Button)	downloadButton	문서 다운로드
레이아웃(Repeater)	docRepeater	각 문서의 제목과 다운로드 버튼 표시
데이터세트(Dataset)	docDataset	문서 데이터가 저장되어 있는 컬렉션에 요소 연결하기

 

반복 레이아웃, 버튼 및 텍스트 요소는 데이터세트에 연결되어 각 문서의 제목과 문서를 다운로드하는 버튼이 표시됩니다.

 

 

 

추적 코드 (Tracking Code)

필요에 따라 추적 이벤트를 전송하는 코드를 추가할 수 있습니다. 대부분의 경우 버튼 클릭과 같은 사용자 상호 작용에 응답하는 이벤트 핸들러에이를 추가합니다.

 

이 예제에서는 사용자가 다운로드 버튼을 클릭할 때마다 추적하려고 합니다. 따라서 다운로드 버튼에 연결된 이벤트 핸들러에 추적 코드를 추가합니다.

먼저 wixWindow를 페이지 코드의 맨 위에 가져옵니다.

 

import wixWindow from 'wix-window';

 

 

그런 다음 다운로드 핸들러를 다운로드 버튼의 click 이벤트에 연결합니다.

 

export function downloadButton_click(event) {
  //Add your code for this event here: 
}

 

 

 

마지막으로 trackEvent () 함수를 호출합니다. 여기서 다운로드가 발생했음을 나타내는 사용자 지정 이벤트를 보냅니다. 또한 다운로드된 문서의 제목을 가져와서 이벤트에 추가합니다.

 

구글(Google) 애널리틱스에 맞춤 이벤트를 보낼 때 다음 매개 변수를 사용합니다.

 

 

키 (Key)	값 유형(Value Type)	필수(Required)	사용 (Usage)
eventCategory	string	yes	상호 작용된 객체 (Object that was interacted with)
eventAction	string	yes	상호 작용 유형 (Type of interaction)
eventLabel	string	no	이벤트 카테고리 (Event category)
eventValue	integer	no	이벤트와 연관된 숫자 값 (Numeric value associated with the event)

 

 

wixWindow.trackEvent("CustomEvent", {
  "event": "Document Download",
  "eventCategory": "Downloads",
  "eventAction": "Download",
  "eventLabel": $w('#docDataset').getCurrentItem().title
} );

 

 

 

이 코드를 모두 모으면 코드는 다음과 같습니다.

 

import wixWindow from 'wix-window';

export function downloadButton_click(event) {
  wixWindow.trackEvent("CustomEvent", {
    "event": "Document Download",
    "eventCategory": "Downloads",
    "eventAction": "Download",
    "eventLabel": $w('#dataset1').getCurrentItem().title
  } );
}

 

 

 

 

 

사용자가 다운로드 버튼을 클릭하면 구글(Google) 애널리틱스 도구에 등록된 일정이 표시됩니다.

 

 

 

더 알아보기 (Learn More)

전송할 수 있는 이벤트 유형 및 해당 매개 변수에 대한 자세한 내용은 API 참조의 trackEvent( )를 참조합니다.

 

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

https://support.wix.com/en/article/wix-code-tutorial-sending-tracking-and-analytics-events