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

How to Enhance Angular ui-router nested views with Resolve?

Is it possible to host multiple React applications on a single port? Currently experiencing issues with running both an Admin panel and the Front side in production mode on the same Node.js API server

retrieving data from identical identifiers within a loop

A step-by-step guide on incorporating Google Ads Manager Ads units (Banners) into your website with NuxtJs and VueJs

I just finished crafting a dynamic line chart with d3.js within a React environment. However, I am now looking to add some personalized touches to enhance its appearance. Could you kindly review the details and code

Personalized parallax design

Issues arise when attempting to display a div element in AngularJS based on the value of a hidden input

Investigate the CSS display property of an element using JavaScript

Utilizing JSTL: Executing a function within <script> through the c:set tag in JSTL

Encountering an endless loop while attempting to retrieve data from Firebase in Next.js through the use of useEffect

What is the best way to retrieve access to my container/store from this main file?

Utilizing an attribute's data within a custom Angular directive

Unable to stop React HTMLAudioElement from playing

Are we retrieving multiple APIs the right way?

Issue with accessing form in Angular 6 Reactive forms for custom validator functionality

Playing a game of rock, paper, scissors with two players using JavaScript

Is it possible to integrate markup within AngularJS IDs?

Angular 4 Operator for adding elements to the front of an array and returning the updated array

Data uploaded onto Meteor using angular-meteor

The unexpected occurence of the Onbeforeunload exception