Home App Docs Blog Github

Using Query Parameter Bindings

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link

Builder public api key
d85cc1ef33d94d30b8bc4ed686ab9b49

What are you trying to accomplish
I want to use Query Parameter Bindings to deliver dynamic content in the announcement bar based on the utm parameters set in paid ad links.

Screenshots or video link
Screenshots of your issue, or even better a link to a video of what is happening or what you are trying to accomplish. We love using loom for that sort of thing

Code stack you are integrating Builder with
Shopify

Reproducible code example
If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!

Hello, @chinawoodshed, and welcome to the Builder Forum!

Builder is able to access the URL parameters through its ‘state’ object. Since you are working on a page that is connected to Shopify, you can’t edit the previewing URL in the Visual Editor. While making this, you may need to open the Live Preview option and manually add the parameter to the URL until you publish the page.

Example

Let’s say you have a URL parameter called “paidAd” which has a value of “someProduct”.

www.website.com/page?paidAd=someProduct

Let’s also say that you’d like to bind a text object to display a dynamic message depending on the value of “paidAd”. For example, a message on the announcement bar that advertises “someProduct”.

Bind URL Param data to a text element

Start by dragging a text element onto the page. Then, head into the “DATA” tab and add a new data binding.

Select the “Get Text from…” option, then select the custom code button. In the custom code screen, we can ask for the URL query from the ‘state’ object. Simply typing state.location.query will result in the text box we are using to display “[object, Object]”, which means that we have successfully bound the text to a Javascript object.

Since we know there will be parameter called “paidAd”, we can add that to our binding:

state.location.query.paidAd

This will display the text value that “paidAd” has in the URL.

Finally, let’s add some simple Javascript logic to this, so that we display some more useful text:

if (state.location.query.paidAd === 'someProduct'){
    return 'This is an ad for the product that is available based on the URL.'
} else {
    return 'There is no parameter, so no ad.'
}

Troubleshooting

If you are not able to see things working correctly on the Live Preview version of this page, with the URL parameter added, you can manually ask the browser window for the parameter you’re looking for and assign it to the state object. The following code can be added to the “isBrowser” section of the custom JS + CSS code panel at the bottom of the DATA tab.

(keep in mind that we are looking for a parameter called “paidAd” in this example)

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
//assign a new variable called "paidAdResult" to the result of "paidAd"
const paidAdResult = urlParams.get('paidAd');
//Add a "paidAd" key to the "state" object so that we can use it elsewhere. 
state.paidAd = paidAdResult;

Then, in your text data binding from earlier, you can update the code to now say:

if (state.paidAd === 'someProduct'){
    return 'This is an ad for the product that is available based on the URL.'
} else {
    return 'There is no parameter, so no ad.'
}

Thanks @logan for the comprehensive and prompt reply.

Shouldn’t this be as simple as the example in the Query Parameter Binding fiddle?

Based on that example, this box should display when utm_id = “splash”

In the JSON view it appears some code is missing as compared to the view in the Fiddle; compare:

Breakaway site:
Screen Shot 2021-11-15 at 12.38.13 PM

Fiddle:
Screen Shot 2021-11-15 at 12.38.44 PM

Is this the source of the issue?

Hello!

I did some investigating and found that Builder is not able to pull the parameters into State for this page. I used the troubleshooting steps to manually ask the browser for the parameter, instead. I bound the box to show when “state.utm_id” is the value you want.

To see this in action, open the live preview of this page Builder.io: Drag and drop page builder and CMS and add &utm_id=splash to the very end of the URL, then reload the page. The desired box will appear!

Thanks @logan!

This is very helpful. I have 2 more questions:

  • If we can’t pull the parameters into State for this page, how do we write a rule that will HIDE the default content (functioning as a Hide if…)?

  • Why is it that Builder is not able to pull the parameters into State for this page?