Core Web Vitals의 태그 및 태그 관리자를 최적화합니다.
태그는 스니펫입니다. 일반적으로 태그 관리자를 통해 사이트에 삽입되는 서드 파티 코드의 모음입니다. 태그는 마케팅 및 분석에 가장 일반적으로 사용됩니다.
태그 및 태그 관리자가 실적에 미치는 영향은 사이트마다 크게 다릅니다. 태그 관리자를 봉투와 비교할 수 있습니다. 태그 관리자는 하지만 무엇을 채우고 어떻게 사용하는지는 본인이 결정하면 됩니다.
이 도움말에서는 태그 및 태그 관리자를 최적화하는 방법에 대해 설명합니다. 성능 및 웹 바이탈입니다 이 도움말에서는 Google 태그 관리자에 대해 언급하지만 논의된 많은 아이디어 중 다른 태그 관리자에게도 적용할 수 있는 아이디어입니다.
코어 웹 바이탈에 미치는 영향
태그 관리자는 페이지를 빠르게 로드하고 응답성을 유지하는 데 필요한 리소스를 소진하여 Core Web Vitals에 간접적으로 영향을 미칠 수 있습니다. 대역폭은 사이트의 태그 관리자 JavaScript 또는 이로 인해 발생하는 후속 호출을 다운로드하는 데 사용될 수 있습니다. 메인 스레드의 CPU 시간은 태그 관리자 및 태그 내에 포함된 자바스크립트를 평가하고 실행하는 데 사용될 수 있습니다.
콘텐츠가 포함된 최대 페인트 (LCP)는 중요한 페이지 로드 시간 동안 대역폭 경합에 취약합니다. 또한 기본 스레드를 차단하면 LCP 렌더링 시간이 지연될 수 있습니다.
누적 레이아웃 변경 (CLS)은 첫 번째 렌더링 전에 중요한 리소스의 로드를 지연시키거나 태그 관리자가 페이지에 콘텐츠를 삽입하는 방식으로 영향을 받을 수 있습니다.
다음 페인트에 대한 상호작용 (INP)은 기본 스레드의 CPU 경합에 취약합니다. 태그 관리자의 크기와 낮은 INP 점수 사이에 상관관계가 있는 것으로 확인되었습니다.
태그 유형
태그가 실적에 미치는 영향은 태그 유형에 따라 다릅니다. 일반적으로 이미지 태그('픽셀')가 가장 성능이 우수하며 맞춤 템플릿이 그 뒤를 이었습니다. 마지막으로 맞춤 HTML 태그가 있습니다. 공급업체 태그는 허용
하지만 태그를 사용하는 방식이 태그 성능에 큰 영향을 미친다는 점에 유의하세요. 영향을 줄 수 있습니다 '픽셀' 이 태그의 특성 때문에 매우 높은 성능을 발휘합니다 유형은 사용 방법에 엄격한 제한을 가합니다. 맞춤 HTML 태그는 성능에는 항상 나쁜 영향을 주지만, 자유롭기 때문에 성능이 저하되는 방식으로 오용되기 쉽습니다.
태그를 고려할 때 규모를 염두에 두어야 합니다. 즉, 태그를 사용할 경우 실적에 미치는 영향을 염두에 두어야 합니다. 단일 태그는 무시해도 되지만, 수십 또는 수백 개의 태그가 있는 경우에는 태그가 같은 페이지에서 사용되기 때문입니다.
모든 스크립트를 태그 관리자를 사용하여 로드해야 하는 것은 아닙니다.
일반적으로 태그 관리자는 많은 작업을 수행해야 하는 사용자 환경의 시각적 또는 기능적 측면을 즉각적으로 구현하고 예를 들어 쿠키 참고사항, 히어로 이미지, 사이트 기능 등이 포함될 수 있습니다. 태그 관리자를 사용하여 로드하면 일반적으로 전달이 지연됩니다. 사용자에게 좋지 않습니다. LCP, CLS 등의 측정항목을 늘릴 수 있습니다 또한 일부 사용자는 태그 관리자를 차단한다는 점을 기억하세요. 태그 관리자를 사용하여 UX 구현 기능을 사용하면 일부 사용자의 웹사이트가 작동하지 않을 수 있습니다.
맞춤 HTML 태그 사용 시 주의사항
맞춤 HTML
태그
수년 동안 사용되어 왔으며 대부분의 사이트에서 많이 사용됩니다. 맞춤 HTML
태그를 사용하면 이름에 상관없이 자체 코드를 입력할 수 있습니다.
이 태그의 주요 용도는 맞춤 <script> 요소를 페이지에 추가하는 것입니다.
맞춤 HTML 태그는 다양한 방식으로 사용할 수 있으며 성능에 미치는 영향 크게 다를 수 있습니다 사이트의 실적을 측정할 때는 대부분의 도구는 맞춤 HTML 태그가 성능에 미치는 영향을 태그에 부여합니다. 태그를 삽입한 관리자입니다.
맞춤 HTML 태그를 사용하면 주변 페이지에 요소를 삽입할 수 있습니다. 행위 페이지에 요소를 삽입하는 것은 성능 문제의 원인이 될 수 있습니다. 경우에 따라 레이아웃이 변경될 수도 있습니다.
- 대부분의 경우 요소가 페이지에 삽입되면 브라우저가 페이지에 있는 각 항목의 크기와 위치를 다시 계산해야 합니다. 이 프로세스에서는 인코더-디코더는 레이아웃 단일 레이아웃의 성능 영향은 극히 적지만 발생 시 과도하게 사용하면 성능 문제의 원인이 될 수 있습니다. 이 기능의 영향 이러한 현상은 트래픽이 많이 발생하는 저사양 기기와 페이지에서 DOM 요소.
- 표시되는 페이지 요소가 주변 요소 뒤의 DOM에 삽입되는 경우 이미 렌더링된 경우 레이아웃이 변경될 수 있습니다. 이 현상은 일반적으로 태그는 나중에 로드되기 때문에 태그 관리자별로 고유하지는 않습니다. 일반적으로 페이지의 다른 부분이 DOM을 사용할 수 있습니다.
맞춤 템플릿 사용 고려
맞춤 템플릿 지원 맞춤 HTML 태그와 일부 동일한 작업을 사용하지만 샌드박스 처리된 웹 기반 인터페이스를 제공하는 일반적인 사용을 위한 API 스크립트 삽입 및 픽셀 삽입과 같은 사례가 있습니다. 이름에서 알 수 있듯이 고성능 사용자가 만들 템플릿을 생각해야 합니다. 기술 수준이 낮은 사용자도 이 템플릿을 사용할 수 있습니다. 보통 더 안전합니다. 전체 맞춤 HTML 액세스를 제공하는 것보다 훨씬 더 편리할 수 있습니다
맞춤 템플릿에 적용되는 제한사항이 더 많기 때문에 이러한 태그는 성능 또는 보안 문제를 나타낼 가능성이 낮습니다. 이와 동일한 일부 사용 사례에서는 맞춤 템플릿이 작동하지 않습니다.
올바르게 스크립트 삽입
태그 관리자를 사용하여 스크립트를 삽입하는 것은 매우 일반적인 사용 사례입니다. 이
맞춤 템플릿을 사용하는 것이 좋습니다.
injectScript 드림
API에 액세스할 수 있습니다.
injectScript API를 사용하여 기존 맞춤 HTML을 변환하는 방법에 대한 자세한 내용은 태그에 대한 자세한 내용은 기존 태그를 사용하여 Google의 네트워크 주소를 확인합니다.
맞춤 HTML 태그를 사용해야 하는 경우 다음 사항에 유의하세요.
- 라이브러리와 대규모 서드 파티 스크립트는 스크립트 태그를 통해 로드되어야 합니다.
이 스크립트의 스크립트를 복사하여 붙여넣지 않고 외부 파일 (예:
<script src="external-scripts.js">)을 다운로드하는 것이 삽입해야 합니다.<script>태그의 사용은 바람직하지 않습니다. 스크립트의 콘텐츠를 다운로드하기 위한 별도의 왕복을 없애고, 컨테이너 크기를 늘리고 스크립트가 캐시되지 않도록 합니다. 브라우저에서 개별적으로 삭제할 수 있습니다 - 많은 공급업체는
<script>태그를<head>입니다. 그러나 태그 관리자를 통해 로드된 스크립트의 경우 이 권장사항은 는 일반적으로 필요하지 않습니다. 대부분의 경우 브라우저에서 이미 태그 관리자가 실행될 때<head>를 파싱합니다.
픽셀 사용
경우에 따라 서드 파티 스크립트를 이미지 또는 iframe으로 대체할 수 있습니다. 'pixels'). 스크립트 기반의 픽셀과 비교하여 픽셀은 덜 선호되는 구현으로 간주되는 경우가 많습니다. 확인할 수 있습니다 하지만 태그 관리자 내에서 사용하면 픽셀이 보다 동적일 수 있습니다. 트리거에서 실행되고 다른 변수를 전달할 수 있기 때문입니다. 이들은 자바스크립트 실행이 없으므로 시작됩니다 픽셀은 리소스 크기가 매우 작고 (1KB 미만) 레이아웃 변경이 발생하지 않습니다.
타사 제공업체에 대한 자세한 내용은
픽셀 또한 코드에서 <noscript> 태그를 검사할 수 있습니다.
공급업체에서 픽셀을 지원하는 경우 대개 픽셀이
<noscript> 태그
픽셀의 대안
Pixel은 한때 가장 저렴한 제품 중 하나였기 때문에 인기를 끌었습니다.
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 드림
이 플래그에서는
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() 중에서 선택할 때는
필요한 기능과 브라우저 지원을 고려하세요. import() API는
훨씬 더 유연해졌습니다. 그러나 keepalive는 브라우저가 더 적기 때문에
sendBeacon()보다 지원됩니다.
설명 보기
태그는 보통 서드 파티 공급업체에서 제공하는 안내에 따라 생성됩니다. 공급업체의 코드가 수행하는 작업이 명확하지 않은 경우 아는 사람에게 질문하는 것이 좋습니다. 다른 사람의 의견을 받으면 태그가 생성 가능성이 있는지 확인하는 데 도움이 될 수 있습니다. 성능 또는 보안 문제가 있을 수 있습니다.
태그 관리자에서 소유자로 태그에 라벨을 지정하는 것도 좋습니다. 멀리 태그 소유자를 잊어버리고 만일에 대비해 삭제하는 것을 두려워하기 쉽습니다.
트리거
개략적으로 설명하면 태그 최적화 트리거 일반적으로 태그를 필요 이상으로 트리거하지 않고 비즈니스 요구사항과 성능 비용의 균형을 맞추는 트리거를 선택합니다.
트리거 자체는 크기와 실행을 늘리는 자바스크립트 코드입니다. 태그 관리자의 비용입니다. 대부분의 트리거는 작지만 누적 효과는 더합니다. 예를 들어 많은 클릭 이벤트나 타이머 트리거가 있으면 태그 관리자의 워크로드가 증가합니다
적절한 트리거 이벤트 선택
태그가 성능에 미치는 영향은 고정되어 있지 않습니다. 일반적으로 더 커질수록 그 태그가 실적에 미치는 영향이 커질 수 있습니다. 리소스는 일반적으로 제한되기 때문에 특정 리소스 (또는 태그)가 다른 것의 리소스를 가져갈 수 있습니다.
모든 태그에 적절한 트리거를 선택하는 것이 중요하지만 대규모 리소스를 로드하거나 오랜 시간 동안 실행되는 태그에 특히 중요 사용할 수 있습니다
태그가 트리거될 수 있는
페이지 조회수
(보통 Page load, DOM Ready, Window Loaded) 또는
맞춤 이벤트입니다. 페이지 로드에 영향을 주지 않으려면
Window Loaded 뒤에 필수가 아닌 태그가 포함되어 있습니다.
맞춤 이벤트 사용
맞춤 이벤트
Google에서 다루지 않는 페이지 이벤트에 대한 응답으로 트리거
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 태그 관리자는 데이터 영역 없이 사용할 수 있지만 그 용도는 적극 권장됩니다. 데이터를 통합하는 방법을 제공하는 데이터 영역 서드 파티 스크립트를 통해 한곳에 액세스할 수 있으므로 사용 데이터를 더 잘 파악할 수 있습니다. 무엇보다도 이렇게 하면 중복 변수 계산 및 스크립트 실행을 지원하지 않기 때문입니다. 또한 데이터 영역을 사용하면 전체 JavaScript를 제공하는 대신 태그에서 액세스하는 데이터를 제어합니다. 변수 또는 DOM 액세스를 사용할 수 있습니다.
중복 태그 및 사용되지 않는 태그 삭제
페이지의 HTML 마크업에 태그가 태그 관리자를 통해 삽입될 뿐만 아니라
사용하지 않는 태그는 트리거 예외가 트리거될 수 있습니다. 태그를 일시중지하거나 삭제하면 컨테이너에서 코드가 삭제됩니다. 차단 기능은 아닙니다.
사용하지 않는 태그를 삭제하면 트리거와 변수도 해당 리소스 중 특정 사용자만 사용할 수 있는 경우 삭제할 수 있는지 검토 태그 사이에 있어야 합니다.
허용 및 거부 목록 사용
허용 및 거부 목록 태그, 트리거, 이벤트 기반 필터 등에 대해 변수입니다. 최적의 성능을 적용하는 데 사용할 수 있습니다. 기타 정책을 준수해야 합니다
허용 및 거부 목록은 데이터 영역을 통해 구성됩니다.
window.dataLayer = [{
'gtm.allowlist': ['<id>', '<id>', ...],
'gtm.blocklist': ['customScripts']
}];
예를 들어, 맞춤 HTML 태그, 자바스크립트 변수 또는 직접적인 DOM 액세스가 있습니다. 즉, 픽셀과 사전 정의된 태그만 데이터 레이어의 데이터와 함께 사용할 수 있습니다. 확실히 제한적이기는 하지만 이렇게 하면 훨씬 더 효과적이고 안전한 태그 관리자를 구현할 수 있습니다.
서버 측 태그 지정 사용 고려
서버 측 태그 지정으로 전환하는 것은 간단한 작업은 아니지만 특히 이러한 사이트를 보다 세부적으로 제어하려는 대형 사이트의 경우 데이터입니다. 서버 측 태그 지정은 클라이언트에서 공급업체 코드를 삭제하며, 이때 클라이언트에서 서버로 처리를 오프로드합니다.
예를 들어 클라이언트 측 태그 지정을 사용하는 경우 여러 애널리틱스로 데이터를 전송하는 경우 계정을 사용하면 클라이언트가 각 엔드포인트에 대해 별도의 요청을 시작해야 합니다. 반면에 서버 측 태그 지정을 사용하면 클라이언트가 여기서 이 데이터는 다른 Google 서버에 전달되고 애널리틱스 계정
서버 측 태그 지정은 일부 태그에서만 작동합니다. 태그 호환성은 공급업체에 따라 다릅니다.
자세한 내용은 서버 측 태그 지정에 대해 자세히 알아보세요.
컨테이너
태그 관리자는 일반적으로 여러 인스턴스 또는 '컨테이너'를 허용합니다. PersistentVolumeClaim에 설정할 수 있습니다 이렇게 하면 하나의 태그 내에서 여러 컨테이너를 제어할 수 있습니다. 관리자 계정
페이지당 하나의 컨테이너만 사용하세요.
여러 컨테이너 한 페이지에 여러 번 일괄 광고를 배치하면 심각한 성능 문제가 스크립트 실행을 위해 추가 오버헤드가 발생합니다 적어도 Kubernetes에서 컨테이너 코드 자체의 일부로 전달되므로 컨테이너 간에 재사용할 수 없습니다.
여러 컨테이너가 효과적으로 사용되는 경우는 드뭅니다. 그러나 잘 통제할 수 있는 경우 다음과 같은 경우에 사용할 수 있습니다.
- 가볍게 '초기 부하'를 더 무거운 '나중에 로드' container, 한 개의 큰 컨테이너가 아닌
- 기술 수준이 낮은 사용자가 제한된 컨테이너를 사용하는 데 사용할 수 없는 태그를 위한 컨테이너 내부에 있는 모든 행을 삭제합니다.
한 페이지에 여러 컨테이너를 사용해야 하는 경우 Google 태그 관리자를 따르세요. 여러 개의 광고 단위를 설정하는 방법에 대한 컨테이너를 사용하는 것입니다.
필요한 경우 별도의 컨테이너 사용
여러 속성 (예: 웹 앱 및 사용하는 컨테이너 수에 따라 워크플로에 도움이 되거나 방해가 될 수 있음) 생산성을 높여보세요. 성능에도 영향을 미칠 수 있습니다.
일반적으로 단일 컨테이너는 유사한 사이트에 게재됩니다. 예를 들어 모바일과 웹 앱이 유사한 기능을 제공할 수 있다면 앱이 다르게 구조화되어 더 효과적으로 관리됨 애플리케이션을 실행할 수 있습니다
단일 컨테이너를 너무 광범위하게 재사용하려고 하면 일반적으로 불필요하게 증가합니다. 복잡한 로직을 강제로 채택하여 컨테이너의 복잡성과 크기 태그 및 트리거를 관리합니다.
컨테이너 크기 확인
컨테이너의 크기는 태그, 트리거, 변수에 따라 결정됩니다. 작은 컨테이너는 여전히 페이지 성능에 부정적인 영향을 줄 수 있지만 컨테이너는 거의 확실히 알 수 있습니다.
컨테이너 크기를 태그 최적화의 핵심 측정항목으로 사용하면 안 됩니다. 사용량 하지만 컨테이너의 경우 컨테이너가 비정상 종료되고 잘 관리되지 않고 오용될 가능성이 있습니다
Google 태그 관리자 한도 컨테이너 200KB로 설정하고 140KB에서 시작하는 컨테이너 크기에 대해 경고합니다. 하지만 대부분의 사이트는 컨테이너를 이보다 훨씬 작게 유지하는 것을 목표로 합니다. 대상 평균 사이트 컨테이너는 약 50KB입니다.
컨테이너의 크기를 확인하려면 응답의 크기를 확인합니다.
https://www.googletagmanager.com/gtag/js?id=YOUR_ID에서 반환함 이
Google 태그 관리자 라이브러리 및
있습니다 Google 태그 관리자 라이브러리의 크기는 약 33KB입니다.
압축됩니다.
컨테이너 버전 이름 지정
컨테이너 버전 특정 시점의 컨테이너 콘텐츠 스냅샷입니다. 의미 있는 이름에 대한 간단한 설명과 함께 변경 사항을 적용하면 향후 성능을 더 쉽게 디버그할 수 있습니다. 있습니다
태그 지정 워크플로
태그 변경사항을 관리하면 태그에 페이지 성능에 부정적인 영향을 미칩니다.
배포하기 전에 태그 테스트
배포 전에 태그를 테스트하면 문제 (성능 및 그렇지 않을 경우 배송 전에 처리되어야 합니다.
태그를 테스트할 때 고려해야 할 사항은 다음과 같습니다.
- 태그가 올바르게 작동하고 있나요?
- 태그로 인해 레이아웃이 바뀌나요?
- 태그가 리소스를 로드하나요? 이러한 리소스는 얼마나 큰가요?
- 태그가 장기 실행 스크립트를 트리거하나요?
미리보기 모드
미리보기 모드를 사용하면 을 사용하면 태그 변경사항을 먼저 공개해야 합니다 미리보기 모드에는 태그 정보를 확인할 수 있습니다.
Google 태그 관리자의 실행 시간 차이 (약간 느림) 노출하는 데 필요한 추가 오버헤드로 인해 미리보기 모드에서 실행할 때 정보를 확인할 수 있습니다. 따라서 Web Vitals 측정값과 프로덕션에서 수집된 것과 비교하지 않는 것이 좋습니다. 하지만 이러한 불일치가 태그의 실행 동작에는 영향을 미치지 않으며, 있습니다.
독립형 테스트
태그를 테스트하는 또 다른 방법은 단일 태그(테스트 중인 태그)가 있는 컨테이너입니다. 이 테스트 설정은 더 적게 일부 문제 (예: 태그가 레이아웃을 유발하는지 여부)를 포착하지 못합니다. 더 쉽게 분리하고 측정의 영향을 더 쉽게 태그를 지정할 수 있습니다. Telegraph에서 효과적으로 격리하여 실적 외부 IP 주소가 있습니다.
태그 성능 모니터링
Google 태그 관리자 모니터링 API를 사용하여 실행에 대한 정보를 수집하기 위해 시간 확인할 수 있습니다 이 정보는 선택할 수 있습니다.
자세한 내용은 Google 태그 관리자를 만드는 방법을 참고하세요. 모니터링.
컨테이너 변경 시 승인 필요
퍼스트 파티 코드는 일반적으로 배포 전에 검토 및 테스트를 거칩니다. 태그를 동일하게 처리합니다. 2단계 인증 확인, 컨테이너 변경에 대한 관리자 승인이 필요한 경우 이거죠. 또는 2단계 인증을 요구하지는 않지만 계속 주시하고 싶은 경우 컨테이너를 설정하고 알림 선택한 컨테이너 이벤트에 대한 이메일 알림을 받을 수 있습니다.
주기적으로 태그 사용 감사
태그 작업의 어려움 중 하나는 시간: 태그가 추가되지만 삭제되는 경우가 거의 없습니다. 태그를 주기적으로 감사하는 것은 이 추세를 반전시킬 수 있는 방법이 있습니다. 이를 수행하기 위한 이상적인 빈도는 사이트의 태그가 업데이트되는 경우가 있습니다
소유자가 명확하게 알 수 있도록 각 태그에 라벨을 지정하면 누가 해당 태그에 대해 응답하고 여전히 필요한지 여부를 알릴 수 있습니다.
태그를 감사할 때 트리거와 변수를 정리하는 것을 잊지 마세요. 있습니다. 또한 성능 문제의 원인이 될 수도 있습니다.
자세한 내용은 타사 스크립트 유지 컨트롤을 참조하세요.