Ingredients

• Segment: All users
• Content: Tour, Survey

Instructions

1. Within Guides and Surveys, navigate to Content. Under Surveys, click + Add survey.

2. In the settings for the survey, configure:

   • Survey Name: User Role Survey.
   • Where to show this survey?: Choose Only certain pages and user segments and set URL contains to test-user-role-survey.

   Note: For the purposes of this demo recipe, the survey is set to show only on pages with test-user-role-survey in the URL. Set this to the URL of the page where you want to show the survey once you've published it.

3. Under the survey's First page, click Add element and choose Choice (Radio).

4. Under Question Settings, configure:

   • Question: What is your role?
   • Choices: Engineer, Product Manager, Designer, Other.

   

Now that the survey is set up, we'll publish it and get the question_ value from the developer console.

5. Click Publish from within the survey editor and run the survey on a page of your choosing.
6. Navigate to a page with Guides and Surveys enabled and add ?q=test-user-role-survey to the URL to trigger the survey to appear.
7. Select Engineer from the choices and click Submit.
8. Open the developer console in your browser.

9. In the JavaScript console, type window.usetifulTags and press Enter. You should see a question_ key-value pair that matches the choice you selected.

   Notes:

   • The question_ value is an integer that matches the 1-based index of the choice you selected. Since Engineer was the first choice in the list, its question_ value is 1.
   • To reset the survey during testing, go to Application > Storage in your developer console and click Clear site data.

   

10. Copy the question_ value and save it for later use when you create the tour.

Now that you have the question_ value, create the tour and use it to branch the tour based on the user's response to the survey.

10. Within Guides and Surveys, navigate to Content. Under Tours, click + Add tour.

11. In the settings for the tour, configure:

    • Tour Name: Product Tour [Start].
    • Where to show this tour?: Choose Only certain pages and user segments and set URL contains to product-tour-start.

    Note: For the purposes of this demo recipe, the tour is set to show only on pages with product-tour-start in the URL. Set this to the URL of the page where you want to show the tour once you've published it.

12. Under Tour Flow, click + Add Step and choose Condition. You'll configure this step in a later step below.
13. Under Tour Flow, click + Add Step and choose Modal, and set the Title to Engineer Product Tour.
14. Under Tour Flow, click the gear icon next to the Condition step you added earlier and set its Title to Engineer Condition.
15. Under IF, configure:
    • Set the dropdown to Tag value.
    • In the Tag name text box, enter the question_ value you saved earlier.
    • Choose is for the next dropdown.
    • Set the Tag value to 1 to match Engineer, since it was the first choice in the survey.

16. Under THEN, set the dropdown to Go to step and set the tour step dropdown to Engineer Product Tour.

    Note: You can also choose Another tour here if you prefer to use an entirely separate tour for each role.

17. Under ELSE, choose Close tour.
18. Click Publish from within the tour editor and run the tour on a page of your choosing.
19. Navigate to a page with Guides and Surveys enabled and add ?q=product-tour-start to the URL to trigger the tour to appear.
20. Confirm that the tour starts and the Engineer Product Tour modal appears.
21. Close the modal to confirm the tour ends.