Installing the Uptick Digital Advertising Widget

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

Add our Integration Script to your page layout 

<script type="module">
  const target = document.head || document.body;
  const script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://app.uptick.com/i/places/AAAAAAAA-BBBB-CCCC-DDDD-EEEEEEEEEEEE/offers.js";
  script.async = 1;
  script.src += "?async=true"
  script.id = "uptick-script";
  target.appendChild(script);
</script>

Create an UptickFlow component

Create a new component in your application that will render ads when it’s rendered. This can be called uptick-flow.js.

import React, { useEffect, useRef } from "react";

let isUptickInitialized = false;

export default function Uptick({
  children,
  ...properties
}) {
  const elementRef = useRef(null);

  useEffect(() => {
    if (!isUptickInitialized) {
      (async () => {
        await new Promise((resolve) => {
          window.uptick
            ? resolve()
            : document.getElementById("uptick-script").addEventListener("load", () => resolve());
        });

        window.uptick("init", elementRef.current, properties);
      })();
      isUptickInitialized = true;
    }
  }, [properties]);

  return (
    <div ref={elementRef} {...properties} />
  )
}

Activating Uptick Promotion

To show the Uptick Widget, import the previously created component and render it in your application.

import UptickFlow from '../uptick-flow';

When you render the component itself, make sure to include the placement prop. This prop identifies the location where the widget should be rendered, and it is the only required parameter.

<UptickFlow
  placement="order_confirmation"
  first_name="Reggie"
  total_price="$49.99"
  shipping_price="$9.99"
  order_id="12345"
/>

While only placement is required, we strongly recommend passing the following props to improve performance through better personalization of offers:

  • placement: The page type where offers are displayed (e.g., "checkout", "order_confirmation", or "order_status")
  • first_name: The first name of the person receiving the offer, used for personalization
  • total_price: Total price of the order
  • shipping_price: Just the shipping price of the order
  • order_id: The merchant’s order confirmation number or order ID

Note:

  • The script tag contains an ID (AAAAAAAA-BBBB-CCCC-DDDD-EEEEEEEEEEEE). Ensure that you replace this with the correct ID assigned to your integration. Using an incorrect or generic ID will lead to unsuccessful widget activation.

Troubleshooting Tips:

  • If you encounter any layout disruptions, confirm that you’ve placed the script tag correctly 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.