# Google Tag Manager

## How to Integrate:

* Go to the [integrations page](https://app.storylane.io/integrations) in the Storylane Dashboard.
* Navigate to the Google Tag Manager integration, and click 'Connect' 
* Enter your Google Tag Manager Container ID in the field (see the screenshot below)

<div align="left"><figure><img src="https://2431356420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN8hWd9k2Pbb6YSWO4pUQ%2Fuploads%2FDaBqpkRSjPeXAJV0ydfM%2FScreenshot%202025-11-21%20at%2015.53.51.png?alt=media&#x26;token=55e6c1ed-4a3d-4edc-9fad-4635e2a91768" alt="" width="563"><figcaption></figcaption></figure></div>

* Once finished, the status will change to 'Connected'

<div align="left"><figure><img src="https://2431356420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN8hWd9k2Pbb6YSWO4pUQ%2Fuploads%2Fv4c9RDxFEdtNySnLZbqf%2FScreenshot%202024-08-14%20at%2020.20.17.png?alt=media&#x26;token=36aac965-2100-4f13-85b8-0bd038c026ba" alt="" width="375"><figcaption></figcaption></figure></div>

* If you want to make any change to the container ID, or uninstall the integration, just click on the settings icon.

<div align="left"><figure><img src="https://2431356420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN8hWd9k2Pbb6YSWO4pUQ%2Fuploads%2FDM3IlwpK30YDmvEda7PX%2FScreenshot%202024-08-14%20at%2020.23.02.png?alt=media&#x26;token=dcbc5cfa-74df-4dbf-a353-3fda63abee46" alt="" width="375"><figcaption></figcaption></figure></div>

### Below are the events you will receive in GTM

> **To verify the Integration .** We recommend you install [Google Tag Assistant](https://chrome.google.com/webstore/detail/tag-assistant-companion/jmekfmbnaedfebfnmakmokmlfpblbfdm) to verify the events coming from your page.

**Demo opened -** sent when the demo is opened&#x20;

```json
// Some code
dataLayer.push({
  event: "sl_demo_open",
  demo_id: "ie9jadfjhdku",
  demo_name: "Storylane Overview (homepage)",
  demo_url: "https://app.storylane.io/share/ie9jadfjhdku",
  referrer: "https://www.google.com",
  host_url: "https://www.storylane.io",
  gtm.uniqueEventId: 24
})
```

**Lead captured** - sent when a lead is captured or identified

```json
// Some code
dataLayer.push({
  event: "sl_lead_identify",
  demo_id: "ie9jadfjhdku",
  demo_name: "Storylane Overview (homepage)",
  demo_url: "https://app.storylane.io/share/ie9jadfjhdku",
  referrer: "https://www.google.com",
  host_url: "https://www.storylane.io",
  email: "nalin@storylane.io",
  gtm.uniqueEventId: 28
})
```

**Demo Engaged** **(10, 25, 50, 75, 100)** - sent on demo engagement. These events are triggered when user either spends *10 seconds or finishes 10 percent of demo* (whichever comes first) . They are also sent similarly at 25, 50, 75 and 100 intervals

*We recommend using this metric to evaluate lead intent and scoring*&#x20;

```json
dataLayer.push({
  event: "sl_10_demo_engaged",
  demo_id: "ie9jadfjhdku",
  demo_name: "Storylane Overview (homepage)",
  demo_url: "https://app.storylane.io/share/ie9jadfjhdku",
  seconds_spent: 5,
  percent_viewed: 10,
  referrer: "https://www.google.com",
  host_url: "https://www.storylane.io",
  gtm.uniqueEventId: 56
})

dataLayer.push({
  event: "sl_25_demo_engaged",
  demo_id: "ie9jadfjhdku",
  demo_name: "Storylane Overview (homepage)",
  demo_url: "https://app.storylane.io/share/ie9jadfjhdku",
  seconds_spent: 13,
  percent_viewed: 25,
  referrer: "https://www.google.com",
  host_url: "https://www.storylane.io",
  gtm.uniqueEventId: 64
})

dataLayer.push({
  event: "sl_50_demo_engaged",
  demo_id: "ie9jadfjhdku",
  demo_name: "Storylane Overview (homepage)",
  demo_url: "https://app.storylane.io/share/ie9jadfjhdku",
  seconds_spent: 50,
  percent_viewed: 40,
  referrer: "https://www.google.com",
  host_url: "https://www.storylane.io",
  gtm.uniqueEventId: 77
})

dataLayer.push({
  event: "sl_75_demo_engaged",
  demo_id: "ie9jadfjhdku",
  demo_name: "Storylane Overview (homepage)",
  demo_url: "https://app.storylane.io/share/ie9jadfjhdku",
  seconds_spent: 66,
  percent_viewed: 75,
  referrer: "https://www.google.com",
  host_url: "https://www.storylane.io",
  gtm.uniqueEventId: 84
})

dataLayer.push({
  event: "sl_100_demo_engaged",
  demo_id: "ie9jadfjhdku",
  demo_name: "Storylane Overview (homepage)",
  demo_url: "https://app.storylane.io/share/ie9jadfjhdku",
  seconds_spent: 80,
  percent_viewed: 100,
  referrer: "https://www.google.com",
  host_url: "https://www.storylane.io",
  gtm.uniqueEventId: 101
})

```

**Demo CTA clicked** - sent when a user clicks a CTA button and is directed to an external URL

```
// Some code
dataLayer.push({
  event: "sl_open_external_url",
  demo_id: "ie9jadfjhdku",
  demo_name: "Storylane Overview (homepage)",
  demo_url: "https://app.storylane.io/share/ie9jadfjhdku",
  step_id: "b904fd92-e84d-4041-8aea-64aec3eb0b55",
  step_index: 0,
  chapter_id: "73eb3b80-fce0-4ad3-9807-894b10a59fc7",
  chapter_name: "Add Guides to Navigate Buyers",
  ext_url: "https://www.storylane.io/request-demo?utm_source=website&utm_medium=solutions-page&utm_campaign=homepage",
  referrer: "https://www.google.com",
  host_url: "https://www.storylane.io",
  gtm.uniqueEventId: 112
})
```

***

## GTM Tag setup to track conversion

**Step 1:**  **Tag setup**

1. Go to **Tags > New**
2. Choose tag type:
   * GA4 Event
   * Custom HTML (for advanced needs)
3. Name your tag (e.g., `Demo Open Conversion`)
4. Set parameters (e.g., Event Name: `demo_open`)
5. Attach your trigger (created in Step 3)

### <sup>**Step 2: Create a Trigger**</sup>

| Setting         | Example                          |
| --------------- | -------------------------------- |
| Type            | Custom Event                     |
| Event Name      | `sl_demo_open`                   |
| Optional Filter | Page URL contains `storylane.io` |

***

### <sup>**Step 3: Add Data Layer Variables**</sup> <sup>*(Optional but powerful)*</sup>

Use this to track things like demo ID or name for more granular data.

| Variable Type       | Key         | Recommended Name  |
| ------------------- | ----------- | ----------------- |
| Data Layer Variable | `demo_id`   | `DLV - demo_id`   |
| Data Layer Variable | `demo_name` | `DLV - demo_name` |

***

View Interactive Demo Setup

{% @storylane/embed subdomain="app" linkValue="b1gzlx3wpkub" url="<https://app.storylane.io/share/b1gzlx3wpkub>" %}

{% hint style="info" %}
Still need help? Reach out to <support@storylane.io> & we will be happy to assist!
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.storylane.io/integrations/integrations/google-tag-manager.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.