GoogleTagManager를 사용하여 HTML 요소 추가 또는 제거

정면

웹 응용 프로그램에서 특정 조건에서만 화면을 사용자 정의할 때 원본 코드에 if문장을 많이 쓰고 싶지 않아서 Google TagManager(이하 GTM)를 사용하기로 했습니다.
Analytics와 조합하여 사용하는 GTM(일반적으로 생각)은 자바스크립트를 사용하여 원본 코드 주체를 수정하지 않은 상황에서 HTML 요소를 사용자 정의할 수 있다.

표식

GTM에서 새 레이블 생성을 누른 다음 레이블 설정을 선택합니다.

태그 유형에 대해 HTML 사용자 정의를 선택합니다.

태그 설정

HTML에 Javascript를 기록합니다.
이번에는 간단하게 div 요소의 추가를 진행한다.요소를 삭제하거나 CSS 스타일을 변경할 수도 있습니다.
Javascript는 "라이브러리를 사용하지 않는 소스 JavaScript를 사용하여 DOM 작업"을 참조했습니다.

<script>
  var container = document.querySelector('.test-tag');
  container.innerHTML = '<div>グーグルタグマネージャテスト挿入</div>';
</script>

세부 설정부터 태그 발송의 우선순위를 100으로 설정합니다.
여러 개의 탭을 설정한 경우 세부 설정에서 각 탭에 대한 우선순위와 정렬을 할 수 있기 때문에 여러 가지 조정이 효과적이다.

트리거 만들기

태그 생성이 완료되면 트리거 선택의 오른쪽 위 모서리에 있는 + 태그에서 새 트리거를 추가합니다.
이번 트리거는 페이지 보기 > 페이지 보기입니다.

예제에서는 특정 ID의 페이지에만 사용자 정의 화면이 표시되도록 설정하려면 "일부 페이지 보기"를 선택하여 조건을 기록합니다.

사이트에 삽입용 요소를 넣다

<div class="test-tag"></div>

정보를 삽입할 위치에 GTM에서 지정한 클래스를 넣습니다.
이것밖에 없어요.
미리보기에서 문제가 없으면 공개합니다.
형상 및 토폴로지 구조를 정확하게 미리보고 게시합니다.

이점

if문장에서 원본 코드를 오염시키지 않을 수 있습니다.

배포할 필요가 없습니다.이미지와 링크의 추가도 간단합니다.

상당히 유연하게 설정할 수 있기 때문에 익숙해지면 소스를 쓰는 것보다 훨씬 원활하다.

GTM의 버전 관리도 매우 편리하다.

운용자는 개발자와 달리 운용자는 정기적으로 미세한 변경을 하는 곳을 수정할 수 있다(뉴스 등?).

결점

부주의로 고장이 났을 때 GTM에 기술된 script인지 원본 코드 주체인지 검증하는 것이 좀 번거롭다.

사용 중인 학급과 ID를 제대로 관리하지 않으면 나중에 혼란스러워지기 쉽다."어, 이 반 소용없어? 필요 없으면 꺼도 돼?"

Git에서 소스 코드와 함께 버전 관리를 통합할 수 없습니다.

총결산

쿠키 사용을 촉발한 일로 LP페이지를 밟은 고객은 표에 운동코드 입력란을 표시하지만, LP페이지를 보지 않은 고객에게는 운동코드 입력란이 숨겨져 있습니다!
Javascript에 오류가 발생하면 브라우저에서 경고를 보냅니다!
QA 페이지의 스크롤 거리가 긴 상태에서 채팅을 도와주는 안내를 받습니다!
잠깐만, 여러 가지 일은 GTM이 한 거야.
편리하지만 팀 개발은 관리가 좀 번거롭다는 인상을 줘서 잘 사용하고 싶어요.