I’m using an off-the-shelf AB testing tool at the company I work for, called Google Optimize 360, to build front-end AB tests on our website.
This tool works like Google Analytics… as in, a script is injected into the <head> tag, of the page you want to run AB tests on. And then you add bespoke vanilla JS, CSS etc into Optimize 360, to redesign/test DOM elements of a page.
https://marketingplatform.google.com/about/optimize-360/
(So basically, AB tests run on top of the compiled codebase… not within it).
The website I’m running AB tests on is built in React and it has a lot of limitations, as I can’t seem to access any components/modules/functions via the front-end, (outside of the application). For example, via chrome console.
Angular for example is great, because I can access methods via angular services on the front-end via angular.element. EG:
angular.element(document.body).injector().get("ANGULAR_SERVICE");
Is there an alternative for react?
I haven’t been able to find anything, which works, where I can trigger modules/functions via chrome console.
For example, I couldn’t get dynamic import to work via chrome console, as I can’t even see the path to the module in the compiled codebase…
import('path/to/module.js').then(m => module = m)
I basically tried a few options on this page:
How to use ES6 modules from dev tools console
I appreciate react is not supposed to work in this way…. But is there anyway, I can have the react application changed, to allow certain modules/functions to be accessible via the front-end?
What would need to be done?
Also I’m aware of “React Developer tools” chrome extension, but this is not what I’m looking for. I’m looking to invoke functions outside of the react app, (not traverse the dom/module).
Thanks,