# Installing airgap.js: Synchronous vs Asynchronous (/docs/consent-management/configuration/installing-airgap/installing-airgap-js) This guide gives you the exact setup for both ways to load `airgap.js`, with complete, paste-ready markup. ## The one rule [#the-one-rule] `airgap.js` regulates network requests, cookies, and DOM insertions like a client-side firewall. It can only regulate what happens **after** it initializes. **Nothing may track before** **`airgap.js`** **is ready.** There are exactly two correct ways to honor that rule: 1. **Synchronous:** load `airgap.js` as the very first script, so it is already regulating by the time anything else runs. You then add trackers normally. 2. **Asynchronous:** load `airgap.js` off the critical path and gate every tracker, so none start until `airgap.js` is ready. ### Which should you use? [#which-should-you-use] **Use synchronous loading.** It is the simplest setup that is correct by default: airgap regulates everything after it, so you don't have to touch your tracker code. The one ` ``` ### Notes and gotchas (sync) [#notes-and-gotchas-sync] - **Keep** **`data-cfasync="false"`.** Cloudflare Rocket Loader and similar tools will otherwise defer/reorder the tag and break the "first script" guarantee. - **Put airgap above resource hints that fetch**, such as ``/`preconnect` for tracker hosts. - **Using a tag manager (e.g. GTM)?** Put the `airgap.js` tag above the container snippet so the non-Google tags it injects are regulated at the network level. Don't rely on the tag manager itself to enforce consent; it's leaky. For Google tags, use Consent Mode (see the Google Consent Mode section below). - **Server-rendered React, Next.js, or Hydrogen?** Render this exact tag as the first element of `` on both server and client. If the tag only exists in server HTML, hydration can remove it and break initialization. If that's hard, use async loading (Part 2) or see the [React Snippets](../../reference/airgap/react-snippets.mdx) guide. ## Option 2: Asynchronous loading [#option-2-asynchronous-loading] **How it works:** you load `airgap.js` off the critical path. Until it's ready, nothing is regulated, so you must hold back every tracker and start each one only once airgap signals ready. **Recommended pattern:** a tiny inline pre-init stub (synchronous, so the ready queue exists immediately) that exposes a memoized `getAirgap()` promise. Every tracker initializes inside `await getAirgap()`, so airgap loads once and trackers start only when it's regulating. ### Step 1: Get your bundle ID [#step-1-get-your-bundle-id-1] Same as above, from [Developer Settings → Installation](https://app.transcend.io/consent-manager/developer-settings/installation). ### Step 2: Add the stub + `getAirgap()` helper as the first script in `` [#step-2-add-the-stub--getairgap-helper-as-the-first-script-in-head] This inline block is synchronous and tiny. It defines the ready queue and injects `airgap.js` asynchronously. Put it first so the queue exists before anything else runs. ### Step 3: Load and initialize every tracker inside `getAirgap()` [#step-3-load-and-initialize-every-tracker-inside-getairgap] Load each tracker's library and start it inside the ready gate, using a small `loadScript` helper, so even the library fetch waits until `airgap.js` is regulating. Nothing that touches the network may run outside the gate. ### Complete example [#complete-example-1] ```html ``` ### Notes and gotchas (async) [#notes-and-gotchas-async] **Beware:** you are now importing `airgap.js` asynchronously. Since it can only regulate traffic after it loads, **you are responsible for ensuring no trackers load before** **`airgap.js`.** The caveat applies only to the window before init; once airgap is ready, quarantine and replay handle later consent changes on the same page. - **Load tracker libraries inside the gate, too.** Don't add ungated tracker ` ``` The snippet above is for sites that load Google tags directly with gtag.js. With Google Tag Manager, keep your standard container snippet; the one thing to change is placement. Google tells you to paste the GTM container "as high in `` as possible," but with Transcend the denied defaults and `airgap.js` go above the GTM container, so airgap regulates everything GTM injects. The GTM `` `

``` Prefer not to touch page code? Set the defaults inside GTM on the built-in **Consent Initialization – All Pages** trigger, or load airgap from within GTM using Transcend's GTM template. Basic vs Advanced mode, the purpose mapping, and the full GTM template are covered in the [Google Consent Mode guide](../consent-integrations/google-consent-mode.mdx). ## Verify your install (either approach) [#verify-your-install-either-approach] 1. **Network tab:** hard-reload and confirm no tracker request fires before `airgap.js`. In sync mode, `airgap.js` is the first request; in async mode, no tracker should hit the network until after it. 2. **`airgap.export()`:** run it in the console before and after granting consent on the same page. Blocked requests should appear while unconsented and drain after consent. (If they appear but never drain, you have an initialization/hydration problem.) 3. **Google Tag Assistant** (if using GCM): confirm you do _not_ see "A tag read consent state before a default was set." See [Consent Management Debugging and Testing](../../testing-and-troubleshooting/debugging-and-testing.mdx) for more. ## Related docs [#related-docs] - [Load airgap.js Asynchronously](./loading-asynchronously.mdx) - [airgap.js Load Options Glossary](../../reference/airgap/load-options.mdx) - [React Snippets for airgap](../../reference/airgap/react-snippets.mdx) - [Google Consent Mode](../consent-integrations/google-consent-mode.mdx) - [airgap.js API Reference](../../reference/airgap/api.mdx) - [Consent Management Quickstart](../../quickstart.mdx)