Userflow.js installation in Google Tag Manager

You can install Userflow.js via Google Tag Manager (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 into 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”.

<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>

IMPORTANT: Make sure to replace USERFLOW_TOKEN with the Userflow.js Token you find in Userflow under Settings -> Environments .

Extra custom attributes

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:

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

This above code expects your 3 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).