cc-archive / cccatalog-frontend

[PROJECT TRANSFERRED] CC Search is a search tool for CC-licensed and public domain content across the internet.
https://github.com/WordPress/openverse-frontend
MIT License
162 stars 196 forks source link

Fix A/B test initialization #1244

Closed zackkrida closed 3 years ago

zackkrida commented 3 years ago

Last week I wrote the following comment:

https://github.com/creativecommons/cccatalog-frontend/blob/develop/src/components/HeaderSection.vue#L44-L47

  /* Note: this isn't the ideal place to do this, but we need this to run globally,
   * client-side, on any initial page visit,and the header is included on every
   * page so it's an okay place to do it.
   */

Sadly, I lied. This code broke A/B test initialization. I did a little research into the Nuxt lifecycle and found that the best way to run client-side code on initialization is in a custom plugin that runs client-side only. This PR implements that plugin and fixes the broken A/B test initialization.

Additionally, I found an incompatibility with Nuxt's modern output and the sixpack-client library. That library was relying on some global state (a counter variable) and had a few issues preventing it from working correctly. It also contains code to set/get cookies and a uuid, things we were already doing for our a/b test sessions.

I created a simpler ~utils/sixpack.js file with two methods that return promises: participate and convert. The participate promise will always resolve, which makes setting the experiments much simpler.

Finally, the api for an ab test is now just an object. Behold:

export default {
   name: 'experiment_name',
   defaultCase: 'experiment_default_case_name',
   cases: {
     'experiment_default_case_name',
     'any_other_case_names',
     'any_other_case_name_2',
   },
   traffic_fraction: .10 // an optional number between 0 and 1 (100%)
 }

This makes defining A/B tests much simpler, instead of repeating joinExperiment function logic every single time.

Checklist

- [x] My pull request has a descriptive title (not a vague title like `Update index.md`). - [x] My pull request targets the *default* branch of the repository (`main` or `master`). - [x] My commit messages follow [best practices][best_practices]. - [x] My code follows the established code style of the repository. - [ ] I added tests for the changes I made (if applicable). - [x] I added or updated documentation (if applicable). - [x] I tried running the project locally and verified that there are no visible errors. [best_practices]:https://gist.github.com/robertpainsi/b632364184e70900af4ab688decf6f53 ## Developer Certificate of Origin
Developer Certificate of Origin ``` Developer Certificate of Origin Version 1.1 Copyright (C) 2004, 2006 The Linux Foundation and its contributors. 1 Letterman Drive Suite D4700 San Francisco, CA, 94129 Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed. Developer's Certificate of Origin 1.1 By making a contribution to this project, I certify that: (a) The contribution was created in whole or in part by me and I have the right to submit it under the open source license indicated in the file; or (b) The contribution is based upon previous work that, to the best of my knowledge, is covered under an appropriate open source license and I have the right under that license to submit that work with modifications, whether created in whole or in part by me, under the same open source license (unless I am permitted to submit under a different license), as indicated in the file; or (c) The contribution was provided directly to me by some other person who certified (a), (b) or (c) and I have not modified it. (d) I understand and agree that this project and the contribution are public and that a record of the contribution (including all personal information I submit with it, including my sign-off) is maintained indefinitely and may be redistributed consistent with this project or the open source license(s) involved. ```