Using Split with a Shopify store?
Hello Split Community,
We're a team running a Shopify store and hoping to use Split to continually update our Shopify website using A/B testing. We don't know much HTML or Javascript but can learn the basics if necessary.
We're looking for guidance as to how exactly go about designing the treatments (i.e. what syntax to use) within a Split.
1. Is there a way to define treatments without code?
2. If not, can we get some detailed examples of what different treatments look like? Can a treatment modify HTML elements on a Shopify website?
So you have an idea of what we've already done, we've worked our way through the tutorials. We've created a very basic split on our Shopify website (see code and output below). The Split has no attributes and simply displays a line of text on the page when switched on.
We've also integrated Split with Segment, but are not sure exactly what functionality this integration provides. Can we add attributes to Split via Segment?
It would be most helpful to us to get examples as to what to include in the treatment syntax. Thank you.
-
1- Treatments are created from the Split UI (app.split.io) when a split is added to an environment.
2- Typical treatments are "on" and "off", I suggest to watch videos in this link : https://help.split.io/hc/en-us/articles/360027782151-Creating-splits-and-whitelists
3- You can import customer attributes from Segment to Split, however, these attributes can be seen from the split UI only, and cannot be used in targeting rules. -
Hi Emma,
Thank you for your reply! I read/watched the article/videos you linked to, and played around with the Split UI on app.split.io.
I have a few follow-up questions:
1. The video discusses "putting in the code for the on, off, and control treatments," but doesn't give any examples. Is there documentation with example code for on, off, and control treatments?
2. Is it possible, using split, to work with HTML code in my Shopify store? As a basic example, suppose that I have a button on my website that says "Add to cart." I want to create a split whereby 50% of users will see "Add to a cart" as a blue button and 50% will see "Add to cart" as a red button. Could my on, off, and control treatment codes accomplish this, and if so, how?
3. How can I create segments that align with my Shopify store? For example, if I have certain customers in my Shopify store with unique customer IDs, and I want to add those customers to a "VIP" segment, so that I can create splits targeted toward them - how can I import those segments from Shopify to Split?
All the best,
Samarth
-
Dave Murphy - Can you post the solution here? Would be helpful to better understand how Split can integrate with a Shopify store / liquid template?
For example: setting up a feature flag for a banner/pop-up for segments of users that aren't signed in (ie. is new or repeat visitor, traffic source (FB/google/pinterest), etc.)
-
Hi Alec, regarding setting up a flag for users that are not signed in you have to decide what you are going to pass as a key. Often, for users that you don't know, you can set a cookie to have a persistent treatment. I'm not familiar enough to know if there is a specific way to identify a returning, anonymous user in Shopify that would be better than a cookie.
Though, if you are using a targeting rule that chooses the treatment based on, for example, traffic source, you can pass that as a custom attribute and the key will not be as critical if that's the basis for choosing which treatment a user gets, and not based on the key passed.
As it relates to Shopify specifically, Split is deployed in a front end application, such as Shopify, via the JavaScript SDK. Installing the SDK is documented here: https://help.split.io/hc/en-us/articles/360025334751-Step-1-Install-the-SDK. Details on implementing the JavaScript SDK is documented here: https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK.
Once you create the split through the UI, as described in the video Emma pointed to, you can get the syntax for your split by clicking on the 3 dots next to the Kill button.
A treatment doesn't modify HTML code. You must code the two different treatments. Split then evaluates the rules you created to determine what treatment the user will get. The syntax for doing this is what you would copy from the UI. It's also detailed in the JavaScript link above.
If you know a list of users ahead of time you can create a 'segment' in Split by putting those IDs in a list, as described here https://help.split.io/hc/en-us/articles/360020407512-Create-a-segment
The other way to do this is via attributes, as referenced above. To do that, you need to know the attribute of the user at runtime and pass that information to the split when you call getTreatment as described here: https://help.split.io/hc/en-us/articles/360020448791-JavaScript-SDK#attribute-syntax
The video that Emma pointed to is good for showing what you need to do in the UI. The videos on this page under Install will provide more information about implementing the SDK in your code: https://help.split.io/hc/en-us/articles/360025949151-Split-Videos
Please sign in to leave a comment.
Comments
5 comments