Question 1

GTM Sandboxed API IntelliSense

Accepted Answer

This guide shows how to use the included TypeScript declaration files (.d.ts) to enable IntelliSense features, such as autocompletion and hover documentation, for Google Tag Manager’s Sandboxed JavaScript APIs in your code editor.

Question 2

What is GTM Sandboxed API IntelliSense?

Accepted Answer

GTM Sandboxed API IntelliSense is TypeScript declarations for autocompletion of Google Tag Manager APIs in code editors.

Google Tag Manager uses an isolated JavaScript environment with a limited set of APIs for security reasons. Instead of standard fetch(), document.cookie, etc., special functions such as sendHttpRequest() and getCookieValues() are available.

Question 3

The challenge

Accepted Answer

Standard code editors are unaware of these APIs, so they lack autocomplete, parameter hints, and documentation, making it difficult to identify errors.

IntelliSense solves all these problems.

Question 4

Check whether the package managers for Node.js are installed

Accepted Answer

To check if you have Node.js and npm installed and their installed version, run the following commands:

node -v
npm -v

Alternatively, if you prefer to use pnpm over npm, verify that pnpm is installed. Run the command:

pnpm --version

2. If you don't have them installed, follow the instructions:

- downloading and installing Node.js and npm
- pnpm installation

3. Install the type definitions using a package manager you’ve chosen (npm or pnpm) in the root of the folder that contains your GTM template JavaScript file:

pnpm install -D stape-gtm-api-types
# or
npm install --save-dev stape-gtm-api-types

Question 5

Activate IntelliSense in your editor

Accepted Answer

There are two ways to use IntelliSense:

Question 6

Method 1: Triple-Slash Reference (File-by-File)

Accepted Answer

This approach is helpful if you’d rather not create a jsconfig.json file (as described in Method 2 below).

1. To activate IntelliSense for GTM Sandboxed API code, you’ll need to place a specific comment at the very top of each JavaScript file.

Make sure to include this comment exactly as shown (with the triple slashes) at the beginning of every JavaScript file where you want IntelliSense.

- For Web GTM Sandboxed API:

/// &lt;reference types="stape-gtm-api-types/web-gtm-sandboxed-apis" /&gt;

// Your GTM template code starts here...
const copyFromDataLayer = require('copyFromDataLayer');

- For Server GTM Sandboxed APIs:

/// &lt;reference types="stape-gtm-api-types/server-gtm-sandboxed-apis" /&gt;

// Your GTM template code starts here...
const getAllEventData = require('getAllEventData');

2. Restart or reload your editor window if IntelliSense does not appear immediately.

Question 7

Method 2: Using jsconfig.json (Project-Wide)

Accepted Answer

1. Create a jsconfig.json file with the following content in the root directory of your project, where your template code is located.

- For Web GTM Sandboxed APIs:

{
  "compilerOptions": {
    "paths": {
      "*": ["./node_modules/stape-gtm-api-types/web-gtm-sandboxed-apis"]
    }
  },
  "include": ["**/*"]
}

- For Server GTM Sandboxed APIs

{
  "compilerOptions": {
    "paths": {
      "*": ["./node_modules/stape-gtm-api-types/server-gtm-sandboxed-apis"]
    }
  },
  "include": ["**/*"]
}

2. Restart or reload your editor window if IntelliSense does not appear immediately.

Regardless of the method you’ve chosen, make sure to periodically run the following command in the folder that contains your GTM template JavaScript files. This will make sure you receive any Intellisense updates.

npm update
# or
pnpm update

Question 8

Start Coding

Accepted Answer

With IntelliSense enabled, your code editor will now:

- Suggest GTM API names as you type
- Show parameter info for GTM-specific functions
- Display documentation and type hints automatically

Question 9

GTM Sandboxed API IntelliSense examples

Accepted Answer

Check examples demonstrating GTM Sandboxed API IntelliSense on our GitHub repository.

Question 10

Conclusion

Accepted Answer

The Google Tag Manager Sandboxed API IntelliSense package is an essential tool for developers working with GTM custom templates. By providing TypeScript declaration files for GTM's unique sandboxed JavaScript environment, it enables autocompletion, inline documentation, and error detection in code editors. This significantly improves coding efficiency, reduces mistakes, and speeds up template development.