Dynamic Forms

In this tutorial we're going to show how we can use Lincx to dynamically filter results with form controls.

For the purpose of this example we are going to be creating an e-commerce display, but this will work just as well for leads or surveys.

Here is a live demo of what we will be showing how to build:

Setting Up Your Network

Before we continue, please make sure that you have a complete Network. Follow the Network Setup Guide if you would like to see how we created the Network used in this guide. 

Dynamic Rendering

Currently our Ad Client script is in "automatic" mode. It will automatically render ads at the script's location on the page.

However, if we want the Ads to change in response to changes in the form responses, we will need to change our Ad Client so that it starts in "manual" mode:

<script
  src="https://api.lincx.com/load"
  data-manual-render="true">
</script>

Because we have placed the Ad Client in "manual" mode, we don't need to set the zone ID or the criteria here, we will do that with JavaScript. Here's how we can perform the same behavior of "automatic" mode:

<div id="lincx-target"></div>
<script
  src="https://api.lincx.com/load"
  data-manual-render="true">
</script>
<script>
  window.lincx(document.getElementById('lincx-target'), {
    zoneId: '6nayp6',
    gender: 'women',
    shoeType: 'boots'
  })
</script>

Of course, there is no reason to use "manual" mode to do the same thing as "automatic." The advantage is that we have a lot more flexibility in "manual" mode. Let us now change our code so that we only render ads once the form changes:

<script>
  var target = document.getElementById('lincx-target')

  var genderSelect = document.getElementById('gender')
  var shoeTypeSelect = document.getElementById('shoeType')

  genderSelect.addEventListener('change', onInputChange)
  shoeTypeSelect.addEventListener('change', onInputChange)

  function onInputChange (evt) {
    target.innerHTML = ''
    window.lincx(target, {
      zoneId: '6nayp6',
      gender: genderSelect.value.toLowerCase(),
      shoeType: shoeTypeSelect.value.toLowerCase()
    })
  }
</script>

Once we replace our simple JavaScript code with the above, we can see that our Ad will only render when both gender is women and shoeType is boots:

Wrapping Up

Once we control the ad rendering with our JavaScript, the only thing left to do is add more Advertisers, Creatives, Ad Groups, and Ads. Here is what our page looks like when there are more Ads to choose from: