안녕하세요. 인트렌치 컨설팅 유정훈 입니다.
이번 시간에는 홈페이지 전체 또는 특정 웹페이지에서 jQuery 를 사용할 수 없어 태깅 진행이 어려울 경우, GTM으로 안전하게 jQuery 라이브러리를 추가하여 사용할 수 있는 방법에 대해 알아보도록 하겠습니다.
설정은 아래 단계부터 천천히 진행하도록 하겠습니다!
Step 1) 먼저 GTM 항목 중 [Templates] 항목을 클릭 합니다.
[그림 1]
Step 2) 그 다음 Tag Templates 영역에서 [Search Gallery] 를 클릭 합니다. 이후 아래와 같이 GTM 에 추가할 수 있는 템플릿들이 나열됩니다.
[그림 2]
Step 3) 나열된 템플릿 중 [CDNJS – Hosted Libraries] 를 클릭하고 이후 화면에서 [Add to workspace] 를 클릭하여 템플릿을 추가합니다. 참고로 Tag Templates 영역에 추가되는 템플릿은 태그 생성 시 태그 유형에서 맞춤 태그 영역에 포함됩니다.
[그림 3]
[그림 4]
이 단계까지 오셨다면 jQuery 라이브러리를 적용하기 위한 준비과정은 모두 마쳤습니다! 이제 GTM 에서 jQuery 라이브러리를 적용해 보겠습니다.
Step 4) 먼저 태그 영역에서 [New] 를 클릭하여 태그 유형 중 Custom 영역에서[CDNJS – Hosted Libraries] 를 선택합니다.
[그림 5]
[그림 6]
Step 5) Library type 영역에서 [Enter path manually] 항목을 선택합니다.
[그림 7]
Step 6-1) Full path to library 입력란에 입력할 jQuery CDN 경로는 https://cdnjs.com/libraries/jquery 에서 확인합니다.
[그림 8]
Step 6-2) Full path to library 입력란에 확인한 jQuery CDN 경로를 입력합니다.
Step 7) 다음 [save] 를 클릭하여 저장합니다.
[그림 9]
이로써 jQuery 라이브러리를 사용하기 위한 모든 과정을 마쳤습니다.
이제 정상적으로 GTM에서 설정한 내용이 홈페이지에 잘 반영이 되는지 확인해 볼까요?
확인하기 위해 GTM 미리보기 모드 실행 또는 GTM 게시를 하겠습니다.
확인결과, 아래 [그림 10] 과 같이 GTM 태그에 설정한 jQuery 3.5.1 버전이 홈페이지에 정상적으로 설정되어 있음이 확인됩니다.
[확인사항]
1) Network 상 jQuery 를 정상적으로 로드하고 있는지 확인
2) 크롬브라우저 개발자도구 > 콘솔창에 jQuery.fn.jquery 입력하여 홈페이지에 적용된 jQuery 버전이 설정한 버전이 맞는지 확인
[그림 10]
이번 시간에는 GTM을 통해 jQuery 라이브러리를 설정하는 방법에 대해 알아보았습니다.
GTM 태깅 진행 시 보통 홈페이지에서 jQuery 를 사용하지 못할 경우 jQuery 라이브러리 전체 스크립트를 GTM 맞춤 HTML 태그에 적용하여 사용합니다.
이 방법이 익숙하지 않으면 출처를 알 수 없는 jQuery 라이브러리 스크립트를 적용하기 쉬우며, 보안상 문제가 발생하는 경우가 생길 수 있습니다.
이를 방지하기 위해 본 컨텐츠에서 GTM 템플릿 갤러리에 등록되어 검증된 템플릿을 사용하여 jQuery 라이브러리를 홈페이지에 적용하는 방법을 다루어 보았습니다.
GTM를 이용해 안전하고 검증된 방법으로 jQuery 라이브러리를 적용하고자 하시는 분들께 도움이 되기를 바랍니다.