Client-side Testing Activity

For this activity we will be building a mini test in the Browser console. To emulate the use of Optimizely, we will inject test code using the Code Injector Google Chrome plugin.

Getting Started

1. Install the Code Injector Google Chrome plugin
2. Once you've installed the plugin, confirm it is added to your Extensions bar.
3. Navigate to https://www.schwab.com/brokerage
4. Open the Code Injector plugin. And select "Add rule"

5) Paste the Brokerage page URL into the URL matching bar then deselect the "On Page Load" box. This will ensure that your code does not have to wait for page load to complete before executing.

6) Open up the starterFile.js file in this repo. You'll notice a function called runPoll included. Because we are executing code from the console, we need to wait for the Optimizely util functions to exist on the window before we can use them in our code. The runPoll does just that. When building a test in Optimizely, you will not need to poll for the util functions. For this activity do not remove the runPoll code. All your variant code should go within executeTest.
7) Reference the Campaign Info section below for test information. You can work on your code directly in the Plugin or in a code editor of your choice.
8) If using a code editor, paste your code into the JavaScript tab in Code Injector and press save.
9) Each time you save the code, reload the page to trigger the injection of the code.

Documentation:

Adobe Analytics tl Call
Optimizely Utils

Campaign Information

Campaign Name: Brokerage Page Test 1
Campaign Type: A/B Test
Hypothesis: By bringing benefits content to above the fold and updating the hero and CTA copy, users will be more likely to quickly get the information they need and click the CTA.
KPI: Brokerage Account Signups
Metrics: Adobe Analytics custom click event with name 'BB_brokerage_CTA_Click' should fire when a user clicks on "Open a Brokerage Account".
Mockups Control:

Variant_A:

Changes to Make:

1. Herospace header text should be changed from: "Today, get closer to your goals." to "Get closer to your goals."
2. Herospace CTA button text should be changed from: "Open a Brokerage Account" to "Open a Brokerage Account Today"
3. The "Easily trade and manage investments..." section should be moved to directly below the herospace/blue section.
4. Use Optimizely utils to ensure you are waiting for elements to exist on the page before executing code. More information on utils can be found here: https://docs.developers.optimizely.com/web/docs/utilities
5. Clicking on the "Open a Brokerage Account..." button should fire an Adobe Analytics custom link with the name 'BB_brokerage_CTA_Click' using s.tl(). Ensure this call completes successfully by looking in the Network tab. More information on s.tl() can be found here: https://experienceleague.adobe.com/docs/analytics/implementation/vars/functions/tl-method.html?lang=en
6. If successful you should see a call that looks like this: