How do I target by query string parameters in Shopify using theme studio?

[korey]

Usually the need to target content based on query parameters (e.g. utm_campaign) arises when showing specific content to users that come in via paid advertising. There are few different ways to show different content to people depending on what ads they see.

1. Use a custom dropzone with client side only setting
   Builder uses server side targeting to make sure your content loads as fast as possible, as well as give you access to shopify targeting data (e.g. customers, products, collections, etc.). However, query parameters are not available when rendering on the shopify sesrver. To get around this, you can create a custom dropzone model and then set it to only render client side. When creating the model, click on “Show more options” and select the “Client side only” option. Note that this approach will make it so you can no longer use the built in Shopify targeting:

The next Step is to add a custom attribute to your organization so that we can pass the query param to the Builder component. Visit the organization settings page in Builder, click to edit “custom targeting attributes.” Add in a custom targeting attribute called queryParam so that we can target off of any query parameter we want.

Next, you will need to paste the following piece of code wherever you put the custom dropzone in your shopify theme. This code will pass the correct targeting information to Builder.

<script>
  window.builderWcLoadCallbacks = [function (context) {
    return context.builder.setUserAttributes({
      /* Add your targeting attributes for Builder
       * to dynamically load content to the web component above
       */
      queryParam: window.location.search
    });
  }];
</script>

Now you will be able to select the Query param attribute when targeting content:

2. Use different pages
   If you can control what page people visit after clicking a particular ad, then the easiest way to control what content they view is to create different content on different urls. In other words, create specific landing pages for specific ads. This approach will work for /pages landing pages, but will not work if you are sending people to product or collection pages.

3. Use alternate views
   You can create alternate views for theme pages within Builder. These alternate views allow you to tailor content specifically for people that visit the page and have the parameter ?view=some-view in the URL. If you have control over what page a user is visiting once they click an ad, then you can include the view parameter in that URL and they will see the correct content. For more information on alternate views, read this doc.

4. Use state bindings
   If you are creating ads in a more dynamic way, or only are changing a few items on a page depending on the query params present in the URL, then using state bindings in Builder are a fantastic way to go. Builder automatically puts information about the current URL on the state object, and it can be accessed by referencing state.location.

   Let’s say for example that I want to display a specific header image, title, and sub text for different users based on the value of a certain query parameter. What I can do is:

   1. In the Builder editor, click on the block I want to show or hide based on query parameter. Then click on the data tab. (Tip: if you want show and hide multiple items that are close together, group them all into a box and then you only need to hide/show the containing box)
   2. Once in the data tab, click on + NEW BINDING. In the choose property box that appears after that, click the dropdown arrow and select “Show if.” Then in the textbox directly to the right that says “choose binding,” enter the following javascript: state.location.query['myQueryParam'] === 'myValue', replacing myQueryParam with whatever your query param is (e.g. utm_campaign) and replacing myValue with the value of the param for when you want to show that particular block (i.e. if my param is ?utm_campaign=shoes the value would be shoes).
   3. All done! Whatever content you put in the box that you added the above state binding to will only show when someone visits the page with the correct query param and value present in the URL. For an example of all this put together, visit this fiddle. You can see it working by visiting:
      • Default title: builder.io/fiddle
      • Title variant one: builder.io/fiddle?utm_campaign=title-one
      • Title variant two: builder.io/fiddle?utm_campaign=title-two