⭐ How to Add Your Blogger Site to Google Tag Manager (GTM) and Insert the HTML Tags into [head] and [body]

블로거
0

How to Add Your Blogger Site to Google Tag Manager (GTM) and Insert the HTML Tags into <head> and <body>

A complete SEO-optimized guide for fast AdSense approval and accurate GA4 tracking.

How to Add Your Blogger Site to Google Tag Manager

1. Introduction: Why You Must Install GTM Before GA4 Tracking

Google Tag Manager (GTM) is the most reliable and scalable way to manage tracking codes on a Blogger site.
Instead of placing multiple scripts manually, GTM allows you to:

  • Install GA4 Measurement ID
  • Add future tags without editing HTML again
  • Improve loading speed & SEO
  • Support Google AI indexing (cleaner HTML = better parsing)

This tutorial shows you how to:

  1. Create a GTM account
  2. Generate GTM installation codes
  3. Insert one tag into <head> and another into <body>
  4. Avoid common HTML errors in Blogger

This setup is required before the next tutorial:
👉 “Add GA4 Measurement ID in GTM & Publish Tags to Enable Real-Time Tracking”


2. Create a New GTM Account for Your Blog

Step 1 — Open Google Tag Manager

Go to: https://tagmanager.google.com

Click Create Account.

Google Tag Manager dashboard showing Create Account button | 구글 태그 관리자 계정 만들기 화면

3. Fill Out Account and Container Settings

Enter:

  • Account Name → unicosmos
  • Country → South Korea
  • Container Name → your domain (e.g., unicosmos.pe.kr)
  • Target Platform → Web

Then click Create.

Filling GTM account name, container name, and selecting Web platform | GTM 계정/컨테이너 생성 화면

4. Accept the Google Tag Manager Terms

Select your language → Click Yes.

Google Tag Manager Terms of Service confirmation popup | 태그 관리자 이용약관 동의 화면

5. Copy Your GTM Installation Codes

You will now see two required code blocks:

Code 1 — Goes inside <head> (as high as possible)

This is the main GTM script.

Code 2 — Goes immediately after <body>

This is the noscript backup tag.


Important Blogger HTML Warning (READ CAREFULLY)

Blogger automatically escapes certain characters such as:

&l

If you paste the GTM code without modification, Blogger will throw an XML error:

✔ Fix

Replace &l&amp; before pasting into the HTML editor.

After saving, Blogger may automatically convert characters again —
this is normal and not an error.

GTM installation code showing head and body script blocks | GTM 설치 코드(head/body) 화면


6. Open Blogger Theme HTML Editor

Go to: Blogger → Theme → ⠇Menu → Edit HTML

Blogger Theme section with Edit HTML option highlighted | 블로거 테마에서 HTML 편집 선택 화면

7. Insert GTM Code Into <head> Section

Paste Code 1 right under the <head> tag.

If you see errors, check the first characters of the script:

❗ Replace &l&amp;
✔ Save again
✔ Errors disappear
✔ Blogger auto-converts characters correctly

XML error caused by &l entity inside GTM script | GTM 코드 &l 오류로 인한 XML 에러 화면  Image 018

Corrected GTM script after replacing &l with & | &l → & 로 수정된 GTM 코드 화면

Blogger auto-converted GTM script after saving HTML | 저장 후 자동 변환된 GTM 코드 화면

8. Insert the Second GTM Code Right After <body>

Use Ctrl + F and search for: <body>

Paste Code 2 immediately below it.

GTM noscript tag inserted under the body tag in Blogger HTML | body 태그 아래 noscript 코드 삽입 화면


9. GTM Installation Completed

Your Blogger site now contains:

<head> GTM script
<body> noscript fallback
✔ Clean HTML readable by Google AI and SEO crawlers


⭐ What’s Next?

The next two high-value SEO tutorials:

1. Add GA4 Measurement ID in Google Tag Manager (Next Tutorial)

  • Create a GA4 configuration tag
  • Insert Measurement ID (G-XXXXXXX)
  • Trigger: All Pages
  • Publish & test in real-time report

2. Verify Real-Time Tracking in GA4

  • Check live visitors
  • Confirm GTM container is working

📌 Previous Step


댓글 쓰기

0 댓글

댓글 쓰기 (0)
3/related/default