Installing the Uptick Digital Advertising Widget

Enhance your site by seamlessly integrating our advertising widget. The setup is quick and consists of two core steps. By following these guidelines, you can embed our widget and showcase targeted advertising to your audience.

Inserting the HTML Placeholder

The initial step involves setting a placeholder where the advertising widget will appear. Utilize the following HTML snippet to designate the widget’s position on your page:

<div id="uptick-offers" data-uptick-target="content" class="uptick-target section"></div>

For Styling: To ensure a seamless appearance that complements your site’s design, we advise enhancing the HTML snippet with any additional classes that might help. The offer HTML will render inside this div.

Load the Script

Our integration is designed to be as minimal as possible in order to ensure the best performance for your users. Add this script tag on your page in the <head> section before other third-party integrations.

* Make sure to replace the AAAAAAAA-BBBB-CCCC-DDDD-EEEEEEEEEEEE with your integration id 

<script type="module">
  window.UptickScript = new Promise((resolve, reject) => {
    const target = document.head || document.body;
    const script = document.createElement("script");
    script.id = "uptick-script";
    script.type = "text/javascript";
    script.async = true;
    script.src = "https://app.uptick.com/i/places/AAAAAAAA-BBBB-CCCC-DDDD-EEEEEEEEEEEE/offers.js";
    script.src += "?path=" + encodeURIComponent(window.location.pathname);
    script.src += "&async=true"

    script.addEventListener('load', () => resolve());
    script.addEventListener('error', (error) => reject(error));

    target.appendChild(script);
  });
</script>

Troubleshooting Tips:

  • If you encounter any layout disruptions, confirm that you’ve placed the script tag in the right sequence and used the appropriate integration ID.
  • Ensure that no other scripts or styles on your page conflict with our widget’s functionality. If the issue persists, reach out to our technical support team for further assistance.

Activating the Offer Flow

The next step is to activate the offer flow. By default this is done as soon as the script is loaded. If you need this to activate on another event you can modify the function below to achieve that.

<script type="module">
  await window.UptickScript;
  const target = document.getElementById("uptick-offers");

  window.uptick(
    "init",
    target,
    {
      placement: "order_confirmation"
    }
  )
</script>

The third parameter for the uptick function includes additional properties you want to initialize this flow with. The placement is the only required parameter.

Optional Parameters

The only required parameter is placement. However you may also specify some optional parameters as well. One that may be of interest would be first_name which helps with personalization.

{
  placement: "order_confirmation", // Can also be "order_status" for the Order Status page
  first_name: "Reggie"
}

The next would be country for any specific targeting or exclusions we might want to implement.

{
  placement: "order_confirmation", // Can also be "order_status" for the Order Status page
  first_name: "Reggie",
  country_code: "US"
}

You can also include order amount information, which can be useful for certain types of offers.

{
  placement: "order_confirmation", // Can also be "order_status" for the Order Status page
  currency: "USD",
  total_price: "$49.99",
  shipping_price: "$9.99"
}

Parameter List

Site

  • placement: The page the user is on required
  • site_domain / shop_domain: The url of the site that you’re on.
  • site_id: If you have unique site identifiers, you can use this instead of the domain.

User

  • first_name: The first name of person receiving the offer
  • country_code: The 2 digit country code for the user

Order

  • currency: The currency of the transaction using the 3-digit ISO code
  • total_price: Total price of the order
  • shipping_price: Just the shipping price of the order

Tracking Uptick Events

You can include a JavaScript callback when initializing the flow if you want to track the events within the flow. This can be useful to inform internal analytics about the performance

const callback = function(event, data) {
  // If needed, process custom event data here
  //
  // You're going to see events like:
  //   - flow_initiated
  //   - offer_requested
  //   - offer_viewed
  //   - offer_accepted
  //   - offer_rejected
  console.log(event, data);
}

window.uptick(
  "init",
  target,
  {
    placement: "order_confirmation"
  },
  callback
)