How can I implement user flow using AngularJS?

Question

How can I implement user flow using AngularJS?

We're facing an issue with implementing UserFlow in our AngularJS app.

Our product is built on older version of AngularJS (1.8) and although we find the concept of UserFlow appealing, we are running into a problem. The standard injection and initialization model operates within the core JavaScript scope which is not accessible by AngularJS. As a result, even after following the provided instructions, every user that signs up is being recognized as the same {{userId}}

We suspect that this issue occurs because UserFlow cannot retrieve the user ID in userflow.identify as outlined here. This is likely due to the fact that the user ID is not available outside of the AngularJS digest cycle. Essentially, the method was invoked in a context where AngularJS is not active, causing the handlebars to remain unchanged.

javascript angularjs

Answer 1

Answer №1

Issue Resolved. Here's How We Fixed It:

We decided to split the initialization of UserFlow into two separate steps:

userflow.init() - this can be done directly in your index.html or injected into the <body>
userflow.identify() - this step should be carried out within your AngularJS controller

.

STEP-BY-STEP PROCESS---------------

1. Execute init(), but hold off on identify

In your index.html, add the following script at the end of the <body> tag:

<!-- UserFlow -->
        <script ng-if="customization.features.userflow">
          !function(){var e="undefined"==typeof window?{}:window,t=e.userflow;if(!t){var r="https://js.userflow.com/";t=e.userflow={_stubbed:!0};var n=e.USERFLOWJS_QUEUE=e.USERFLOWJS_QUEUE||[],o=function(e){t[e]=function(){var t=Array.prototype.slice.call(arguments);i(),n.push([e,null,t])}},s=function(e){t[e]=function(){var t,r=Array.prototype.slice.call(arguments);i();var o=new Promise((function(e,r){t={resolve:e,reject:r}}));return n.push([e,t,r]),o}},a=function(e,r){t[e]=function(){return r}},u=!1,i=function(){if(!u){u=!0;var t=document.createElement("script");t.async=!0;var n=e.USERFLOWJS_ENV_VARS||{};"es2020"===(n.USERFLOWJS_BROWSER_TARGET||function(e){for(var t=[[/Edg\//,/Edg\/(\d+)/,80],[/OPR\//,/OPR\/(\d+)/,67],[/Chrome\//,/Chrome\/(\d+)/,80],[/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 u=e.match(new RegExp(s));if(u&&parseInt(u[1],10)>=a)return"es2020";break}}return"legacy"}(navigator.userAgent))?(t.type="module",t.src=n.USERFLOWJS_ES2020_URL||r+"es2020/userflow.js"):t.src=n.USERFLOWJS_LEGACY_URL||r+"legacy/userflow.js",t.onerror=function(){u=!1,console.error("Could not load Userflow.js")},document.head.appendChild(t)}};o("_setTargetEnv"),o("closeResourceCenter"),o("init"),o("off"),o("on"),o("prepareAudio"),o("registerCustomInput"),o("remount"),o("reset"),o("setCustomInputSelector"),o("setCustomNavigate"),o("setCustomScrollIntoView"),o("setInferenceAttributeFilter"),o("setInferenceAttributeNames"),o("setInferenceClassNameFilter"),o("setResourceCenterLauncherHidden"),o("setScrollPadding"),o("setShadowDomEnabled"),o("setPageTrackingDisabled"),o("setUrlFilter"),o("openResourceCenter"),o("toggleResourceCenter"),s("endAll"),s("endAllFlows"),s("endChecklist"),s("group"),s("identify"),s("identifyAnonymous"),s("start"),s("startFlow"),s("startWalk"),s("track"),s("updateGroup"),s("updateUser"),a("getResourceCenterState",null),a("isIdentified",!1)}}();
          userflow.init('@@grunt_userflow')
        </script>

Since we utilize Grunt as a build tool (not the ideal choice, but you can replicate this pattern with different technologies), we inserted the environment-specific token, @@grunt_userflow, into our build script to replace it accordingly based on the environment.

It's important to note that we are not triggering userflow.identify() yet...

2. Implement UserFlow identify() directly in the controller

Upon initial user log-in, make sure to call the userflow.identify() function with the appropriate IDs. I prefer placing AngularJS-independent functions like this outside the controller and then incorporating them in:

const startUserFlow = function(userId, login) {
  userflow.identify(userId, {
    email: login
  });
};

Now, invoke this function from within AJS:

$scope.processCredentials($scope.username, response.data.access_token).then(function (result) {
    trackEvent('signIn', $rootScope.userProfile.id);
    startUserFlow($rootScope.userProfile.id, $scope.username);

3. Lastly, to reset your Content, utilize ng-click=() on any relevant HTML element

That's correct - as we're encapsulating it and following the AngularJS approach, utilize ng-click just like any other function and bind it directly. See example below.

$scope.launchUserFlowChecklist = function () {
    userflow.start('[insert content ID here]');
};

We hope this guide proves helpful! Cheers.

Answer 2

Issue Resolved. Here's How We Fixed It:

We decided to split the initialization of UserFlow into two separate steps:

userflow.init() - this can be done directly in your index.html or injected into the <body>
userflow.identify() - this step should be carried out within your AngularJS controller

.

STEP-BY-STEP PROCESS---------------

1. Execute init(), but hold off on identify

In your index.html, add the following script at the end of the <body> tag:

<!-- UserFlow -->
        <script ng-if="customization.features.userflow">
          !function(){var e="undefined"==typeof window?{}:window,t=e.userflow;if(!t){var r="https://js.userflow.com/";t=e.userflow={_stubbed:!0};var n=e.USERFLOWJS_QUEUE=e.USERFLOWJS_QUEUE||[],o=function(e){t[e]=function(){var t=Array.prototype.slice.call(arguments);i(),n.push([e,null,t])}},s=function(e){t[e]=function(){var t,r=Array.prototype.slice.call(arguments);i();var o=new Promise((function(e,r){t={resolve:e,reject:r}}));return n.push([e,t,r]),o}},a=function(e,r){t[e]=function(){return r}},u=!1,i=function(){if(!u){u=!0;var t=document.createElement("script");t.async=!0;var n=e.USERFLOWJS_ENV_VARS||{};"es2020"===(n.USERFLOWJS_BROWSER_TARGET||function(e){for(var t=[[/Edg\//,/Edg\/(\d+)/,80],[/OPR\//,/OPR\/(\d+)/,67],[/Chrome\//,/Chrome\/(\d+)/,80],[/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 u=e.match(new RegExp(s));if(u&&parseInt(u[1],10)>=a)return"es2020";break}}return"legacy"}(navigator.userAgent))?(t.type="module",t.src=n.USERFLOWJS_ES2020_URL||r+"es2020/userflow.js"):t.src=n.USERFLOWJS_LEGACY_URL||r+"legacy/userflow.js",t.onerror=function(){u=!1,console.error("Could not load Userflow.js")},document.head.appendChild(t)}};o("_setTargetEnv"),o("closeResourceCenter"),o("init"),o("off"),o("on"),o("prepareAudio"),o("registerCustomInput"),o("remount"),o("reset"),o("setCustomInputSelector"),o("setCustomNavigate"),o("setCustomScrollIntoView"),o("setInferenceAttributeFilter"),o("setInferenceAttributeNames"),o("setInferenceClassNameFilter"),o("setResourceCenterLauncherHidden"),o("setScrollPadding"),o("setShadowDomEnabled"),o("setPageTrackingDisabled"),o("setUrlFilter"),o("openResourceCenter"),o("toggleResourceCenter"),s("endAll"),s("endAllFlows"),s("endChecklist"),s("group"),s("identify"),s("identifyAnonymous"),s("start"),s("startFlow"),s("startWalk"),s("track"),s("updateGroup"),s("updateUser"),a("getResourceCenterState",null),a("isIdentified",!1)}}();
          userflow.init('@@grunt_userflow')
        </script>

Since we utilize Grunt as a build tool (not the ideal choice, but you can replicate this pattern with different technologies), we inserted the environment-specific token, @@grunt_userflow, into our build script to replace it accordingly based on the environment.

It's important to note that we are not triggering userflow.identify() yet...

2. Implement UserFlow identify() directly in the controller

Upon initial user log-in, make sure to call the userflow.identify() function with the appropriate IDs. I prefer placing AngularJS-independent functions like this outside the controller and then incorporating them in:

const startUserFlow = function(userId, login) {
  userflow.identify(userId, {
    email: login
  });
};

Now, invoke this function from within AJS:

$scope.processCredentials($scope.username, response.data.access_token).then(function (result) {
    trackEvent('signIn', $rootScope.userProfile.id);
    startUserFlow($rootScope.userProfile.id, $scope.username);

3. Lastly, to reset your Content, utilize ng-click=() on any relevant HTML element

That's correct - as we're encapsulating it and following the AngularJS approach, utilize ng-click just like any other function and bind it directly. See example below.

$scope.launchUserFlowChecklist = function () {
    userflow.start('[insert content ID here]');
};

We hope this guide proves helpful! Cheers.

How can I implement user flow using AngularJS?

Answer №1

Similar questions

What is the best way to convert exponential values to decimals when parsing JSON data?

Having trouble retrieving Firebase data to display on a React chart

What is the best way to transition a connected component from a class-based to a functional component in TypeScript?

Present the retrieved JSON data values in an alternative layout on the table

Tips for acquiring offspring who are exclusively not descendants of a particular node

Issues with Twitter-Bootstrap Modal Functionality

Utilize webpack to import functions from separate files

What steps should I take to modify my database while utilizing radio buttons in the edit mode?

An issue with the image filter function in JavaScript

Incorporating dynamic form elements using Vue.js within a targeted div

What happens when Image Buttons are clicked in SAPUI5 and their onchange event is triggered

Error encountered when accessing Spotify API. The requested action requires proper permissions which are currently missing. Issue arises when attempting to

Python's Selenium Throws No Such Element Exception

What is the reason for using a callback as a condition in the ternary operator for the Material UI Dialog component?

Is there a way to get an iframe to mimic the behavior of other media elements within a horizontal scrolling container?

Can you explain the distinction between using <router-view/> and <router-view></router-view>?

Steps for Adding a class or Id to an Ext.Msg.alert box

Implementing role-based authentication in Next.js using Next-auth and Firebase

What is the accurate way to determine the total number of minutes elapsed from a specific point in time?

Vue.js mobile app may show a loaded DOM that remains invisible until the screen is tapped