Issue with Targeting/Routing Based on QueryParam

Technical Questions
1

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
N/A

What are you trying to accomplish
I would like to launch pages to our production environment, but have them only be accessible if a queryParam of preview=true is included in the URL.

I set up a “queryParam” Custom Targeting Attribute as suggested in this post:

I then attempt to add targeting to the queryParam in the page targeting (see screenshot)

However, when I then try to hit the URL with the query param, I don’t successfully target the page and I get our standard 404 page.

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

Screen Shot 2022-03-04 at 10.10.28 AM
Screen Shot 2022-03-04 at 10.10.28 AM1230×670 36.3 KB

Code stack you are integrating Builder with
NextJS/React

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!

2

Hey @alexleeRS great question

So the article you link has a number of things that make it Shopify-specific, such as the need to include a <script> with window.builderWcLoadCallbacks, and the toggle to render the section model client-side only.

Since I don’t believe your page is using Shopify, you won’t actually need to do any of that. In order for targeting to work for non-Shopify customers, you need to pass the targeting values to Builder within your code base. You probably could find a way to access the query param and pass it to and your builder.get() call, but that might be difficult since I believe you are also using SSR.

Because of all of that, I actually think a much more straight forward approach is to conditionally render the based on if the query param is present/true. So for example, if I had an app matching this starter: Next JS Simple Starter

You could change the Page element to something like:


export default function Page({ page }) {
  const router = useRouter()
  if (router.isFallback) {
    return <h1>Loading...</h1>
  }
  const isLive = !Builder.isEditing && !Builder.isPreviewing

  if ((!page && isLive) || (isLive && !router.query.preview)) {
    return (
      <>
        <Head>
          <meta name="robots" content="noindex" />
          <meta name="title"></meta>
        </Head>
        <DefaultErrorPage statusCode={404} />
      </>
    )
  }

  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <BuilderComponent model="page" content={page}>
        This is default component
      </BuilderComponent>
    </>
  )
}

Or essentially some version of:

if (router.query.preview || Builder.isEditing || Builder.isPreviewing) {
  /// render builder content
}

Do you think that will achieve the end result you are looking for of conditionally displaying pages based on the ?preview=true param? Test it out and let me know if it works for you!