[Solved] Testing/Debugging Google Optimize in "Preview" theme

Store Design
,
1

Overview

We are using Google Optimize to run A/B tests on our site, and when using the “Editor” offered by the Google Optimize service, we can easily (and reasonably) test/debug our experiments before launching them to the site. However, when exploring more complicated tests which require the utilization of the Optimize Javascript API, we have not figured out how to actually test any of our client-side Javascript without publishing it to the live site and testing in real-time.

Additional Context

We are currently using version control via GitLab, and therefore do not utilize the Shopify “code editor” for our changes. We have a very simple devOps process which essentially flows in the following way:

  • Develop Branch → Develop Theme
    • The develop branch is where our developers create new features
    • Once a new feature is complete, we merge changes into the branch and deploy the code/content develop theme via themekit
  • Staging Branch → Staging Theme
    • Higher environment for testing once initial QA is completed in lower environment (i.e. the Develop Theme)
    • Batches of QA’d features are merged from the develop branch into the staging branch, and then deployed via themekit
  • Master Branch → Production Theme
    • Final “Live” theme - Once QA is completed in staging, we merge to master and deploy to the live theme using themekit

Essentially, our “themes” serve as our “environments” for testing new features/content/fixes before making them to our production theme.

Reproducing the Issue:

We want to execute some client-side Javascript based on specific variants driven by Google Optimize (using the optimize.callback pattern). As a developer, I would write this code in our “Develop” branch, and then would like to test to make sure it is working in our lower “environment” (i.e. Develop Theme). However, due to how the “preview” URL works, we are unable to access any active tests

  1. Create Experiment in Optimize
  2. Note the experiment ID
  3. Add a Page Target URL to the experiment → For example, www.my-home-page.com
  4. Activate the experiment
  5. Go to Shopify and create a “duplicate” of the production theme (i.e. this serves as an example of our lower “develop” environment)
  6. Select “Preview” on the duplicated theme and navigate to the homepage (i.e. www.my-home-page.com)
  7. Run this command in the console → google_optimize.get(‘<experiment_ID_from_step_2>’)
    1. This will result in “undefined”
  8. Now navigate to www.my-home-page.com in a incognito window to view the current production site not the theme preview
  9. Run the command from step 6
    1. This will result in a “variant” being returned (i.e. “0”)

What this demonstrates, is that Google Optimize does not recognize the “Preview” of a theme as recipient of the test. As a result, we cannot test any custom JS tests without actually testing them in a production theme

Things we have tried:

Adding the “Share Preview” url to Optimize does not work

h-jordan53_0-1616528328242.png
h-jordan53_0-1616528328242.png1286×1008 39.9 KB

Any recommendations on how we can do these types of tests in “non-live” themes so that we can verify and debug our code before promoting to our live environment?

SOLVED

I completely botched the assignment of the URL to the optimize test - Using the “Share Preview” URL does work if entered correctly via the Google Optimize UI

2

Hey,

Just wondering, what is exactly that you’ve done wrong with the URL? Is it that you used the “https://” on the beginning and “/” on the end? Please let me know.

Cheers.