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

# Google Tag Manager

> Integrate Navattic events with Google Tag Manager for flexible tracking configurations.

Follow these steps to integrate Navattic JS events with <img src="https://www.svgrepo.com/show/353827/google-tag-manager.svg" alt="GTM Logo" className="h-4 w-4 inline-block m-0 -mt-px" /> **Google Tag Manager**:

<Steps>
  <Step title="Create and configure the Navattic JS tag">
    In Google Tag Manager, create a new tag:

    1. Go to **Tags** → **New** and name it "Navattic JS"
    2. Under **Tag Configuration**, select **Custom HTML**
    3. Navigate to Navattic Settings > [Navattic JS](https://app.navattic.com/u/settings/js) and copy the installation code
    4. Paste the code into the Custom HTML field

    <Frame>
      <img src="https://mintcdn.com/navattic-app/bR17QzPUtrfb78_J/images/navattic-js-implementation-checklist.png?fit=max&auto=format&n=bR17QzPUtrfb78_J&q=85&s=d14f07134792c1b345dc4c5d315296ff" width="1748" height="1558" data-path="images/navattic-js-implementation-checklist.png" />
    </Frame>

    <Note>
      If you have **GA4 + Google Tag Manager integration** enabled in Navattic JS configuration, events will be automatically tracked. Otherwise, add this to your installation snippet:

      <Expandable title="push events to dataLayer">
        ```html theme={null}
        <script>
            navattic.onEvent(function(event){
                dataLayer.push({
                  event: "navattic_event",
                  data: navattic.flatten(event)
                });
            });
        </script>
        ```
      </Expandable>
    </Note>

    <Accordion title="View complete GTM tag code">
      ```html theme={null}
      <script>
          void 0 === window.navatticQueue &&
            ((window.navatticQueue = []),
            (window.navattic = new Proxy(
              {},
              {
                get: function n(t, u, e) {
                  return function () {
                    for (var n = arguments.length, t = Array(n), e = 0; e < n; e++)
                      t[e] = arguments[e];
                    return navatticQueue.push({ function: u, arguments: t });
                  };
                },
              }
            )));
      </script>
      <script async src="https://js.navattic.com/sdk.js?key=<your_key>"></script>
      <script>
          navattic.onEvent(function(event){
              dataLayer.push({
                event: "navattic_event",
                data: navattic.flatten(event)
              });
          });
      </script>
      ```
    </Accordion>

    5. Under **Triggering**, select **All Pages** or create a custom trigger for specific pages
    6. Click **Save**

    <Frame>
      <img src="https://mintcdn.com/navattic-app/eEo16-sBVsd0fYuf/images/gtm-trigger.png?fit=max&auto=format&n=eEo16-sBVsd0fYuf&q=85&s=26e96954e7b9921bc13051793ff04010" alt="" width="1848" height="364" data-path="images/gtm-trigger.png" />
    </Frame>
  </Step>

  <Step title="Create a custom event trigger">
    Set up a trigger to capture Navattic events:

    1. Go to **Triggers** → **New**
    2. Under **Trigger Configuration**, select **Custom Event**
    3. Set **Event name** to `navattic_event`
    4. Under **This trigger fires on**, select **Some Custom Events**
    5. Add condition: `{{Event}}` equals `navattic_event`
    6. Save the trigger

    <Frame>
      <img src="https://mintcdn.com/navattic-app/eEo16-sBVsd0fYuf/images/gtm-trigger-save.png?fit=max&auto=format&n=eEo16-sBVsd0fYuf&q=85&s=387b130becd2e2df00d0423f92b9bb96" alt="" width="1848" height="642" data-path="images/gtm-trigger-save.png" />
    </Frame>
  </Step>

  <Step title="Create data layer variables">
    Define variables for the below Navattic event fields:

    | Variable Name       | Type                | Data layer variable name |
    | ------------------- | ------------------- | ------------------------ |
    | Navattic event type | Data Layer Variable | data.type                |
    | Navattic demo name  | Data Layer Variable | data.project\_\_name     |
    | Navattic flow name  | Data Layer Variable | data.flow\_\_name        |
    | Navattic step name  | Data Layer Variable | data.step\_\_name        |

    1. Go to **Variables** → **User-Defined Variables** → **New**
    2. For each variable in the table above:
       * Set variable name
       * Set **Variable Type** to **Data Layer Variable**
       * Enter the corresponding data layer variable name (e.g., `data.type`, `data.project__name`)
    3. Save each variable

    <Frame>
      <img src="https://mintcdn.com/navattic-app/eEo16-sBVsd0fYuf/images/google-tag-manager-variables.png?fit=max&auto=format&n=eEo16-sBVsd0fYuf&q=85&s=dcd1b560cedfb2821e25f746bb051ccd" alt="" width="1852" height="596" data-path="images/google-tag-manager-variables.png" />
    </Frame>

    <Info>
      These variables will be used in the following step to make the Navattic event data accessible to your GA4 event tag.
    </Info>
  </Step>

  <Step title="Configure GA4 event tag">
    Create a tag to send Navattic events to GA4:

    1. Go to **Tags** → **New** and name it "Navattic event tag"
    2. Under **Tag Configuration**, select **Google Analytics: GA4 Event**
    3. Enter your **Measurement ID** for GA4
    4. Set **Event Name** to `navattic_engagement`
    5. Add **Event Parameters**:

    | Event Parameter   | Data layer variable name  |
    | ----------------- | ------------------------- |
    | navatticEventType | `{{Navattic event type}}` |
    | navatticDemoName  | `{{Navattic demo name}}`  |
    | navatticFlowName  | `{{Navattic flow name}}`  |
    | navatticStepName  | `{{Navattic step name}}`  |

    6. Under **Triggering**, select the custom event trigger from Step 2
    7. Save the tag

    <Frame>
      <img src="https://mintcdn.com/navattic-app/eEo16-sBVsd0fYuf/images/google-tag-manager-ga4-event.png?fit=max&auto=format&n=eEo16-sBVsd0fYuf&q=85&s=9a5cbd5cd164a1c7ae923d78b1bdbb52" alt="" width="1838" height="1312" data-path="images/google-tag-manager-ga4-event.png" />
    </Frame>
  </Step>

  <Step title="Preview, test, and publish">
    Click "Preview" in Tag Manager and navigate to a page with a demo.

    When you engage with the demo, you should see "navattic\_event" and "navattic\_engagement" events with the variables we defined above populated with the correct values for your demo.
  </Step>
</Steps>