Webflow 사이트에 Meta 픽셀을 삽입하세요

Meta Pixel을 사용하면 웹사이트 방문자의 활동을 모니터링할 수 있습니다. 추적된 전환은 Meta 이벤트 관리자에 표시되며 전환 퍼널의 효율성을 평가하고 동적 광고 캠페인에 대한 맞춤 잠재고객을 식별하는 데 활용할 수 있습니다.

시작하기 전에: Meta 픽셀 구성 및 배포에 대한 Meta의 지침을 검토하세요.

이 튜토리얼에서는 다음 주제를 다룹니다.

1. 웹사이트에 Meta 픽셀 구현
2. 쿠키 승인 지연 구현
3. Pixel 쿠키 승인 배너 만들기
4. 전자상거래 이벤트 활성화
5. 고급 이벤트 추적 구성

사이트에 Meta 픽셀을 구현하는 단계

필수적인: 이전에 사용자 정의 코드를 사용하여 웹사이트에 Meta 픽셀을 통합한 경우, Meta 픽셀 ID를 추가하기 전에 사용자 정의 코드를 제거하십시오.

사이트에 Meta 픽셀을 삽입하려면:

1. 입장 사이트 설정 > 앱 및 통합 탭 > Meta 픽셀
2. Meta 픽셀 ID를 붙여넣으세요.

전자상거래 이벤트 활성화

웹사이트에서 전자상거래를 활성화하면 Webflow는 자동으로 후속 이벤트를 Meta 이벤트 관리자에 전달합니다.

• 본 제품
• 장바구니에 제품을 추가했습니다.
• 구매한 제품

이러한 이벤트를 통해 Meta 및 Instagram의 광고 캠페인을 능숙하게 측정하고 개선할 수 있습니다.

더 알아보기:

• Instagram 쇼핑 설정
• 제품 동기화 중
• 귀하의 제품에 대한 Meta Advantage+ 카탈로그 광고 구성

쿠키 승인 지연을 구현하는 단계

귀하의 웹사이트가 EU 거주자로부터 개인 데이터를 수집하는 경우 GDPR 규정을 준수하는 것이 필수적입니다. "쿠키 동의 지연" 옵션을 다음으로 전환하여 웹사이트 방문자가 쿠키 동의를 수락할 때까지 픽셀 로드를 연기할 수 있습니다. 예.

이 설정을 활성화하면 쿠키 동의 배너를 사용하여 사이트에서 쿠키 동의도 요청해야 합니다.

Pixel 쿠키 승인 배너를 만드는 방법

중요한: 이 가이드에서는 Webflow의 포함 요소를 활용하여 사용자 정의 코드를 포함합니다. 삽입 요소는 모든 유료 사이트 플랜과 Core, Growth, Agency 및 Freelancer Workspace 플랜에서 액세스할 수 있습니다.

다음 단계에 따라 Pixel 쿠키 승인 배너를 설정할 수 있습니다.

1. 배너를 고안하세요
2. 상호 작용 설정
3. 사용자 정의 코드 삽입

배너를 고안하세요

1. 쿠키 동의 알림 메시지를 포함하여 귀하의 기본 설정에 따라 배너를 디자인하고 제작하십시오.
2. 할당 ID 배너에 추가(예: 동의 팝업)
3. '픽셀 쿠키 허용' 버튼 통합
4. 할당 수업 당신의 버튼에
5. 제공 ID 버튼에 추가(예: 동의Btn)
6. '픽셀 쿠키 거부' 또는 '닫기' 버튼 추가
7. “수락” 버튼과 동일한 클래스를 “거부” 버튼에 할당
8. (선택사항) 방문자를 개인정보취급방침 페이지로 안내하는 '자세히 알아보기' 링크를 포함하세요.
9. 배너를 안에 삽입하세요. div 블록 팝업 컨테이너로 작동하려면
10. 에 수업을 할당하세요. div 블록 (예: popupWrapper)
11. 팝업 컨테이너 구성 위치 ~처럼 결정된
12. 사전 설정 위치를 선택하거나 팝업 컨테이너의 위치를 수동으로 조정하세요.
13. 팝업 컨테이너를 컴포넌트로 지정
14. 웹사이트의 모든 페이지에 이 구성요소를 추가하세요.

상호 작용 설정

방문자가 Pixel 쿠키를 수락하면 쿠키 동의 배너를 숨기는 상호작용을 설정하는 것부터 시작하세요.

1. 화면에서 '픽셀 쿠키 허용' 버튼을 선택하세요.
2. 로 이동 상호 작용 패널 > 요소 트리거
3. “를 클릭하세요....을 더한” 아이콘을 사용하여 새 요소 트리거를 생성합니다.
4. 선택하다 마우스 클릭(탭)
5. 입장 트리거 설정 그리고 선택 수업
6. 선택하다 첫 번째 클릭 시 그리고 선택 작업을 선택하세요
7. 선택하다 애니메이션 시작
8. “를 클릭하세요....을 더한” 아이콘을 사용하여 맞춤형 애니메이션을 만들 수 있습니다.
9. 맞춤 애니메이션 이름을 지정하세요(예: '쿠키 팝업 닫기').
10. 화면에서 팝업 컨테이너를 선택하세요.
11. “를 클릭하세요....을 더한” 아이콘 옆에 행위 애니메이션에 액션을 추가하려면
12. 세트 영향을 미치다 에게 수업
13. 조정하다 이동하다 그리고 설정 y축 에게 100%
14. 설정 확인

다음으로 방문자가 Pixel 쿠키를 거부하는 경우 쿠키 동의 배너를 숨기는 유사한 상호작용을 만듭니다.

1. 화면에서 “거부” 버튼을 선택하세요.
2. “를 클릭하세요....을 더한” 아이콘을 사용하여 새 요소 트리거를 생성합니다.
3. 선택하다 마우스 클릭(탭)
4. 입장 트리거 설정 그리고 선택 수업
5. 선택하다 첫 번째 클릭 시 그리고 선택 작업을 선택하세요
6. 선택하다 애니메이션 시작
7. '쿠키 팝업 닫기' 맞춤 애니메이션을 선택하세요.

그런 다음 페이지가 로드될 때 쿠키 동의 배너를 표시하도록 상호 작용을 설정합니다.

1. 입장 상호 작용 패널 > 페이지 트리거
2. “를 클릭하세요....을 더한” 아이콘을 클릭하여 새 페이지 트리거를 생성하세요.
3. 선택하다 페이지 로드
4. 입장 페이지 로딩이 시작될 때 그리고 클릭 작업을 선택하세요
5. 선택하다 애니메이션 시작
6. “를 클릭하세요....을 더한” 아이콘을 사용하여 맞춤형 애니메이션을 만들 수 있습니다.
7. 맞춤 애니메이션 이름을 지정하세요(예: '쿠키 팝업 표시').
8. 화면에서 팝업 컨테이너를 선택하세요.
9. “를 클릭하세요....을 더한옆에 있는 ” 아이콘 행위 애니메이션에 액션을 추가하려면
10. 조정하다 이동하다 그리고 설정 y축 에게 100%
11. 확인하다 초기 상태로 설정
12. “를 클릭하세요....을 더한옆에 있는 ” 아이콘 행위
13. 조정하다 이동하다 y축을 다음으로 설정합니다. 0%
14. 설정 확인

마지막으로 사이트의 모든 페이지에 쿠키 동의 배너가 로드되었는지 확인하세요.

1. 사이트의 다른 페이지에 액세스
2. 이동 상호 작용 패널 > 페이지 트리거
3. “를 클릭하세요....을 더한” 아이콘을 클릭하여 새 페이지 트리거를 생성하세요.
4. 선택하다 페이지 로드
5. 입장 페이지 로딩이 시작될 때 그리고 클릭 작업을 선택하세요
6. 선택하다 애니메이션 시작
7. '쿠키 팝업 표시' 맞춤 애니메이션을 선택하세요.
8. 사이트의 모든 페이지에 대해 위 단계를 반복하세요.

중요한: 애니메이션에 작업을 추가할 때 팝업 컨테이너를 선택해야 합니다. 배너 자체에 작업을 직접 적용하면 사용자 정의 코드의 기능이 저하될 수 있습니다.

사용자 정의 코드 삽입

쿠키 동의 배너를 운영하려면 다음으로 이동하세요. 사이트 설정 > 맞춤 코드 탭 > 바닥글 코드 제공된 코드를 삽입하세요.

    <script type="text/javascript">
  var popup = document.getElementById('consentPopup');  
  var alreadyLoaded = window.localStorage.getItem('fbGrantConsent') === 'true';
  //Show the consent banner if consent ispreviously approved.  
  if (previouslyLoaded) {    
  popup.style.display = 'none';    
  fbq('agreement', 'accept');  
  } else {    
  popup.style.display = 'block';  
  }
  
  //Accept agreement and save it in localStorage of the browser  
  var acceptButton = document.getElementById('acceptButton');  
  acceptButton.addEventListener("click", function() {  
  fbq('agreement', 'accept');    
  window.localStorage.setItem('fbAcceptAgreement', 'true');  
  });
</script>
    

중대한: '쿠키 허용' 버튼과 팝업에 고유한 ID가 사용된 경우, 앞서 언급한 코드의 ID를 사용한 ID로 대체하세요. 교환 "계약팝업”를 배너에 구성한 ID로 변경하세요. 바꾸다 "수락버튼”를 “쿠키 허용” 버튼에 설정한 ID로 변경합니다.

추가 참조: 

• Meta의 1TP32쿠키 계약에 대한 조정
• 유럽연합 집행위원회의 쿠키 허용 규정

고급 이벤트 모니터링을 설정하는 방법

최첨단 Pixel 이벤트 모니터링에 대한 통찰력을 얻으려면 Meta의 이벤트 매뉴얼을 참조하세요. 정교한 Meta 픽셀 활용 인스턴스에 대한 예제 코드를 검토하고 모니터링하려는 이벤트에 대한 코드를 수정할 수도 있습니다.

모니터링하려는 이벤트에 적합한 코드가 준비되면 이러한 이벤트를 사이트에 있는 하나 이상의 페이지에 대한 태그입니다. 

링크 또는 버튼 클릭을 모니터링하려는 경우 디자이너에서 해당 요소에 고유한 ID를 정의해야 합니다. 그런 다음 소스 코드를 코드 편집기에 삽입하세요(예: 숭고한 텍스트 또는 비주얼 스튜디오 코드) 삽입 코드의 ID를 버튼이나 링크에 할당한 ID로 바꿉니다. 마지막으로 다음으로 이동합니다. 페이지 패널 > 페이지 설정 > 맞춤 코드 후속 스크립트를 포함합니다. 

픽셀 ID가 이미 사이트에 포함된 경우 예시 코드의 Meta 픽셀 세그먼트를 사이트에 통합할 필요가 없습니다. 사이트 설정 > 앱 및 통합 탭 > Meta 픽셀.  

메모: 당사 지원팀은 맞춤형 코드 설정 또는 문제 해결에 대한 직접적인 지원을 제공할 수 없습니다. 이러한 주제는 당사의 범위를 벗어나기 때문입니다. 클라이언트 지원 프로토콜. Meta Pixel 이벤트 통합에 추가 지원이 필요한 경우 Webflow 포럼 가능한 한 많은 세부 정보(예: 사이트의 읽기 전용 링크, 관련 스크린샷, 통합하려는 코드, 문제 설명)를 포함하여 Webflow 커뮤니티 전체(직원 포함)가 추가 정보를 제공할 수 있습니다. 원조와 자원.