Adobe Analytics 추가

확장 구성: 코어 AppMeasurement.js 라이브러리 설정을 관리하고 글로벌 변수를 설정할 수 있음

규칙 작업: 다음을 수행합니다.

1. 변수 설정
2. 변수 지우기
3. Analytics 비콘 보내기

확장 > 카탈로그(으)로 이동

Adobe Analytics 확장을 찾습니다.

설치 클릭

라이브러리 관리 > 보고서 세트에서 각 태그 환경에 사용할 보고서 세트 ID를 입력합니다. 사용자가 Adobe Analytics에 액세스할 수 있는 경우 상자에 입력을 시작하면 모든 보고서 세트의 미리 채워진 목록이 표시됩니다. (이 자습서에서는 모든 환경에 대해 하나의 보고서 세트를 사용할 수 있지만 실제 환경에서는 아래 이미지와 같이 별도의 보고서 세트를 사용합니다.)

일반 > 추적 서버에서 추적 서버(예: tmd.sc.omtrdc.net)를 입력하십시오. 사이트가 https://를 지원하는 경우 SSL 추적 서버를 입력합니다.

전역 변수 섹션의 추가 설정에서 Page Name 데이터 요소를 사용하여 페이지 이름 변수를 설정합니다. 아이콘을 클릭하여 모달을 열고 페이지 Page Name 데이터 요소를 선택합니다.

라이브러리에 저장 클릭

왼쪽 탐색에서 규칙 섹션으로 이동한 다음 규칙 추가 ​를 클릭합니다

규칙 이름을 지정합니다 All Pages - DOM Ready

이벤트 > 추가 ​를 클릭하여 Event Configuration 화면을 엽니다.

이벤트 유형 > DOM 준비 ​를 선택합니다(규칙 순서는 "50").

변경 내용 유지 클릭

Actions 아래에 있는 을 클릭하여 새 작업을 추가합니다.

확장 > Adobe Analytics 선택

Action Type > Send Beacon 선택

추적을 s.t()로 설정된 대로 둡니다. 클릭 이벤트 규칙에서 s.tl()을 호출하려는 경우 비콘 보내기 작업을 사용할 수도 있습니다.

변경 내용 유지 단추를 클릭합니다.

라이브러리 및 빌드에 저장 ​을 클릭합니다.

Chrome 브라우저에서 Luma 사이트를 엽니다.

디버거 아이콘 를 클릭하여 Adobe Experience Cloud Debugger ​를 엽니다.

이전 단원에 설명된 대로 Debugger가 태그 속성을 사용자 개발 환경에 매핑하는지 확인합니다.

클릭하여 Analytics 탭을 엽니다.

보고서 세트 이름을 확장하여 해당 보고서 세트에 수행된 모든 요청을 표시합니다.

요청이 페이지 이름 변수 및 값으로 실행되었는지 확인합니다

왼쪽 탐색에서 데이터 요소 ​를 클릭합니다

데이터 요소 추가 클릭

데이터 요소에 이름을 지정합니다 Page Type

데이터 요소 유형 > JavaScript 변수 선택

digitalData.page.category.type을(를) JavaScript 변수 이름(으)로 사용

텍스트 정리 및 소문자 강제 적용 옵션을 확인하십시오.

라이브러리에 저장 클릭

왼쪽 탐색에서 데이터 요소 ​를 클릭합니다

데이터 요소 추가 클릭

데이터 요소에 이름을 지정합니다 Product Id

데이터 요소 유형 > JavaScript 변수 선택

digitalData.product.0.productInfo.sku을(를) JavaScript 변수 이름(으)로 사용

텍스트 정리 및 소문자 강제 적용 옵션을 확인하십시오.

라이브러리에 저장 클릭

Extensions > Catalog 페이지로 이동합니다.

Adobe Consulting 서비스에서 Adobe Analytics Product String 확장을 찾아 설치 ​를 클릭합니다.

잠시 지침을 읽어 보십시오

라이브러리에 저장 클릭

왼쪽 탐색에서 규칙 섹션으로 이동한 다음 규칙 추가 ​를 클릭합니다

규칙 이름을 지정합니다 Product Details - DOM Ready - 40

이벤트 > 추가 ​를 클릭하여 Event Configuration 화면을 엽니다.

이벤트 유형 > DOM 준비 선택

Order ​을(를) 40으로 설정하여 Analytics > 비콘 보내기 작업이 포함된 규칙을 이전 ​에 실행하도록 합니다.

변경 내용 유지 클릭

조건 ​에서 하여 Condition Configuration 화면을 엽니다.

1. 조건 유형 > 값 비교 ​를 선택합니다.

2. 데이터 요소 선택기를 사용하여 첫 번째 필드에서 Page Type을 선택합니다.

3. 비교 연산자 드롭다운에서 포함 선택

4. 다음 필드에서 product-page(PDP의 데이터 레이어에서 가져온 페이지 유형 값의 고유한 부분임)를 입력합니다.

5. 변경 내용 유지 클릭

   

Actions 아래에 있는 을 클릭하여 새 작업을 추가합니다.

확장 > Adobe Analytics 제품 문자열 선택

작업 유형 > s.products 설정 선택

Analytics 전자 상거래 이벤트 섹션에서 prodView ​를 선택합니다.

제품 데이터에 대한 데이터 계층 변수 섹션에서 데이터 요소 선택기를 사용하여 Product Id 데이터 요소를 선택합니다

변경 내용 유지 클릭

Actions 아래에 있는 을 클릭하여 새 작업을 추가합니다.

확장 > Adobe Analytics 선택

작업 유형 > 변수 설정 선택

eVar1 > 다음으로 설정 ​을(를) 선택하고 product detail page을(를) 입력하십시오.

event1 ​을(를) 설정하고, 선택적 값을 비워둡니다.

이벤트 아래에서 다른 항목 추가 단추를 클릭합니다.

prodView 이벤트를 설정하고, 선택적 값을 비워둡니다.

변경 내용 유지 클릭

라이브러리 및 빌드에 저장 ​을 클릭합니다.

Chrome 브라우저에서 Luma 사이트를 엽니다.

제품 세부 사항 페이지로 이동합니다

디버거 아이콘 를 클릭하여 Adobe Experience Cloud Debugger ​를 엽니다.

Analytics 탭을 클릭하여 엽니다.

보고서 세트를 확장합니다.

이제 디버거에 있는 제품 세부 사항 변수를 확인합니다. 즉 eVar1이 "product detail page"로 설정되었고, Events 변수가 "event1" 및 "prodView"로 설정되었고, 제품 변수가 사용자가 보고 있는 제품의 제품 ID로 설정되었고, 페이지 이름을 아직 Analytics 확장에서 설정하는지 확인합니다.

왼쪽 탐색에서 규칙 섹션으로 이동한 다음 규칙 추가 ​를 클릭합니다

규칙 이름을 지정합니다 Homepage - Featured Products enters Viewport

이벤트 > 추가 ​를 클릭하여 Event Configuration 화면을 엽니다.

이벤트 유형 > 뷰포트 입력 ​을 선택합니다. 이렇게 하면 CSS 선택기를 입력해야 하는 필드가 표시됩니다. 이 선택기는 페이지에서 규칙이 브라우저에서 뷰에 들어올 때 규칙을 트리거해야 하는 항목을 식별합니다.

Luma의 홈 페이지로 돌아가 추천 제품 섹션으로 스크롤합니다.

"주요 제품" 제목과 이 섹션의 항목 사이에 있는 공백을 마우스 오른쪽 단추로 클릭하고 마우스 오른쪽 단추 클릭 메뉴에서 Inspect을(를) 선택합니다. 이렇게 하면 원하는 내용에 가까워집니다.

바로 그 주변(선택한 섹션 바로 아래일 수 있음)에서 class="we-productgrid aem-GridColumn aem-GridColumn--default--12"를 사용하는 div가 있을 것입니다. 이 요소를 찾습니다.

이 요소를 마우스 오른쪽 단추로 클릭하고 복사 > 복사 선택기 ​를 선택합니다.

태그로 돌아가서 클립보드의 이 값을 Elements matching the CSS selector 필드에 붙여 넣습니다.

1. 참고로, CSS 선택기를 식별하는 방법을 결정하는 것은 여러분에게 달려 있습니다. 페이지의 특정 변경 사항이 이 선택기를 손상시킬 수 있으므로 이 방법은 약간 취약할 수 있습니다. 태그에서 CSS 선택기를 사용할 때는 이를 고려하십시오.

변경 내용 유지 클릭

Conditions 아래에 있는 을 클릭하여 새 조건을 추가합니다.

조건 유형 > 값 비교 ​를 선택합니다.

데이터 요소 선택기를 사용하여 첫 번째 필드에서 Page Name을 선택합니다.

비교 연산자 드롭다운에서 같음 선택

다음 필드에서 content:luma:us:en(데이터 레이어에서 가져온 홈 페이지의 페이지 이름임. 홈 페이지에서만 이 규칙을 실행하려고 함)을 입력합니다.

변경 내용 유지 클릭

Actions 아래에 있는 을 클릭하여 새 작업을 추가합니다.

확장 > Adobe Analytics 선택

작업 유형 > 변수 설정 선택

eVar3을 Home Page - Featured Products로 설정합니다.

prop3을 Home Page - Featured Products로 설정합니다.

Events 변수를 event3으로 설정합니다.

변경 내용 유지 클릭

Actions 아래에 있는 을 클릭하여 다른 새 작업을 추가합니다.

확장 > Adobe Analytics 선택

Action Type > Send Beacon 선택

s.tl() 추적 옵션 선택

링크 이름 필드에 Scrolled down to Featured Products을(를) 입력하십시오. 이 값은 Analytics의 사용자 지정 링크 보고서에 입력됩니다.

변경 내용 유지 클릭

라이브러리 및 빌드에 저장 ​을 클릭합니다.

Chrome 브라우저에서 Luma 사이트를 열고 현재 위치가 홈 페이지의 상단인지 확인합니다.

디버거 아이콘 를 클릭하여 Adobe Experience Cloud 디버거를 엽니다.

Analytics 탭을 클릭하여 엽니다.

보고서 세트의 히트를 확장합니다.

페이지 이름 등이 있는 홈 페이지의 일반 페이지 보기 히트에 주목합니다(하지만 eVar3 또는 prop3에는 아무 것도 없음).

디버거를 연 채로 추천 제품 섹션이 표시될 때까지 사이트에서 아래로 스크롤합니다.

디버거를 다시 봅니다. 그러면 다른 Analytics 히트가 표시됩니다. 이 히트에는 사용자가 설정한 s.tl() 히트와 관련된 매개 변수가 있어야 합니다. 즉, 다음과 같습니다.

1. LinkType = "link_o"(히트가 페이지 보기 히트가 아닌 사용자 지정 링크 히트임을 의미합니다.)

2. LinkName = "Scrolled down to Featured Products"

3. prop3 = "Home Page - Featured Products"

4. eVar3 = "Home Page - Featured Products"

5. Events = "event3"

   

Extensions > Installed(으)로 이동

Adobe Analytics 확장에서 구성 ​을 클릭합니다.

라이브러리 관리 ​에서 Make tracker globally accessible 상자를 선택합니다. 도움말 풍선에서 볼 수 있듯이 이렇게 하면 window.s에서 전체적으로 추적기를 사용할 수 있으며, 이것은 고객 JavaScript에서 추적기를 참조할 때 매우 중요합니다.

아직 Analytics 확장에 있을 때 아래로 스크롤하여 Configure Tracker Using Custom Code.라는 섹션을 확장합니다.

편집기 열기 ​를 클릭합니다

다음 코드를 코드 편집기에 붙여넣습니다.

/* Plugin Config */
s.usePlugins=true
s.doPlugins=function(s) {
/* Add calls to plugins here */
}

다음 단계를 위해 이 창을 열어 두십시오

다음 코드를 복사합니다.

/* Adobe Consulting Plugin: getValOnce v2.01 */
s.getValOnce=function(vtc,cn,et,ep){if(vtc&&(cn=cn||"s_gvo",et=et||0,ep="m"===ep?6E4:864E5,vtc!==this.c_r(cn))){var e=new Date;e.setTime(e.getTime()+et*ep);this.c_w(cn,vtc,0===et?0:e);return vtc}return""};

Analytics 확장의 코드 창에 붙여 넣습니다(아직 열지 않은 경우 이전 단계에 따라 다시 엽니다.). doPlugins 함수의 완전히 아래 ​에 붙여 넣으십시오(내부가 아님).

다음 코드를 복사합니다.

s.campaign = s.Util.getQueryParam("cid");

doPlugins 함수에 붙여 넣습니다. 이렇게 하면 현재 페이지 URL에서 cid라는 매개 변수를 찾아서 s.campaign 변수에 배치합니다.

이제 다음 코드를 복사하고 getQueryParam 호출 바로 아래에 붙여 넣어 getValOnce 함수를 호출합니다.

s.campaign=s.getValOnce(s.campaign,'s_cmp',30);

이 코드는 30일 동안 한 행에 동일한 값이 두 번 이상 전송되지 않도록 합니다(이 코드를 필요에 맞게 사용자 지정하는 방법은 설명서 참조).

코드 창을 저장합니다

라이브러리 및 빌드에 저장 ​을 클릭합니다.

Chrome 브라우저에서 Luma 사이트를 엽니다.

디버거 아이콘 를 클릭하여 Adobe Experience Cloud Debugger ​를 엽니다.

Analytics 탭을 클릭하여 엽니다.

보고서 세트를 확장합니다.

Analytics 히트에 캠페인 변수가 없다는 점에 주목합니다.

디버거를 연 채로 Luma 사이트로 돌아가서 URL에 ?cid=1234를 추가한 다음, Enter 키를 눌러 포함된 해당 쿼리 문자열로 페이지를 새로 고칩니다.

디버거를 확인하고 캠페인 변수가 1234로 설정된 두 번째 Analytics 요청이 있는지 확인합니다.

다시 돌아가서 URL에 쿼리 문자열을 사용하여 Luma 페이지를 다시 새로 고칩니다.

디버거에서 그 다음 히트를 확인합니다. 그러면 getValOnce 플러그인으로 인해 이 변수가 중복되지 않고 다른 사람이 캠페인 추적 코드를 통해 온 것처럼 보이도록 했으므로 이 캠페인 변수가 없어야 합니다.

보너스: 쿼리 문자열에서 cid 매개 변수의 값을 변경하여 이 작업을 반복해서 테스트할 수 있습니다. Campaign 변수는 값이 있는 페이지를 처음 실행할 때만 있어야 합니다. 디버거에 Campaign 값이 보이지 않는 경우 URL의 쿼리 문자열에서 cid 값을 변경한 다음을 Enter 키를 누릅니다. 그러면 다시 디버거에 표시됩니다.