As a marketer, I can set any element as a click target

• Type: Story
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: 7.4.0 CE GA1, 7.4.13 DXP GA1, Master
• Component/s: Pages > A/B Testing for Content Pages
• Labels:
  • 7.4
  • d_20_10
  • d_20_11
  • d_20_12
  • fc_20_12
  • team_fi_board_out
  • team_fi_support_teams
• Epic/Theme:
  • AB_Testing
• Epic Link: tango-ABTesting-extend-clickable-elements
• Sprint: TANGO | #44 DIS | Aug28-Sep11, TANGO | #49 DIS | Nov13-Nov27, TANGO | #50 DIS | Nov27-Dec11, TANGO | #51 DEV | Dec11-Dec28, TANGO | #52 DEV | Jan12-Jan22, TANGO | #53 DEV | Jan22-Feb05, TANGO | #54 DEV | Feb05-Feb19, TANGO | #55 DEV | Feb19-Mar05, TANGO | #56 DEV | Mar05-Mar19

Motivation

Pages' layout and the elements that make them up are as varied as the needs of the marketing teams in their campaigns. In the case of the AB Tests, the variations can include any element as clickable, in order to carry out the experiment. Allowing users to define which elements they want to set as clickable gives the AB Testing feature the flexibility demanded by the day-to-day life of marketers.

Design

https://www.figma.com/file/hOUBiubGN4Y1rTZ2kjJp9p/LPS-119475-As-a-marketer-I-can-set-any-element-as-a-click-target?node-id=0%3A1

Technical Requirements

This new feature affects to A/B Testing - Click goals

PREREQUISITES (out of this story's scope)

• To set any element as a clickable element and therefore being able to select it as a goal, users will have to identify these custom elements with an ID directly in the HTML of the page. According to the original story LPS-100945, this ID must:
  • Be unique in the page, and the same for all page's variants
  • Do not change across requests 
  • Do not change across published-draft status
  • Do not change across staging-live status

TECH. REQUIREMENTS

• The section "Click goal" for selecting clickable elements on a page will show a help text: Select a clickable element to be measured by using the select button or entering its ID in the field below.
• To select the target element: 
  • OOTB supported elements can be selected from the highlighted elements in the page when hitting the "Select clickable element" button. Once the user selects one, its ID will be featured in the ID box below.
  • Custom elements are selected getting the ID in the box. When pressing enter or clicking outside the box, the matching element will be highlighted.
    • Description for the box: Element ID 
    • Text for the help icon tooltip: Use this option for selecting custom clickable elements.
    • If the ID is not found in the HTML page, a warning will show: "ID not found".
    • When hovering on the ID, if it's recognized, a tooltip will show the full ID of the element
• The current link to the selected element will be replaced by a button to find the element in the page. This button will be disabled until a valid element is selected.
• If user wants to change the selected element, s/he can either change the ID in the box or hit the button "Change clickable element" 
• In both cases, click targets will be highlighted once they're selected
• If the user doesn't select any element or enters an invalid ID, when clicking on "Review and run test", an error message will show: An element needs to be selected.
• When the test is running, the Change clickable element button won't show and the ID element box won't be enabled for edition, but the eye button will work normally.

Acceptance Criteria

• Given the A/B testing panel
• When the user selects Goal: Click from the modal
• Then the section "Click goal" for selecting clickable elements on a page will show a help text: Select a clickable element to be measured by using the select button or entering its ID in the field below.

--

• Given the A/B testing panel
• When the user selects one highlighted element in the page
• Then the ID of the selected element shows in the ID box

–

• Given the A/B testing panel
• When the user has selected an element in the page
• Then the Select clickable element button changes into Change clickable element

–

• Given the A/B testing panel
• When the user has selected an element in the page and clicks on the Change clickable element
• Then the selected element highlights and the user can unselect it by the means of the "x" icon on the element

–

• Given the A/B testing panel
• When the user has selected an element in the page and s/he can click on the "x" icon within the ID box
• Then s/he can enter a different ID in the Element ID box and press enter again, so the element is highlighted and gets selected the ID box is empty and the Change clickable element button changes into Select clickable element

–

• Given the A/B testing panel
• When the user hovers on the help icon next to Element ID label
• Then a tooltip shows: Use this option for selecting custom clickable elements

--

• Given the Element ID box
• When the user enters a valid ID and presses Enter or clicks anywhere outside the box
• Then all the clickable elements the element with that ID get highlighted and the element with the ID is selected

--

• Given the Element ID box
• When the user enters a not valid ID (so it is not found in the HTML of the page) and presses Enter
• Then an error message shows: ID not found

--

• Given the Element ID box
• When the user has entered an ID and pressed Enter, regardless whether it is valid or not, and hovers on the ID
• Then a tooltip shows the full ID

– NEW

• Given the Element ID box
• When the user has selected an element
• Then s/he cannot edit the ID box, unless s/he unselect the element

–

• Given the A/B testing panel
• When the user selects a valid element by either the way
• Then the "eye" button gets enabled

–

• Given a selected element by either the way
• When the user hits the "eye" button
• Then the page scrolls if needed and shows the selected element highlighted

–

• Given a test where the user hasn't selected any element or has entered an invalid ID
• When the user clicks on "Review and run test"
• Then an error message will show: An element needs to be selected.

–

• Given a click goal test on a custom clickable element (not a OOTB supported button or link)
• When the ID accomplishes with the conditions (it is a clickable element, is unique in the page, and the same for all page's variants, Does not change across requests, Does not change across published-draft status and Does not change across staging-live status)
• Then the element will be rightly measured in AC

–

• Given a click goal test that is running
• When the user accesses the panel
• Then the Change clickable element button don't show and the ID element box isn't enabled for edition, but the eye button will work normally.

 h1. Test Scenarios

AC ID	Test Strategy	Test Scenarios	Is it covered by FrontEnd ? (JS-Unit)	Is it covered by BackEnd? (unit or integration)	Poshi?
01	Low	When a user creates an AB testing by click goal, the section "Click goal" for selecting clickable elements on a page will show a help text: Select a clickable element to be measured by using the select button or entering its ID in the field below.	NO	N/A
02	Medium	When a user selects any highlighted element in the page, the ID of the selected element shows in the ID box	YES	N/A
03	Medium	When a user has selected an element, the Select clickable element button changes into Change clickable element, and the elements are highlighted	NO*	N/A
04	Medium	When a user has selected an element and clicks on the "x" icon within the ID box, the ID box gets empty and the Change clickable element button changes into Select clickable element	NO*	N/A
05	Medium	When a user clicks on the "X" icon of the selected element, the element gets unselected	NO*	N/A
06	Medium	When a user has selected an element, s/he can enter a different ID in the Element ID box and press enter again, so the element is highlighted and gets selected	NO	N/A
07	Low	When a user the user hovers on the help icon next to Element ID label, a tooltip shows: Use this option for selecting custom clickable elements	NO	N/A
08	Medium	When a user enters a valid ID and presses Enter or clicks anywhere outside the box, the element with that ID get highlighted and the element with the ID is selected	NO	N/A
09	Medium	When a user enters a not valid ID and presses Enter, an error message is shown: ID not found	NO	N/A
10	Low	When a user has entered an ID and pressed Enter, regardless whether it is valid or not, and hovers on the ID, a tooltip shows the full ID	NO	N/A
11	Low	When a user selects a valid element, by click or by ID, the "eye" button gets enabled	NO	N/A
12	Medium	When a user clicks on the "eye" button, by click or by ID, the page scrolls if needed and shows the selected element highlighted	NO	N/A
13	High	When a user doesn't selects any element or has entered an invalid ID and clicks on "Review and run test", an error message will show: An element needs to be selected.	NO	N/A
14	High	When the ID selected accomplishes with the conditions (is unique in the page, and the same for all page's variants, Does not change across requests, Does not change across published-draft status and Does not change across staging-live status), the element will be rightly measured in AC	N/A	N/A
15	Medium	When a user accesses the AB testing panel while a click goal test is running, the Change clickable element button don't show and the ID element box isn't enabled for edition, but the eye button will work normally.	NO	N/A
16	Low	When a user the user has selected a valid element, s/he cannot edit the ID box	NO	N/A
17	Low	When a user the user has selected an invalid element, s/he can edit the ID box	NO	N/A

We have two frontend tests: one to check if the target is empty the button is "Select clickable element" and another one to check if a target is selected the button is "Change clickable element"

 All the test scenarios are focus on the frontend side. Because of that the backend column is all N/A