https://www.growthbook.io/
Join Slack
HI! I have a question how visual experiment works on SPA websites. I have designed visual experiment...
# ask-questions
c
HI! I have a question how visual experiment works on SPA websites. I have designed visual experiment where just try to overwrite some css. According to chrome addon, everything is fine and preview with visual changes works properly. Targeting according addon is ok and global css is assigned to my variant. We use javascript SDK and have visual changes enabled. After deploy experiment I see that it's work with feature flags because flag is set properly and I see that for this flag I'm in experiment but my css isn't included and no visual changes visible. Where could I find these css? Injected in 
<head>
? Why doesn't work?
f
Hi Mario - the visual change set is included in the SDK payload, as you see there, but it's not required to use feature flags to get the visual experiments to work
the chrome dev tools will show experiments if the targeting is right, but no info if it misses the targeting rules
c
So in my case from screenshot, is targeting right?
f
seems like it, is this public? we can help you debug
c
And how the global css rules work? Similar to google optimize where all css was included during initialization of experiment on page and this work on DOM elements even when this changed (css was injected to head element)
yes, it's a public, just need to be desktop and URL from
Copy code
.*esky\.pl\/lot\+hotel\/portfolio\/details\/select\-room.*
so, here You should to have an experiment (visual css changes are in variant 2):
Copy code
<https://www.esky.pl/lot+hotel/portfolio/details/select-room?rooms%5B0%5D%5Badults%5D=2&departureDate=2024-06-20&returnDate=2024-10-13&stayLength=5:7&isFlexSearch=true&datesTab=flexDates&context=pl-holidays&landingPageId=6380b6a89a0c207e01b2b5e4&eventSource=portfolio&partner_id=ESKYPLPACKAGES&portfolioToken=c932dd98-5e0f-462c-bb3b-9589fa3936ec&packageId=MjkwOTI0OjU6MzY2NTAxOnBsLWhvbGlkYXlzX2N5cHJ1cw&flightOptionId=V01JUEZPMjQwOTI5Nzh8fEZSNDE3NztQRk9XTUkyNDEwMDQ3OEl8fEZSNDE3OA&hotelOptionId=MzY2NTAxOkJyZWFrZmFzdDoyOTA5MjQ6MDQxMDI0OjIwMjQwOTI5fDIwMjQxMDA0fFd8MTU0fDk2ODEzfFRXTi5TVHxGSVQgUzI0fEJCfHxOOjM2Og&departureCode=WMI&arrivalCode=PFO&checkInDate=2024-09-29&checkOutDate=2024-10-04&destinationDepartureDate=2024-09-29&returnArrivalDate=2024-10-05&metaCode=366501&pricePresentation=perpax&exp_19g621lxkdhax1=2>
you are in variant 
2
if in body element you have set 
data-ab-ver
equals 
2
image.png
this element should be hidden in variant 
2
f
htmm
that looks like it should be loading
c
so, please explain how from technical point of view global css works
my app is SPA with SSR. My experiments based on feature flags work perfect
Even this experiment you debug has feature flag (attributes you see in <body> based on flags and this is for analytics) but I made for the first time visual experiment and no success
f
I just wonder if the regex is double escaping somehow
c
I will change regexp to match exactly the URL I sent you
I changed targeting to URL
Copy code
<https://www.esky.pl/lot+hotel/portfolio/details/select-room?rooms%5B0%5D%5Badults%5D=2&departureDate=2024-06-20&returnDate=2024-10-13&stayLength=5:7&isFlexSearch=true&datesTab=flexDates&context=pl-holidays&landingPageId=6380b6a89a0c207e01b2b5e4&eventSource=portfolio&partner_id=ESKYPLPACKAGES&portfolioToken=c932dd98-5e0f-462c-bb3b-9589fa3936ec&packageId=MjkwOTI0OjU6MzY2NTAxOnBsLWhvbGlkYXlzX2N5cHJ1cw&flightOptionId=V01JUEZPMjQwOTI5Nzh8fEZSNDE3NztQRk9XTUkyNDEwMDQ3OEl8fEZSNDE3OA&hotelOptionId=MzY2NTAxOkJyZWFrZmFzdDoyOTA5MjQ6MDQxMDI0OjIwMjQwOTI5fDIwMjQxMDA0fFd8MTU0fDk2ODEzfFRXTi5TVHxGSVQgUzI0fEJCfHxOOjM2Og&departureCode=WMI&arrivalCode=PFO&checkInDate=2024-09-29&checkOutDate=2024-10-04&destinationDepartureDate=2024-09-29&returnArrivalDate=2024-10-05&metaCode=366501&pricePresentation=perpax>
no regexp at all, but I have this URL in 2 places (maybe this is a problem):
f
ya, might be
they both look valid though - I think you're very close to this working
c
this is URL targeting in visual editor (I changed this minute ago)
and I have URL targeting in main setting of experiment (I changed to exactly this URL minute ago too)
Should I have URL targeting in both places? Currently targieting in both places are the same so should'nt be a problem
f
I can check with the team to see
I Dont think you need both, but it should still work
c
👍
I leave experiment on this URL only
f
can you try some different url targeting options to see?
ya
c
yes, I can change targeting but for what?
f
try removing the experiment conditions and just use the url targeting
c
If you can see page on
Copy code
<https://www.esky.pl/lot+hotel/portfolio/details/select-room?rooms%5B0%5D%5Badults%5D=2&departureDate=2024-06-20&returnDate=2024-10-13&stayLength=5:7&isFlexSearch=true&datesTab=flexDates&context=pl-holidays&landingPageId=6380b6a89a0c207e01b2b5e4&eventSource=portfolio&partner_id=ESKYPLPACKAGES&portfolioToken=c932dd98-5e0f-462c-bb3b-9589fa3936ec&packageId=MjkwOTI0OjU6MzY2NTAxOnBsLWhvbGlkYXlzX2N5cHJ1cw&flightOptionId=V01JUEZPMjQwOTI5Nzh8fEZSNDE3NztQRk9XTUkyNDEwMDQ3OEl8fEZSNDE3OA&hotelOptionId=MzY2NTAxOkJyZWFrZmFzdDoyOTA5MjQ6MDQxMDI0OjIwMjQwOTI5fDIwMjQxMDA0fFd8MTU0fDk2ODEzfFRXTi5TVHxGSVQgUzI0fEJCfHxOOjM2Og&departureCode=WMI&arrivalCode=PFO&checkInDate=2024-09-29&checkOutDate=2024-10-04&destinationDepartureDate=2024-09-29&returnArrivalDate=2024-10-05&metaCode=366501&pricePresentation=perpax>
this element I try to hide in variant 
2
is loaded into page after few seconds since page was load. If css should work with elements loaded later too?
I'm talking about this element
ok, no experiment conditions
and only URL targeting
But, is my feature flag included in this experiment (next to visual experiment) will be targeting via URL targeting from visual editor changes too?
f
they are processed differently
but use the same SDK and same attributes
c
so, conditions in URL targeting in visual editor changes will fire my feature flag only if URL from URL targetin will match?
f
no. they are separate
c
so now, I have feature flag deployed for everyone and visual changes deployed for this URL only
but even now I see no visual changes in variant 
2
unfortunatelly
May I remove URL targeting att all and leave only in experiment conditions and then feature flags and visual changes wuold be targeting via experiment conditions or I should to have separate targeting for visual editor and feature flags ?
My URL targeting for visual editor looks now
Copy code
*
and no changes
Perhaps need to resign from visual editor and change this to feature flags and just inject this feature flags to `<head>`:
Copy code
css_global
and
Copy code
js_global
as a string/json and inject this to <head>.
Is any character limit for feature flags? @fresh-football-47124
f
there is a limit, but its quite large
c
Is possible to know this limit? I'm thinking about two feature flags like 
global_css
and 
global_js
as string and instead of writing css/js in visual editor (which isn't work for me) I would like to write these css/js as value of this feature flags and then backend could just inject this into 
<head>
on my website.
But limit characters are crucial with this solution so it's important to know it.
1. @fresh-football-47124 are your team try to investigate my visual editor changes on page (for variant 2)? I left this test just for your team there
Copy code
<https://www.esky.pl/lot+hotel/portfolio/details/select-room?rooms%5B0%5D%5Badults%5D=2&departureDate=2024-06-20&returnDate=2024-10-13&stayLength=5:7&isFlexSearch=true&datesTab=flexDates&context=pl-holidays&landingPageId=6380b6a89a0c207e01b2b5e4&eventSource=portfolio&partner_id=ESKYPLPACKAGES&portfolioToken=c932dd98-5e0f-462c-bb3b-9589fa3936ec&packageId=MjkwOTI0OjU6MzY2NTAxOnBsLWhvbGlkYXlzX2N5cHJ1cw&flightOptionId=V01JUEZPMjQwOTI5Nzh8fEZSNDE3NztQRk9XTUkyNDEwMDQ3OEl8fEZSNDE3OA&hotelOptionId=MzY2NTAxOkJyZWFrZmFzdDoyOTA5MjQ6MDQxMDI0OjIwMjQwOTI5fDIwMjQxMDA0fFd8MTU0fDk2ODEzfFRXTi5TVHxGSVQgUzI0fEJCfHxOOjM2Og&departureCode=WMI&arrivalCode=PFO&checkInDate=2024-09-29&checkOutDate=2024-10-04&destinationDepartureDate=2024-09-29&returnArrivalDate=2024-10-05&metaCode=366501&pricePresentation=perpax>
2. Could you verify the character limits for string and JSON feature flags values?
f
Hi Mario - sorry, didn't see this - do you still need help with this?
135 Views
Open in Slack
PreviousNext
Powered by

GrowthBook Users

Open source platform for stress free deployments, measured impact, and smarter decisions.

Powered by