---
title: "Userflow.js installation in Google Tag Manager"
slug: "userflowjs-installation-in-google-tag-manager"
description: "Learn how to install Userflow.js in Google Tag Manager and pass user attributes for targeted flows, enhancing user experience effectively."
updated: 2025-12-29T18:55:06Z
published: 2025-12-29T18:55:06Z
---

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

# Userflow.js installation in Google Tag Manager

You can install Userflow.js via [Google Tag Manager](http://tagmanager.google.com/) (GTM).

## Requirements

Your GTM account must have an existing variable that contains the currently signed-in user’s ID. Optionally, you can also use variables for other attributes such as the user’s name, email, when they signed up etc.

In this guide, we assume you’ve named your user ID variable `userId`. If you’ve used a different name, then please replace the `{{userId}}` part in the snippet below accordingly.

## Installation

Follow these steps:

1. Sign in to Userflow.
2. Go to **Settings > Environments**.
3. Note down your **Userflow.js Token** (you’ll need it in a later step). Hint: It starts with `ct_.`
4. Sign into your Google Tag Manager account.
5. Go to **Tags**.
6. Click **New**.
7. Click **Tag Configuration**.
8. Click **Custom HTML**.
9. In the **HTML** field, paste the code below (make sure to replace `USERFLOW_TOKEN` with the real token you noted down in step 3).
10. Click **Triggering**.
11. Click **All pages**, or another more suitable trigger if you have one.
12. Click **Save** and give the tag a name, such as “Userflow”.

```plaintext
<script>
!function(){var e="undefined"==typeof window?{}:window,t=e.userflow,r=e.history;function n(t,n){return function(){var o=new CustomEvent(n),s=Array.prototype.slice.call(arguments),a=t.apply(r,s);return e.dispatchEvent(o),a}}if(r){e.__userflowStatePatched=!0;var o=r.pushState,s=r.replaceState;r.pushState=n(o,"userflow:pushstate"),r.replaceState=n(s,"userflow:replacestate")}if(!t){var a="https://js.userflow.com/",l=null;t=e.userflow={_stubbed:!0,load:function(){return l||(l=new Promise((function(t,r){var n=document.createElement("script");n.async=!0;var o=e.USERFLOWJS_ENV_VARS||{};"es2020"===(o.USERFLOWJS_BROWSER_TARGET||function(e){for(var t=[[/Edg\//,/Edg\/(\d+)/,80],[/OPR\//,/OPR\/(\d+)/,67],[/Chrome\//,/Chrome\/(\d+)/,80],[/CriOS\//,/CriOS\/(\d+)/,100],[/Safari\//,/Version\/(\d+)/,14],[/Firefox\//,/Firefox\/(\d+)/,74]],r=0;r<t.length;r++){var n=t[r],o=n[0],s=n[1],a=n[2];if(e.match(o)){var l=e.match(new RegExp(s));if(l&&parseInt(l[1],10)>=a)return"es2020";break}}return"legacy"}(navigator.userAgent))?(n.type="module",n.src=o.USERFLOWJS_ES2020_URL||a+"es2020/userflow.js"):n.src=o.USERFLOWJS_LEGACY_URL||a+"legacy/userflow.js",n.onload=function(){t()},n.onerror=function(){document.head.removeChild(n),l=null;var e=new Error("Could not load Userflow.js");console.warn(e.message),r(e)},document.head.appendChild(n)}))),l}};var u=e.USERFLOWJS_QUEUE=e.USERFLOWJS_QUEUE||[],i=function(e){t[e]=function(){var r=Array.prototype.slice.call(arguments);t.load(),u.push([e,null,r])}},c=function(e){t[e]=function(){var r,n=Array.prototype.slice.call(arguments);t.load();var o=new Promise((function(e,t){r={resolve:e,reject:t}}));return u.push([e,r,n]),o}},d=function(e,r){t[e]=function(){return r}};i("_setTargetEnv"),i("closeResourceCenter"),i("disableEvalJs"),i("init"),i("off"),i("on"),i("prepareAudio"),i("registerCustomInput"),i("remount"),i("reset"),i("setBaseZIndex"),i("setCustomInputSelector"),i("setCustomNavigate"),i("setCustomScrollIntoView"),i("setInferenceAttributeFilter"),i("setInferenceAttributeNames"),i("setInferenceClassNameFilter"),i("setResourceCenterLauncherHidden"),i("setScrollPadding"),i("setServerEndpoint"),i("setShadowDomEnabled"),i("setPageTrackingDisabled"),i("setUrlFilter"),i("setLinkUrlDecorator"),i("openResourceCenter"),i("toggleResourceCenter"),c("endAll"),c("endAllFlows"),c("endChecklist"),c("group"),c("identify"),c("identifyAnonymous"),c("start"),c("startFlow"),c("startWalk"),c("track"),c("updateGroup"),c("updateUser"),d("getResourceCenterState",null),d("isIdentified",!1)}}();

  userflow.init('USERFLOW_TOKEN')
  userflow.identify('{{userId}}', {
    // Put any additional attributes here (see below)
  })
</script>
```

> [!WARNING]
> Important
> 
> Make sure to replace `USERFLOW_TOKEN` with the Userflow.js Token you find in Userflow under **Settings > Environments**.

You can pass whatever custom attributes you want to Userflow in the `userflow.identify() call`. You can use these attributes to target flows to specific users, e.g. only show a welcome modal to new users based on when they signed up.

If your GTM account contains other variables, such as the user’s name, email or when they signed up, you can add these attributes in the second argument of the `userflow.identify()`call. Example:

```plaintext
userflow.identify('{{userId}}', {
  name: '{{name}}',
  email: '{{email}}',
  signed_up_at: '{{signed_up_at}}'
})
```

The above code expects your three extra variables to be named `name`, `email`, and `signed_up_at` in GTM. Note that the value of the `signed_up_at` attribute must be in ISO-8601 format (example: `2021-03-26T12:31:47Z)`.