GA4 전자상거래 세팅 'view_tiem' 세팅 해보자!

안녕하세요. 다르게 회석입니다.
오늘은 GA4 전자상거래 세팅을 해볼 예정입니다.
GA4 전자상거래는
상품 상세 보기 view_item
장바구니 담기 add_to_cart
주문하기 begin_checkout
주문 완료 purchase
이 4개의 태그만 하면됩니다.
이번 영상은 view_item 입니다.
블로그에 글로도 올려둘게요!

[@user-mv1zs1dz2z]

웹사이트에 장바구니가 없는 경우에는 생략해도 괜찮은가요?

[@yadoctv]

사용자정의변수 > 새로만들기 > 자바스크립트변수 > 전역변수이름에 {{iid추출}} {{카테고리명추출}} {{값추출}} 이 세가지 정의변수를 모두 넣으신건가요?

[@twist_think]

요 댓글에 질문 주신 내용은 이해가 안됩니다. 조금 더 자세히 설명 주시면 답변 드릴게요!

[@yadoctv]

동영상 29:42초 부근 ecom -1-view_item-tag 세팅하실때 측정ID, 이벤트이름, 이벤트 매개변수까지는 알겠는데 미리 만드신 {{ecom-0-items}} 값은 뭔가요? 사용자정의변수로 만드신듯한데...

[@twist_think]

{{ecom-0-items}} 는 초기에 만들어둔 변수이구요. ecommerce.items 의 값을 담는 태그 입니다. window.dataLayer = window.dataLayer || []; dataLayer.push({ "event": "view_item", "ecommerce": { "items": [{ "item_id": {{ecom - 1 - view_item - item_id}}, "item_name": {{ecom - 1 - view_item - item_name}}, "price": {{ecom - 1 - view_item - price}} }], "currency": "KRW" } }); 이 태그가 view_item tag 인데요. 여기서 ecommerce 안에 있는 items 의 값들을 담는 다는 것을 의미합니다.

[@user-dg3ye3tu7g]

영상 잘봤습니다! 한가지 궁금한게 있는데 30:33에서 이벤트 매개변수쪽 items 후 값은 저렇게 하면된다고 하셨는데 저 변수는 따로 설정하신건가요? 이 영상에 해당 내용이 없어서요!!

[@twist_think]

헉.. 기본 변수 미리 해둬야하는데 제가 깜박 했네요. kzbin.info/www/bejne/epC2nZxofrOinJI 영상으로 만들었습니다. ecommerce.currency ecommerce.items ecommerce.shipping ecommerce.tax ecommerce.transaction_id ecommerce.value 요 6가지는 필수로 만드셔야합니다. 영상으로 잘 만들어놨습니다! 그리고 댓글을 지우신거 같은데 미리보기로 보이더라구요. 현재 어려움에 처하신게 홈페이지에서 주소/product/한글상품명/category/30/display/2 에서 30이라는 제품 id 를 담으시려는거 잖아요? function() { var path = window.location.pathname; var matches = path.match(/category\/(\d+)/); return matches ? matches[1] : undefined; } 이렇게 만들면 URL 경로에서 "category/" 다음에 오는 숫자 (예: 30) 을 수집 할 수 있습니다. ID 수집 할 수 있어요!

[@user-dg3ye3tu7g]

@@twist_think 친절한 답변 너무 감사합니다..내용참고해서 한번 더 도전해보고 막히는 부분 있으면 댓글 남길게요..제가 아직 좀 덜 알아본거같아서 댓글을 지웠던거였는데..신경써주셔서 감사합니다!!

[@user-dg3ye3tu7g]

@@twist_think 추가적으로 주소가 /product/한글상품명/category/30/display/2가 아니라 /product/한글상품명/28/category/30/display/2 이렇게 item_id가 /category 앞에 있었네요 ㅜㅜ 우선 제가 전체적으로 기본 변수 세팅이랑 다 진행해보고 새로 해보겠습니다!! 늦은 시간 감사합니다!!

[@twist_think]

function() { var path = window.location.pathname; var matches = path.match(/product\/[^\/]+\/(\d+)/); return matches ? matches[1] : undefined; } 정규식으로 이렇게 하시면될거같아요. URL에서 "/product/한글상품명/" 다음에 오는 숫자 값 가져오는거에요

[@ty-lv1rv]

선생님! 좋은 강의 너무 감사합니다! 한가지 궁금한 것이 있어서 여쭈어 봅니다. 데이터 레이어의 경우 강의에서처럼 GTM에서 태그로 설정하는 방법이 있고 아니면 개발자에게 페이지에 심어달라고 요청할 수도 있는 거죠? 만약 개발자에게 요청한다면 view_item 을 실행하기 위한 태그는 GTM 에서 하나만 설정을 하면되는 것인지 문의 드립니다 / 만약 개발자에게 요청한다면 items 안의 변수 값은 GTM 에서 설정한 변수값으로 지정하여 전달을 해야하는 걸까요? 시간되실 때 답변 해주신다면 너무 감사하겠습니다

[@twist_think]

안녕하세요! 만약에 개발자에게 페이지에 심어달라고 요청을 한다면 개발자가 데이터레이어 함수를 심어주게 되고 데이터레이어 함수를 페이지내에 심으면서 변수들은 개발자가 처리 할거에요~! 그러니 저희는 view_item 을 실행하기 위한 태그 하나만 설정을 하면 정상 작동을 할거에요! (가끔 개발자들이 view_item 실행 태그도 설정을 바로 하는 경우도 있습니다. 이건 논의 한번 하셔야합니다.)

[@ty-lv1rv]

@@twist_think바쁘실텐데 친절한 답변 감사합니다!

[@user-touyube]

안녕하세요! 섬세하게 알려주신 덕분에 잘 배우고 있습니다. 영상을 보던 중 잘모르겠는 부분이 있어 문의드립니다. 가격 태그 세팅하는 과정중에 2번째 줄에 'sit_tot_price'라고 기재하신 부분이 있는데요. 아무리 돌려봐도 사이트상에 기재한 id값이 안보이네요ㅜ 어디서 가져온 id값인지 모르겠기도하고, 저희 사이트와 조금 다른 부분이 있어서요~ 아래는 제 사이트 내 해당 부분 소스이구요. 판매가 10,000원 저희는 가격부분에 strong > id값이 지정되어있는데 이걸 활용해서 아래처럼 작성하면 될까요? function extractPrice() { var element = document.getElementById('span_product_price_text'); if (element) { var priceText = element.textContent; // 콤마를 제거하고 숫자로 변환합니다. return parseInt(priceText.replace(/,/g, ''), 10); } return null; // 요소가 없을 때 null 반환 } 주말 잘 마무리하시고, 확인되시면 답변 부탁드립니다.

[@twist_think]

function() { // "span_product_price_text" ID를 가진 요소에서 가격 텍스트를 가져옵니다. var priceText = document.getElementById('span_product_price_text').innerText; // 쉼표를 제거하여 숫자만 남기고, 문자열을 숫자로 변환합니다. var priceNumber = parseInt(priceText.replace(/,/g, ''), 10); // 변환된 숫자를 반환합니다. return priceNumber; } 이렇게 해보셔요~!

[@user-touyube]

와오 빠른답변 감사합니다. 전혀 달랐네요^^;; 친절히 설명까지 덧붙여주셔서 감사해요!! @@twist_think

[@user-touyube]

​@@twist_think 알려주신 gtm 확인 방법으로 정상작동하는지 확인했는데, 아이템네임이 undefined로 노출이 안되서 재문의드립니다. 사이트 내에 이름 부분 태그이구요. 홀리 class는 다르게 쓰는것 같아서 아래처럼 해봤는데 추출이 안되네요 제가 쓴 소스가 틀린건지.. 제눈에만 오타가 안보이는지..ㅜ 살펴봐주실 수 있을까요? function getTextFromSitTitle() { var element = document.getElementsById('item_name'); if (element) { return element.textContent || element.innerText; } return null; // 요소가 없거나 텍스트를 가져올 수 없을 때 null 반환 }

[@twist_think]

@@user-touyube function() { // "item_name" 클래스를 가진 요소를 찾습니다. var element = document.querySelector('.item_name'); if (element) { // 요소가 존재하면, 그 텍스트 내용을 반환합니다. return element.textContent.trim(); } return null; // 요소가 없을 경우 null을 반환합니다. } 이렇게 하셔야해요. 지금 코드 만드시는거보면 function getTextFromSitTitle() { 이렇게 시작하잖아요. 이건 function(함수) 가 getTextFromSitTitle 이 호출되야지만 변수에 담는 코드입니다. 즉, getTextFromSitTitle 호출이 안되면 코드가 작동을 안해서 변수에 값이 안담겨요! function (){ 이렇게 시작하면 어떤 호출 없이도 코드가 작동을 하기 때문에 페이지가 열리면 코드가 작동되어 변수를 담게 되어 있습니다~!

[@user-touyube]

엇 그러면 선생님이 쓰신 getTextFromSitTitle() 이거는 어디서 호출해오는건가요? 선생님 코드도 function (){ 이렇게만써서도 불러올 수 있는건가요? @@twist_think