빠른 페이지, 잘못된 동의

페이지 캐싱은 속도와 호스팅 비용을 위해 할 수 있는 가장 좋은 일 중 하나입니다. 동시에 눈치채지 못한 채 동의 설정을 깨뜨리는 가장 쉬운 방법 중 하나이기도 합니다. 캐시는 지시받은 그대로 동작합니다. 응답을 한 번 저장하고 동일한 키와 일치하는 모든 사람에게 제공합니다. 저장된 그 응답에 한 방문자의 동의 선택이나 위치에 특정된 무언가가 들어 있다면, 다음 방문자도 그것을 받게 됩니다.

이 가이드는 퍼블리셔 사이트 앞에 일반적으로 놓이는 캐싱 계층(CDN 엣지 캐시, 전체 페이지 캐싱 플러그인, 리버스 프록시, 서비스 워커, 그리고 브라우저 자체)과, 각 계층이 잘못된 동의 경험을 제공하지 않도록 하는 방법을 다룹니다.

핵심 규칙: 캐시되는 HTML에 동의를 넣지 마십시오

가장 안전한 아키텍처는 캐시되는 HTML 페이지를 동의 중립적으로 렌더링하는 것입니다. 페이지에는 CMP 로더와 차단 또는 대기 상태의 태그가 들어 있지만, 이 특정 방문자에 대한 결정은 없습니다. 그런 다음 CMP가 브라우저에서 실행되어 저장된 선택을 읽고, 배너를 표시할지 결정하며, 그에 따라 태그를 해제합니다.

서버가 렌더링 시점에 동의 결정을 내리면 문제가 시작됩니다. 예를 들면 다음과 같습니다.

• 동의 쿠키가 있을 때만 광고 또는 분석 태그를 출력하는 테마나 플러그인
• 이미 선택한 방문자에게는 배너 마크업을 생략하는 서버 측 코드
• 방문자의 동의 상태를 인라인 스크립트 변수에 삽입하는 템플릿

그런 페이지가 캐시되면 첫 방문자의 상태가 모든 사람의 상태가 됩니다. 추적을 거부한 방문자가 태그가 이미 활성화된 페이지를 받을 수 있고, 새 방문자는 이미 배너를 닫은 사람에게서 캐시된 사본 때문에 배너를 전혀 보지 못할 수 있습니다.

“Vary: Cookie”가 좀처럼 답이 되지 않는 이유

방문자별 콘텐츠에 대한 교과서적 해결책은 캐시에 쿠키 헤더를 기준으로 구분하라고 알려주는 것입니다. 실제로 방문자는 고유한 값을 가진 많은 쿠키를 지니고 있으므로 쿠키 헤더 전체를 기준으로 구분하면 캐시 적중률이 거의 0으로 떨어집니다. 일부 CDN은 대신 단일 쿠키 값으로 캐시 키를 구성하게 해주는데, 동의 쿠키가 가질 수 있는 상태의 수가 적다면 쓸 만하지만 복잡성이 늘고 캐시된 사본의 수도 여전히 곱절로 늘어납니다. 결정을 브라우저로 옮기는 편이 더 단순하고 캐시를 효율적으로 유지합니다.

엣지에서의 지리적 위치

많은 퍼블리셔가 지역별로 다른 배너를 보여줍니다. EU와 영국에는 옵트인 배너, 미국 주에는 옵트아웃 고지, 그 외 지역에는 더 가벼운 것을 보여주는 식입니다. 서버가 방문자의 IP 주소로 변형을 선택하고 그 페이지가 캐시되면, 유럽 독자가 캐시된 미국 페이지를 받거나 그 반대가 될 수 있습니다.

이를 피하는 세 가지 패턴이 있습니다.

1. 클라이언트 측 지리 위치 확인. CMP가 브라우저에서 지역을 판단하도록 하여, 캐시된 HTML이 모든 사람에게 동일하게 유지되도록 합니다.
2. 캐시 키에 국가 포함. 엣지에서 결정해야 한다면, CDN이 제공하는 국가 코드를 캐시 키에 포함하십시오. 국가당 하나의 캐시 사본이 생기며 예측 가능합니다.
3. 캐시되지 않는 엣지 로직. 지역 결정을 엣지 함수에서 실행하여, 그 외에는 캐시되는 페이지에 작고 캐시되지 않는 값을 주입합니다.

어느 쪽을 선택하든 문서화하십시오. 지리 관련 버그는 재현하기 가장 어려운 것 중 하나입니다. 한 곳의 방문자가 마침 다른 곳의 누군가에 의해 캐시된 페이지를 받을 때만 나타나기 때문입니다.

CMP 스크립트 자체의 캐싱

CMP 로더를 오래 캐시하면 성능에는 좋지만 구성이 바뀔 때 비용이 따릅니다. 벤더, 목적, 배너 텍스트를 업데이트했는데 스크립트나 구성 파일이 1년 동안 캐시되어 있으면 일부 방문자는 계속 이전 버전을 보게 됩니다. CMP가 파일의 버전을 어떻게 관리하는지 확인하십시오. 파일 이름이나 버전 매개변수가 바뀌면 공격적으로 캐시하면서도 변경을 즉시 배포할 수 있습니다. 또한 CMP가 쿼리 문자열에 의존한다면 자체 CDN이 서드파티 스크립트 URL에서 쿼리 문자열을 제거하지 않는지 확인하십시오.

서비스 워커와 오프라인 캐시

프로그레시브 웹 앱 계층이 있는 사이트는 서비스 워커에 HTML을 캐시하는 경우가 많습니다. 같은 규칙이 적용됩니다. 특정 동의 결정을 반영하는 페이지는 절대 저장하지 마십시오. 동의 관련 엔드포인트와 환경설정 센터 페이지는 서비스 워커 캐싱에서 제외하고, 새로운 CMP 구성을 항상 가져올 수 있도록 하십시오.

뒤로/앞으로 캐시

최신 브라우저는 최근 방문한 페이지를 메모리에 보관하여 뒤로 가기 버튼이 즉시 복원하도록 합니다. 방문자가 한 페이지에서 환경설정 센터를 열고 동의를 철회한 뒤 뒤로 가기를 누르면, 복원된 페이지에서 이전부터 실행되던 태그가 여전히 동작하고 있을 수 있습니다. pageshow 이벤트를 수신하고 그 persisted 속성을 확인하십시오. 페이지가 이 캐시에서 복원된 경우, 저장된 동의 상태를 다시 읽고 이에 맞게 태그를 중지하거나 시작하십시오.

테스트 절차

• 깨끗한 세션에서 페이지를 로드하고 거부한 뒤 두 번째 페이지를 로드하여 어떤 추적 태그도 실행되지 않는지 확인합니다.
• 두 번째 깨끗한 브라우저로 반복하여 배너가 나타나는지 확인합니다. 이는 배너가 캐시되어 사라지지 않았음을 입증합니다.
• 응답 헤더를 확인하여 페이지가 캐시에서 제공되는지 보고, 동의 쿠키가 있을 때와 없을 때의 HTML을 비교합니다. 동일해야 합니다.
• 캐시를 비운 뒤 최소 두 지역에서 테스트하고, 캐시가 데워진 뒤 다시 테스트합니다.
• 동의를 철회하고 뒤로 가기 버튼을 사용하여 태그가 중지되는지 확인합니다.

핵심 요약

• 캐시되는 HTML은 동의 중립적이어야 하며, 결정은 브라우저의 CMP가 내리도록 하십시오.
• 쿠키 헤더 전체를 기준으로 구분하지 마십시오. 적중률을 파괴합니다.
• 배너가 지역별로 다르다면 클라이언트 측에서 결정하거나 캐시 키에 국가를 추가하십시오.
• CMP 파일에 버전을 부여하여 긴 캐시 수명이 구성 변경을 지연시키지 않도록 하십시오.
• 서비스 워커와 뒤로/앞으로 캐시를 다루고, 캐시를 비운 직후만이 아니라 캐시가 데워진 상태에서도 테스트하십시오.