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.test/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 key. This key is used to identify the location where the widget should be rendered.

<UptickFlow placement="order_confirmation" />

There are additional parameters you can include as well to customize the widget. These parameters are passed as props to the UptickFlow component.

  • placement - The placement key is used to identify the location where the widget should be rendered.
  • first_name - The first name of the user.
  • zip - The zip code of the user.
  • total_price - The total price of the order
  • shipping_price - The shipping price of the order. Please use the format $4.99 with the currency symbol included.

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.