> ## Documentation Index
> Fetch the complete documentation index at: https://help.airbridge.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Google Tag Manager Setup - Web SDK

## Install the SDK using the Google Tag Manager

This document describes how to install the Airbridge Web SDK using [Google Tag Manager](https://tagmanager.google.com/).

For instructions on installing the Web SDK and sending events, refer to [Install the Web SDK](/en/developers/web-sdk#web-sdk-설치하기), [Send Web Events](/en/developers/web-sdk#웹-이벤트-전송하기).

### Install the Web SDK

1. In the container, click **Workspace → Overview → Add a new tag**, or **Workspace → Tags → New**.

<Frame>
  <img src="https://mintcdn.com/airbridge-help-center/U3lnWePNbnokgROM/asset/image/google-tag-manager-workspace-new-tag.png?fit=max&auto=format&n=U3lnWePNbnokgROM&q=85&s=686e3eb74e5a5a0c3b6bcede3cc837a6" alt="Web SDK - GTM - Installation 2" width="1396" height="1154" data-path="asset/image/google-tag-manager-workspace-new-tag.png" />
</Frame>

2. Click **Tag Configuration → Choose tag type → Custom HTML**.

<Frame>
  <img src="https://mintcdn.com/airbridge-help-center/U3lnWePNbnokgROM/asset/image/google-tag-manager-tag-trigger-configuration.png?fit=max&auto=format&n=U3lnWePNbnokgROM&q=85&s=59dc8eebc7aa00ec7770c35bbf0e5ec4" alt="Web SDK - GTM - Installation 2" width="1500" height="762" data-path="asset/image/google-tag-manager-tag-trigger-configuration.png" />
</Frame>

3. Write the Web SDK installation script in the **HTML** editor.

<Frame>
  <img src="https://mintcdn.com/airbridge-help-center/U3lnWePNbnokgROM/asset/image/google-tag-manager-web-sdk-custom-html.png?fit=max&auto=format&n=U3lnWePNbnokgROM&q=85&s=b208baf531841e6cda1b7ca237738cd6" alt="Web SDK - GTM - Installtion 3" width="1500" height="1041" data-path="asset/image/google-tag-manager-web-sdk-custom-html.png" />
</Frame>

4. The Web SDK `init` function must run before any other functions. In **Advanced Settings**, enter a **Tag firing priority** greater than 0 (e.g., 9999).
5. The Web SDK `init` function must run only once. In **Advanced Settings**, set **Tag firing options** to **Once per page**.

<Frame>
  <img src="https://mintcdn.com/airbridge-help-center/U3lnWePNbnokgROM/asset/image/google-tag-manager-firing-settings.png?fit=max&auto=format&n=U3lnWePNbnokgROM&q=85&s=15bf8b31898c2fed8c608d1f6e93b0a8" alt="Web SDK - GTM - Installation 4" width="722" height="894" data-path="asset/image/google-tag-manager-firing-settings.png" />
</Frame>

6. Click **Triggering** and select a trigger whose **Trigger Type** is **DOM Ready**.

<Frame>
  <img src="https://mintcdn.com/airbridge-help-center/U3lnWePNbnokgROM/asset/image/google-tag-manager-trigger-list.png?fit=max&auto=format&n=U3lnWePNbnokgROM&q=85&s=aaec2b76a89bcefd6361641c5869f0ab" alt="Web SDK - GTM - Installation 5" width="1500" height="208" data-path="asset/image/google-tag-manager-trigger-list.png" />
</Frame>

1. If no trigger has been created yet, click the **+ button** and select **Page View** → **DOM Ready** to create a trigger.

<Frame>
  <img src="https://mintcdn.com/airbridge-help-center/U3lnWePNbnokgROM/asset/image/google-tag-manager-empty-trigger.png?fit=max&auto=format&n=U3lnWePNbnokgROM&q=85&s=62ff0b8fbb59dbc5122d35b3cb1568fc" alt="Web SDK - GTM - Installation 6" width="1500" height="484" data-path="asset/image/google-tag-manager-empty-trigger.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/airbridge-help-center/U3lnWePNbnokgROM/asset/image/google-tag-manager-page-view-dom-ready-trigger.png?fit=max&auto=format&n=U3lnWePNbnokgROM&q=85&s=f630b88e008574d65d3c50836840a7c5" alt="Web SDK - GTM - Installation 7" width="1500" height="2254" data-path="asset/image/google-tag-manager-page-view-dom-ready-trigger.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/airbridge-help-center/U3lnWePNbnokgROM/asset/image/google-tag-manager-dom-ready-trigger.png?fit=max&auto=format&n=U3lnWePNbnokgROM&q=85&s=dec8e21939cc72e97c9c84d410df6e0f" alt="Web SDK - GTM - Installation 8" width="1500" height="281" data-path="asset/image/google-tag-manager-dom-ready-trigger.png" />
</Frame>

7. Click **Save** to create the tag.

<Frame>
  <img src="https://mintcdn.com/airbridge-help-center/U3lnWePNbnokgROM/asset/image/google-tag-manager-save-web-sdk-tag.png?fit=max&auto=format&n=U3lnWePNbnokgROM&q=85&s=6945b75858cf1b84ec23d55e5691c955" alt="Web SDK - GTM - Installation 9" width="1500" height="1061" data-path="asset/image/google-tag-manager-save-web-sdk-tag.png" />
</Frame>

8. Click **Submit** to apply the changes.

<Frame>
  <img src="https://mintcdn.com/airbridge-help-center/U3lnWePNbnokgROM/asset/image/google-tag-manager-preview-submit.png?fit=max&auto=format&n=U3lnWePNbnokgROM&q=85&s=e1835b5e1ec4397d906e08dae7c90289" alt="Web SDK - GTM - Installation 10" width="430" height="258" data-path="asset/image/google-tag-manager-preview-submit.png" />
</Frame>

9. Check if events appear in **Web Real-time Log** in the Airbridge dashboard.

### Track events

1. In the container, click **Workspace → Overview → Add a new tag**, or **Workspace → Tags → New**.

<Frame>
  <img src="https://mintcdn.com/airbridge-help-center/U3lnWePNbnokgROM/asset/image/google-tag-manager-workspace-new-tag.png?fit=max&auto=format&n=U3lnWePNbnokgROM&q=85&s=686e3eb74e5a5a0c3b6bcede3cc837a6" alt="Web SDK - GTM - Installation 2" width="1396" height="1154" data-path="asset/image/google-tag-manager-workspace-new-tag.png" />
</Frame>

2. Click **Tag Configuration → Choose tag type → Custom → Custom HTML**.

<Frame>
  <img src="https://mintcdn.com/airbridge-help-center/U3lnWePNbnokgROM/asset/image/google-tag-manager-tag-trigger-configuration.png?fit=max&auto=format&n=U3lnWePNbnokgROM&q=85&s=59dc8eebc7aa00ec7770c35bbf0e5ec4" alt="Web SDK - GTM - Installation 2" width="1500" height="762" data-path="asset/image/google-tag-manager-tag-trigger-configuration.png" />
</Frame>

3. Write the Web SDK event tracking script in the **HTML** editor.

<Frame>
  <img src="https://mintcdn.com/airbridge-help-center/U3lnWePNbnokgROM/asset/image/google-tag-manager-event-code.png?fit=max&auto=format&n=U3lnWePNbnokgROM&q=85&s=6df984f3d0f322bb18ba1e7dd0f6cde9" alt="Web SDK - GTM - Track Events" width="1500" height="1392" data-path="asset/image/google-tag-manager-event-code.png" />
</Frame>

4. Depending on when the event occurs, in **Advanced Settings**, set **Tag firing options** to **Unlimited**, **Once per event**, or **Once per page**.
5. Click **Triggering** and select a trigger that matches the situation in which the event occurs.
6. Click **Save** to create the tag.
7. Click **Submit** to apply the changes.
8. Check if events appear in **Web Real-time Log** in the Airbridge dashboard.

<link rel="alternate" hrefLang="en" href="https://help.airbridge.io/en/developers/google-tag-manager-web-sdk" />

<link rel="alternate" hrefLang="ko" href="https://help.airbridge.io/ko/developers/google-tag-manager-web-sdk" />
