# Install the GeoEngage tag

> Where the GeoEngage tag goes, why it has to run before the page paints, and how to find your API key and check it's working.

The tag loads the GeoEngage widget. Once it's on your pages, every rule you publish in the dashboard reaches your site without another deploy.

## The tag

```html
<!-- GeoEngage — place in <head>, above your content.
     Do not add async/defer: the widget must run before the page paints. -->
<script
  src="https://cdn.geoengage.app/ge.js"
  data-api-key="YOUR_API_KEY"
  data-require-consent="false"
></script>
```

`YOUR_API_KEY` is the key of the site the tag belongs to. You'll find it under **Sites** in the dashboard, with a button that copies the whole tag. Each site has its own key.

The tag records visits only on the website you registered for the site and its subdomains, plus `localhost` and your local network while you test. Copied onto any other website, it records nothing there. You can change a site's website under **Sites**.

| Attribute | What it does |
| --- | --- |
| `src` | The widget loader. Use it exactly as shown. |
| `data-api-key` | Required. Which of your sites this page belongs to. |
| `data-require-consent` | `"true"` holds all tracking until the visitor accepts. See [Consent mode](https://geoengage.app/docs/widget/consent). |
| `data-debug` | `"true"` logs what the widget does to the browser console. Leave it out on your live site. |

## Where it goes

Inside `<head>`, above your page content, on every page. Usually that means the one layout or template your pages share.

> [!WARNING]
> Don't add `async` or `defer` to the tag, don't load it through Google Tag Manager or another tag manager, and keep it out of plugins that delay or combine JavaScript.

All three make the widget run after the browser has painted your page. The widget hides the elements a rule is about to change until it has changed them, but it can only do that if it runs first. In our measurements, a tag at the end of `<body>` showed three frames of the unchanged page; in `<head>`, none.

The tag itself stays small: it does only what has to happen before the first paint, and loads the rest of the widget in parallel with your page.

## Guides by platform

- [Shopify](https://geoengage.app/docs/install/shopify) — layout/theme.liquid
- [WordPress](https://geoengage.app/docs/install/wordpress) — Site-wide header
- [Webflow](https://geoengage.app/docs/install/webflow) — Site settings → Custom code
- [Squarespace](https://geoengage.app/docs/install/squarespace) — Code injection → Header
- [Wix](https://geoengage.app/docs/install/wix) — Settings → Custom code
- [Next.js](https://geoengage.app/docs/install/nextjs) — app/layout.tsx
- [React](https://geoengage.app/docs/install/react) — index.html
- [Any HTML page](https://geoengage.app/docs/install/html) — Your shared <head>

## Check it's working

1. Open a page of your site in a private window. That skips your browser's cache and most blocking extensions.
2. View the page source and search for `data-api-key`. If it isn't there, the tag wasn't published.
3. In the browser console, run `window.GeoEngage?.version`. A version number means the widget loaded.

Still nothing? See [The tag isn't detected](https://geoengage.app/docs/troubleshooting#the-tag-isnt-detected).

---

Source: https://geoengage.app/docs/install