코어 웹 바이탈의 태그 및 태그 관리자를 최적화합니다.
태그는 일반적으로 태그 관리자를 통해 사이트에 삽입되는 서드 파티 코드의 스니펫입니다. 태그는 마케팅 및 분석에 가장 일반적으로 사용됩니다.
태그 및 태그 관리자가 성능에 미치는 영향은 사이트마다 매우 다릅니다. 태그 관리자는 봉투와 비교할 수 있습니다. 태그 관리자는 용기를 제공하지만, 봉투에 채우는 것과 사용하는 방법은 주로 개발자가 결정합니다.
이 문서에서는 성능 및 웹 바이탈을 위해 태그 및 태그 관리자를 최적화하는 기법을 설명합니다. 이 도움말에서는 Google 태그 관리자를 다루지만 대부분의 아이디어는 다른 태그 관리자에게도 적용됩니다.
코어 웹 바이탈에 미치는 영향
태그 관리자는 페이지를 빠르게 로드하고 반응성을 유지하는 데 필요한 리소스를 사용하여 코어 웹 바이탈에 간접적으로 영향을 미칠 수 있습니다. 대역폭은 사이트의 태그 관리자 JavaScript 또는 이로 인해 발생하는 후속 호출을 다운로드하는 데 소비될 수 있습니다. 기본 스레드의 CPU 시간은 태그 관리자와 태그 내에 포함된 자바스크립트를 평가하고 실행하는 데 사용될 수 있습니다.
콘텐츠가 포함된 최대 페인트 (LCP)는 중요한 페이지 로드 시간 동안 대역폭 경합에 취약합니다. 또한 기본 스레드를 차단하면 LCP 렌더링 시간이 지연될 수 있습니다.
누적 레이아웃 변경 (CLS)은 첫 번째 렌더링 전에 중요한 리소스의 로드를 지연시키거나 태그 관리자가 페이지에 콘텐츠를 삽입하여 영향을 받을 수 있습니다.
첫 입력 지연 (FID)은 기본 스레드의 CPU 경합에 취약합니다. 이는 새로운 다음 페인트에 대한 상호작용 (INP) 측정항목에도 영향을 줄 수 있으며 태그 관리자의 크기와 낮은 INP 점수 간의 상관관계를 확인했습니다.
태그 유형
태그가 성능에 미치는 영향은 태그 유형에 따라 다릅니다. 일반적으로 이미지 태그 ('픽셀')가 가장 우수하며 맞춤 템플릿, 맞춤 HTML 태그 순입니다. 공급업체 태그는 허용되는 기능에 따라 다릅니다.
그러나 태그를 사용하는 방법은 성능에 큰 영향을 미칩니다. '픽셀'은 성능이 뛰어납니다. 이 태그 유형의 특성으로 인해 사용 방법에 엄격한 제한이 적용되기 때문입니다. 맞춤 HTML 태그가 항상 성능에 나쁜 것은 아니지만 사용자에게 제공하는 자유로움으로 인해 성능에 좋지 않은 방식으로 오용되기 쉬울 수 있습니다.
태그를 생각할 때는 확장성을 염두에 두어야 합니다. 단일 태그가 성능에 미치는 영향은 미미할 수 있지만, 같은 페이지에서 수십 또는 수백 개의 태그를 사용하면 상당한 영향을 받을 수 있습니다.
모든 스크립트를 태그 관리자를 통해 로드해서는 안 됩니다.
태그 관리자는 일반적으로 사용자 환경의 즉각적인 시각적 또는 기능적 측면(예: 쿠키 알림, 히어로 이미지, 사이트 기능)을 구현하는 리소스를 로드하는 데 좋은 메커니즘이 아닙니다. 태그 관리자를 사용하여 이러한 리소스를 로드하면 일반적으로 전송이 지연됩니다. 이는 사용자 환경에 좋지 않으며 LCP 및 CLS와 같은 측정항목도 증가할 수 있습니다. 또한 일부 사용자의 경우 태그 관리자를 차단한다는 점에 유의하세요. 태그 관리자를 사용하여 UX 기능을 구현하면 일부 사용자에게 웹사이트가 손상될 수 있습니다.
맞춤 HTML 태그 사용 시 주의사항
맞춤 HTML 태그는 수년 전부터 사용되어 왔으며 대부분의 사이트에서 많이 사용됩니다. 맞춤 HTML 태그를 사용하면 이름과 관계없이 제한 없이 자체 코드를 입력할 수 있습니다. 이 태그의 주된 용도는 맞춤 <script> 요소를 페이지에 추가하는 것입니다.
맞춤 HTML 태그는 다양한 방법으로 사용할 수 있으며, 성능에 큰 영향을 미칩니다. 사이트의 성능을 측정할 때 대부분의 도구는 맞춤 HTML 태그의 성능 영향을 태그 자체가 아니라 태그를 삽입한 태그 관리자에 저작자로 표시합니다.
맞춤 HTML 태그는 주변 페이지에 요소를 삽입할 수 있습니다. 페이지에 요소를 삽입하는 작업이 성능 문제의 원인이 될 수 있으며 경우에 따라 레이아웃 변경이 발생할 수도 있습니다.
- 대부분의 경우 페이지에 요소가 삽입되면 브라우저가 페이지에서 각 항목의 크기와 위치를 다시 계산해야 합니다. 이 과정을 레이아웃이라고 합니다. 단일 레이아웃의 성능 영향은 미미하지만 과도하게 발생하면 성능 문제의 원인이 될 수 있습니다. 이 현상의 영향은 DOM 요소가 많은 페이지와 저사양 기기에서 더 큽니다.
- 주변 영역이 이미 렌더링된 후 표시되는 페이지 요소가 DOM에 삽입되면 레이아웃 변경이 발생할 수 있습니다. 이러한 현상은 태그 관리자에만 국한된 것이 아닙니다. 일반적으로 태그는 페이지의 다른 부분보다 늦게 로드되므로 주변 페이지가 이미 렌더링된 후에 DOM에 삽입되는 경우가 일반적입니다.
맞춤 템플릿 사용 고려
맞춤 템플릿은 맞춤 HTML 태그와 동일한 작업을 일부 지원하지만, 스크립트 삽입 및 픽셀 삽입과 같은 일반적인 사용 사례에 API를 제공하는 샌드박스 처리된 자바스크립트 버전을 기반으로 합니다. 이름에서 알 수 있듯이 성능을 고려하여 이 템플릿을 빌드할 수 있는 고급 사용자가 템플릿을 만들 수 있습니다. 이렇게 하면 기술 지식이 부족한 사용자가 템플릿을 사용할 수 있습니다. 이 방법이 전체 맞춤 HTML 액세스를 제공하는 것보다 안전한 경우가 많습니다.
맞춤 템플릿에 적용되는 제한사항이 많기 때문에 이러한 태그는 성능이나 보안 문제를 일으킬 가능성이 훨씬 낮습니다. 하지만 이와 같은 이유로 맞춤 템플릿은 일부 사용 사례에서 작동하지 않습니다.
올바르게 스크립트 삽입
태그 관리자를 사용하여 스크립트를 삽입하는 것은 매우 일반적인 사용 사례입니다. 이렇게 하려면 맞춤 템플릿과 injectScript API를 사용하는 것이 좋습니다.
injectScript API를 사용하여 기존 맞춤 HTML 태그를 변환하는 방법에 관한 자세한 내용은 기존 태그 변환을 참고하세요.
맞춤 HTML 태그를 사용해야 하는 경우 다음 사항에 유의하세요.
- 라이브러리와 대형 서드 파티 스크립트는 스크립트의 콘텐츠를 태그에 직접 복사하여 붙여넣는 대신 외부 파일 (예:
<script src="external-scripts.js">)을 다운로드하는 스크립트 태그를 통해 로드해야 합니다.<script>태그를 계속 사용하면 스크립트의 콘텐츠를 다운로드하기 위한 별도의 왕복이 없어지지만 이렇게 하면 컨테이너 크기가 증가하고 브라우저에서 스크립트가 별도로 캐시되지 않습니다. - 대부분의 공급업체는
<script>태그를<head>상단에 배치하는 것이 좋습니다. 그러나 태그 관리자를 통해 로드된 스크립트의 경우 일반적으로 이 권장사항이 필요하지 않습니다. 대부분의 경우 태그 관리자가 실행될 때까지 브라우저에서 이미<head>파싱을 완료한 상태입니다.
픽셀 사용
경우에 따라 서드 파티 스크립트를 이미지 또는 iframe '픽셀'로 대체할 수 있습니다. 픽셀은 스크립트 기반의 대응 함수와 비교할 때 더 적은 기능을 지원할 수 있으므로 종종 덜 선호되는 구현으로 간주됩니다. 하지만 태그 관리자 내에서 사용하면 트리거에서 실행되고 다른 변수를 전달할 수 있으므로 픽셀이 보다 동적일 수 있습니다. 태그가 실행되면 자바스크립트가 실행되지 않으므로 가장 성능이 뛰어나고 안전한 태그 유형입니다. 픽셀은 리소스 크기가 매우 작고 (1KB 미만) 레이아웃 변경을 일으키지 않습니다.
픽셀 지원에 관한 자세한 내용은 서드 파티 제공업체에 문의하세요. 또한 코드에서 <noscript> 태그를 검사할 수 있습니다.
공급업체가 픽셀을 지원하면 대개 <noscript> 태그 내에 픽셀을 포함합니다.
픽셀 대안
픽셀은 한때 서버 응답이 관련이 없는 상황에서 ( 예: 분석 제공업체에 데이터를 전송할 때) HTTP 요청을 실행하는 가장 저렴하고 안정적인 방법 중 하나였기 때문에 널리 사용되었습니다. navigator.sendBeacon() 및 fetch()
keepalive API는 이와 동일한 사용 사례를 처리하도록 설계되었지만 픽셀보다 안정성이 더 높습니다.
픽셀을 계속 사용하는 것은 문제가 없습니다. 픽셀은 잘 지원되며 성능에 최소한의 영향을 미칩니다. 하지만 직접 비콘을 만들고 있다면 이러한 API 중 하나를 사용하는 것이 좋습니다.
sendBeacon()
navigator.sendBeacon() API는 서버 응답이 중요하지 않은 상황에서 소량의 데이터를 웹 서버에 전송하도록 설계되었습니다.
const url = "https://example.com/analytics";
const data = JSON.stringify({
event: "checkout",
time: performance.now()
});
navigator.sendBeacon(url, data);
sendBeacon()에는 제한된 API가 있으며, POST 요청 만들기만 지원하고 커스텀 헤더 설정은 지원하지 않습니다. 이 기능은 모든 최신 브라우저에서 지원됩니다.
fetch() keepalive
keepalive는 Fetch API를 사용하여 이벤트 보고 및 분석과 같은 비차단 요청을 할 수 있도록 하는 플래그입니다. 이 메서드는 fetch()에 전달된 매개변수에 keepalive: true를 포함하여 사용합니다.
const url = "https://example.com/analytics";
const data = JSON.stringify({
event: "checkout",
time: performance.now()
});
fetch(url, {
method: 'POST',
body: data,
keepalive: true
});
fetch() keepalive와 sendBeacon()가 매우 유사해 보인다면 이는 둘이 동일하기 때문입니다. 실제로 Chromium 브라우저에서 sendBeacon()는 이제 fetch()
keepalive를 기반으로 빌드됩니다.
fetch() keepalive와 sendBeacon() 중에서 선택할 때는 필요한 기능과 브라우저 지원을 고려하는 것이 중요합니다. fetch() API는 훨씬 유연하지만 keepalive는 sendBeacon()보다 브라우저 지원이 적습니다.
설명 보기
태그는 보통 서드 파티 공급업체의 안내에 따라 생성됩니다. 공급업체의 코드가 무엇을 하는지 불분명한 경우, 잘 아는 사람에게 물어보는 것이 좋습니다. 다른 의견을 얻으면 태그가 성능 또는 보안 문제를 일으킬 가능성이 있는지 식별하는 데 도움이 될 수 있습니다.
태그 관리자에서 소유자로 태그에 라벨을 지정하는 것도 좋습니다. 태그 소유자가 누구인지 잊어버리기 쉽습니다. 만일에 대비해 태그를 삭제해야 합니다.
트리거
일반적으로 태그 트리거를 최적화하는 작업은 태그를 필요 이상으로 트리거하지 않도록 하고 비즈니스 요구사항과 성능 비용의 균형을 맞추는 트리거를 선택하는 것입니다.
트리거 자체는 태그 관리자의 크기와 실행 비용을 늘리는 자바스크립트 코드입니다. 대부분의 트리거는 작지만 누적 효과는 합산될 수 있습니다. 예를 들어 클릭 이벤트 또는 타이머 트리거가 많으면 태그 관리자의 워크로드가 크게 증가할 수 있습니다.
적절한 트리거 이벤트 선택
태그의 성능 영향은 고정되어 있지 않습니다. 일반적으로 태그가 일찍 실행될수록 성능에 미치는 영향이 큽니다. 리소스는 일반적으로 초기 페이지 로드 중에 제한되므로 특정 리소스 (또는 태그)를 로드하거나 실행하면 리소스가 다른 리소스에서 벗어납니다.
모든 태그에 적절한 트리거를 선택하는 것이 중요하지만 대용량 리소스를 로드하거나 긴 스크립트를 실행하는 태그의 경우 특히 중요합니다.
태그는 페이지 조회(일반적으로 Page load, DOM Ready, Window Loaded)에서 또는 맞춤 이벤트를 기반으로 트리거될 수 있습니다. 페이지 로드에 영향을 주지 않으려면 Window Loaded 후에 필수가 아닌 태그를 실행하는 것이 좋습니다.
맞춤 이벤트 사용
맞춤 이벤트를 사용하면 Google 태그 관리자의 기본 제공 트리거에서 다루지 않는 페이지 이벤트에 대한 응답으로 트리거를 실행할 수 있습니다. 예를 들어 많은 태그가 페이지 조회 트리거를 사용하지만 DOM Ready과 Window Loaded 사이의 기간이 여러 페이지에서 길어질 수 있으므로 태그가 실행될 때 세밀하게 조정하기 어려울 수 있습니다. 맞춤 이벤트를 사용하면 이 문제를 해결할 수 있습니다.
맞춤 이벤트를 사용하려면 먼저 맞춤 이벤트 트리거를 만들고 이 트리거를 사용하도록 태그를 업데이트하세요.
트리거를 실행하려면 해당 이벤트를 데이터 영역으로 푸시합니다.
// Custom event trigger that fires after 2 seconds
setTimeout(() => {
dataLayer.push({
'event' : 'my-custom-event'
});
}, 2000);
특정 트리거 조건 사용
특정 트리거 조건을 사용하면 태그가 불필요하게 실행되는 것을 방지할 수 있습니다. 이 개념을 적용하는 방법에는 여러 가지가 있지만, 가장 간단하고 유용한 방법 중 하나는 태그가 실제로 사용되는 페이지에서만 실행되도록 하는 것입니다.
기본 제공 변수를 트리거 조건에 통합하여 태그 실행을 제한할 수도 있습니다.
하지만 복잡한 트리거 조건 또는 예외가 있는 경우 처리 시간이 자동으로 소모되므로 너무 복잡하게 만들지 마세요.
적절한 시점에 태그 관리자 로드하기
태그 관리자 자체가 로드되는 시점을 조정하면 성능에 상당한 영향을 미칠 수 있습니다. 트리거는 구성 방법에 관계없이 태그 관리자가 로드된 후에만 실행될 수 있습니다. 위에서 설명한 것처럼 개별 태그에 적합한 트리거를 선택하는 것이 중요하지만, 한 번의 결정으로 페이지의 모든 태그에 영향을 미치므로 태그 관리자를 로드하는 시점을 실험하면 효과가 같거나 더 큰 경우가 많습니다.
또한 나중에 태그 관리자를 로드하면 관리 계층이 추가되고 향후 성능 문제를 피할 수 있습니다. 태그 관리자 사용자가 그 영향을 알지 못한 채 실수로 너무 일찍 태그를 로드하는 것을 방지하므로
변수
변수를 사용하면 페이지에서 데이터를 읽을 수 있습니다. 또한 트리거와 태그 자체에서 유용합니다.
트리거와 마찬가지로 변수도 자바스크립트 코드가 태그 관리자에 추가되어 성능 문제를 일으킬 수 있습니다. 변수는 상대적으로 간단한 기본 제공 유형일 수 있습니다. 예를 들어 URL, 쿠키, 데이터 영역 또는 DOM의 일부를 읽을 수 있습니다. 또는 기능이 기본적으로 무제한인 맞춤 JavaScript일 수도 있습니다.
변수는 태그 관리자가 지속적으로 평가해야 하므로 변수를 단순하게 그리고 최소한으로 유지하세요. 태그 관리자 스크립트의 크기와 사용되는 처리 시간을 줄이는 데 더 이상 사용되지 않는 이전 변수를 삭제합니다.
태그 관리
태그를 효율적으로 사용하면 성능 문제가 발생할 위험을 줄일 수 있습니다.
데이터 영역 사용
데이터 영역에는 'Google 태그 관리자로 전달하려는 모든 정보가 포함되어 있습니다'. 더 구체적으로 설명하면 페이지 정보를 포함하는 객체의 JavaScript 배열입니다. 또한 태그를 트리거하는 데도 사용할 수 있습니다.
// Contents of the data layer
window.dataLayer = [{
'pageCategory': 'signup',
'visitorType': 'high-value'
}];
// Pushing a variable to the data layer
window.dataLayer.push({'variable_name': 'variable_value'});
// Pushing an event to the data layer
window.dataLayer.push({'event': 'event_name'});
Google 태그 관리자는 데이터 영역 없이 사용할 수 있지만 이를 사용하는 것이 좋습니다. 데이터 영역은 서드 파티 스크립트가 액세스하는 데이터를 단일 위치로 통합하여 데이터 사용량을 더 잘 파악할 수 있는 방법을 제공합니다. 무엇보다도 이렇게 하면 중복 변수 계산 및 스크립트 실행을 줄일 수 있습니다. 데이터 영역을 사용하면 전체 자바스크립트 변수 또는 DOM 액세스 권한을 부여하는 대신 태그에서 액세스하는 데이터를 제어할 수도 있습니다.
중복되거나 사용되지 않는 태그 삭제
태그가 태그 관리자를 통해 삽입되는 것 외에도 페이지의 HTML 마크업에 포함된 경우 중복 태그가 발생할 수 있습니다.
사용되지 않은 태그는 트리거 예외를 사용하여 차단하는 대신 일시중지하거나 삭제해야 합니다. 태그를 일시중지하거나 삭제하면 컨테이너에서 코드가 삭제되지만, 차단해도 그렇지 않습니다.
미사용 태그가 삭제되면 트리거와 변수도 검토하여 해당 태그에서만 사용된 트리거와 변수를 삭제할 수 있는지 확인해야 합니다.
허용 및 거부 목록 사용
허용 및 거부 목록을 사용하면 페이지에서 허용되는 태그, 트리거, 변수에 대해 매우 세분화된 제한을 구성할 수 있습니다. 성능 권장사항 및 기타 정책을 시행하는 데 사용할 수 있습니다.
허용 및 거부 목록은 데이터 영역을 통해 구성됩니다.
window.dataLayer = [{
'gtm.allowlist': ['<id>', '<id>', ...],
'gtm.blocklist': ['customScripts']
}];
예를 들어 맞춤 HTML 태그, 자바스크립트 변수 또는 직접적인 DOM 액세스를 허용하지 않을 수 있습니다. 즉, 데이터 영역의 데이터와 함께 픽셀 및 사전 정의된 태그만 사용할 수 있습니다. 이 방법은 제한적이지만 훨씬 더 안전하고 효과적인 태그 관리자를 구현할 수 있습니다.
서버 측 태그 지정 사용 고려
서버 측 태그 지정으로 전환하는 것은 사소한 작업이 아니지만 고려하는 것이 좋습니다. 특히 데이터를 더 세부적으로 제어해야 하는 대규모 사이트의 경우 고려해야 합니다. 서버 측 태그 지정은 클라이언트에서 공급업체 코드를 삭제하며, 이와 함께 클라이언트에서 서버로 처리를 오프로드합니다.
예를 들어 클라이언트 측 태그 지정을 사용하는 경우 여러 애널리틱스 계정으로 데이터를 전송하려면 클라이언트가 각 엔드포인트에 대해 별도의 요청을 시작해야 합니다. 반면 서버 측 태그 지정을 사용하면 클라이언트가 서버 측 컨테이너에 단일 요청을 하고, 여기에서 이 데이터가 다른 애널리틱스 계정으로 전달됩니다.
서버 측 태그 지정은 일부 태그에서만 작동하며 태그 호환성은 공급업체에 따라 다릅니다.
자세한 내용은 서버 측 태그 지정 소개를 참고하세요.
컨테이너
태그 관리자는 일반적으로 설정 내에서 여러 인스턴스 또는 '컨테이너'를 허용합니다. 따라서 하나의 태그 관리자 계정 내에서 여러 컨테이너를 제어할 수 있습니다.
페이지당 하나의 컨테이너만 사용합니다.
한 페이지에서 여러 containers를 사용하면 오버헤드 및 스크립트 실행이 추가로 발생하므로 심각한 성능 문제가 발생할 수 있습니다. 최소한 컨테이너 자바스크립트의 일부로 전달되므로 컨테이너 간에 재사용할 수 없는 핵심 태그 코드 자체를 복제합니다.
여러 컨테이너를 효과적으로 사용하는 경우는 드뭅니다. 그러나 잘 제어된다면 다음을 비롯한 여러 인스턴스가 제대로 작동할 수 있습니다.
- 큰 컨테이너 하나가 아닌 '초기 로드' 컨테이너는 적고 '나중에 로드' 컨테이너는 과중합니다.
- 기술 수준이 낮은 사용자가 사용하는 제한된 컨테이너, 그리고 제한이 적지만 더 엄격하게 관리되는 컨테이너(제한된 컨테이너에서 사용할 수 없는 태그)가 있는 경우
페이지당 여러 컨테이너를 사용해야 하는 경우 여러 컨테이너를 설정하는 방법에 대한 Google 태그 관리자 안내를 따르세요.
필요한 경우 별도의 컨테이너 사용
여러 속성 (예: 웹 앱 및 모바일 앱)에 태그 관리자를 사용하는 경우 사용하는 컨테이너의 수가 워크플로 생산성에 도움이 되거나 저하될 수 있습니다. 성능에도 영향을 미칠 수 있습니다.
일반적으로 사이트의 사용 및 구조가 비슷하면 여러 사이트에서 단일 컨테이너를 효과적으로 사용할 수 있습니다. 예를 들어 브랜드의 모바일 앱과 웹 앱이 비슷한 기능을 제공할 수도 있지만 앱이 다르게 구조화되어 별도의 컨테이너를 통해 더 효과적으로 관리할 수 있습니다.
일반적으로 단일 컨테이너를 너무 광범위하게 재사용하려고 하면 태그 및 트리거를 관리하기 위해 복잡한 로직을 채택해야 하므로 컨테이너의 복잡성과 크기가 불필요하게 증가합니다.
컨테이너 크기 확인
컨테이너의 크기는 태그, 트리거, 변수에 따라 결정됩니다. 작은 컨테이너도 페이지 성능에 부정적인 영향을 미칠 수 있지만 큰 컨테이너는 분명 영향을 미칩니다.
태그 사용량을 최적화할 때 컨테이너 크기가 기준 측정항목이 되어서는 안 됩니다. 그러나 컨테이너 크기가 크다는 것은 컨테이너가 제대로 관리되지 않고 오용될 가능성이 있다는 경고 신호인 경우가 많습니다.
Google 태그 관리자는 컨테이너 크기를 200KB로 제한하고 140KB에서 시작되는 컨테이너 크기에 대해 경고를 표시합니다. 그러나 대부분의 사이트는 컨테이너를 이보다 훨씬 작게 유지하는 것을 목표로 합니다. 관점에서 사이트 컨테이너의 중앙값은 약 50KB입니다.
컨테이너의 크기를 확인하려면 https://www.googletagmanager.com/gtag/js?id=YOUR_ID에서 반환된 응답의 크기를 확인합니다. 이 응답에는 Google 태그 관리자 라이브러리와 컨테이너의 콘텐츠가 포함됩니다. Google 태그 관리자 라이브러리 자체는 약 33KB 압축됩니다.
컨테이너 버전 이름 지정
컨테이너 버전은 특정 시점의 컨테이너 콘텐츠에 대한 스냅샷입니다. 의미 있는 이름을 사용하고 의미 있는 변경사항에 관한 간단한 설명을 포함하면 향후 성능 문제를 더 쉽게 디버그할 수 있습니다.
태그 워크플로
태그 변경사항이 페이지 성능에 부정적인 영향을 미치지 않도록 하려면 변경사항을 관리하는 것이 중요합니다.
배포 전 태그 테스트
배포 전에 태그를 테스트하면 출시 전에 문제 (성능 및 기타)를 포착하는 데 도움이 될 수 있습니다.
태그를 테스트할 때 고려할 사항은 다음과 같습니다.
- 태그가 올바르게 작동하나요?
- 태그로 인해 레이아웃이 변경되나요?
- 태그가 리소스를 로드하나요? 이러한 리소스는 얼마나 큰가요?
- 태그가 장기 실행 스크립트를 트리거하나요?
미리보기 모드
미리보기 모드를 사용하면 태그 변경사항을 공개적으로 배포하지 않고도 실제 사이트에서 테스트할 수 있습니다. 미리보기 모드에는 태그 정보를 제공하는 디버깅 콘솔이 포함되어 있습니다.
Google 태그 관리자의 실행 시간은 미리보기 모드에서 실행할 때 디버깅 콘솔에서 정보를 노출하는 데 필요한 추가 오버헤드로 인해 약간 느립니다. 따라서 미리보기 모드에서 수집된 웹 바이탈 측정값과 프로덕션에서 수집된 웹 바이탈 측정값을 비교하는 것은 권장되지 않습니다. 하지만 이러한 불일치는 태그 자체의 실행 동작에 영향을 미치지 않습니다.
독립형 테스트
태그를 테스트하는 또 다른 방법은 단일 태그(테스트 중인 태그)가 있는 컨테이너가 포함된 빈 페이지를 설정하는 것입니다. 이 테스트 설정은 덜 현실적이며 일부 문제 (예: 태그가 레이아웃 변경을 야기하는지 여부)를 포착하지 못합니다. 그러나 태그가 스크립트 실행과 같은 사항에 미치는 영향을 쉽게 분리하고 측정할 수는 있습니다. Telegraph에서 어떻게 이러한 격리 방식을 사용하여 서드 파티 코드의 성능을 개선하는지 확인하세요.
태그 성능 모니터링
Google 태그 관리자 Monitoring API를 사용하여 특정 태그의 실행 시간에 관한 정보를 수집할 수 있습니다. 이 정보는 선택한 엔드포인트에 보고됩니다.
자세한 내용은 Google 태그 관리자 모니터를 구축하는 방법을 참고하세요.
컨테이너 변경에 승인 필요
퍼스트 파티 코드는 일반적으로 배포 전에 검토 및 테스트를 거칩니다. 태그를 동일하게 처리합니다. 이를 위한 한 가지 방법은 컨테이너 변경에 대해 관리자 승인이 필요한 2단계 인증을 추가하는 것입니다. 2단계 인증이 필요하지 않지만 변경사항을 계속 확인하고 싶은 경우에는 컨테이너 알림을 설정하여 선택한 컨테이너 이벤트에 대한 이메일 알림을 받을 수 있습니다.
주기적으로 태그 사용 감사
태그 작업의 문제 중 하나는 시간이 지남에 따라 누적되는 경향이 있다는 것입니다. 즉, 태그는 추가되지만 거의 삭제되지 않습니다. 주기적으로 태그를 감사하는 것이 이러한 추세를 뒤집는 한 가지 방법입니다. 이상적인 빈도는 사이트 태그의 업데이트 빈도에 따라 달라집니다.
소유자가 분명하도록 각 태그에 라벨을 지정하면 해당 태그에 반응하는 사용자를 더 쉽게 식별하고 여전히 필요한지 여부를 판단할 수 있습니다.
태그를 감사할 때는 트리거와 변수도 정리해야 합니다. 또한 쉽게 성능 문제의 원인이 될 수도 있습니다.
자세한 내용은 타사 스크립트 제어 유지를 참조하세요.