shopify-posthog-custom-web-pixel

pixel.js

const postHogApiKey = "POSTHOG_API_KEY";
const postHogEndpoint = "https://app.posthog.com/capture";
const headers = {
  "Content-Type": "application/json",
};

// Customer information
const customer = init.data.customer;
const { id, email, firstName, lastName } = customer;
const fullName = `${firstName} ${lastName}`;
const fullNameAndEmail = `${fullName} - ${email}`;
const customerProps = {
  id: id,
  email: email,
  first_name: firstName,
  last_name: lastName,
  full_name: fullName,
  full_name_and_email: fullNameAndEmail,
};

const STANDARD_EVENTS = {
  CART_VIEWED: "cart_viewed",
  CHECKOUT_ADDRESS_INFO_SUBMITTED: "checkout_address_info_submitted",
  CHECKOUT_COMPLETED: "checkout_completed",
  CHECKOUT_CONTACT_INFO_SUBMITTED: "checkout_contact_info_submitted",
  CHECKOUT_SHIPPING_INFO_SUBMITTED: "checkout_shipping_info_submitted",
  CHECKOUT_STARTED: "checkout_started",
  COLLECTION_VIEWED: "collection_viewed",
  PAGE_VIEWED: "page_viewed",
  PAYMENT_INFO_SUBMITTED: "payment_info_submitted",
  PRODUCT_ADDED_TO_CART: "product_added_to_cart",
  PRODUCT_REMOVED_FROM_CART: "product_removed_from_cart",
  PRODUCT_VIEWED: "product_viewed",
  SEARCH_SUBMITTED: "search_submitted",
};

const DOM_EVENTS = {
  CLICKED: "clicked",
  FORM_SUBMITTED: "form_submitted",
  INPUT_BLURRED: "input_blurred",
  INPUT_CHANGED: "input_changed",
  INPUT_FOCUSED: "input_focused",
};

function sendEvent({ eventName, eventProps = {}, timestamp }) {
  const payload = {
    api_key: postHogApiKey,
    event: eventName,
    distinct_id: customerProps.id,
    properties: {
      $set: {
        ...customerProps,
      },
      ...eventProps,
    },
    timestamp: timestamp,
  };

  // console.log("Sending payload", JSON.stringify(payload)); // for debugging only

  fetch(postHogEndpoint, {
    method: "POST",
    headers: headers,
    body: JSON.stringify(payload),
    mode: "no-cors",
  })
    .then((response) => {
      if (response.ok) {
        console.log(`${eventName} event sent successfully`);
      } else {
        console.log(
          `${eventName} event failed with status: ${response.status}`
        );
      }
    })
    .catch((error) =>
      console.error(`Error sending ${eventName} event:`, error)
    );
}

// STANDARD EVENTS
analytics.subscribe(STANDARD_EVENTS.CART_VIEWED, (event) => {
  sendEvent({
    eventName: STANDARD_EVENTS.CART_VIEWED,
    eventProps: {
      title: event.context.document.title,
      $current_url: event.context.document.location.href,
    },
    timestamp: event.timestamp,
  });
});

analytics.subscribe(
  STANDARD_EVENTS.CHECKOUT_ADDRESS_INFO_SUBMITTED,
  (event) => {
    sendEvent({
      eventName: STANDARD_EVENTS.CHECKOUT_ADDRESS_INFO_SUBMITTED,
      eventProps: {
        title: event.context.document.title,
        $current_url: event.context.document.location.href,
      },
      timestamp: event.timestamp,
    });
  }
);

analytics.subscribe(STANDARD_EVENTS.CHECKOUT_COMPLETED, (event) => {
  sendEvent({
    eventName: STANDARD_EVENTS.CHECKOUT_COMPLETED,
    eventProps: {
      title: event.context.document.title,
      $current_url: event.context.document.location.href,
    },
    timestamp: event.timestamp,
  });
});

analytics.subscribe(
  STANDARD_EVENTS.CHECKOUT_CONTACT_INFO_SUBMITTED,
  (event) => {
    sendEvent({
      eventName: STANDARD_EVENTS.CHECKOUT_CONTACT_INFO_SUBMITTED,
      eventProps: {
        title: event.context.document.title,
        $current_url: event.context.document.location.href,
      },
      timestamp: event.timestamp,
    });
  }
);

analytics.subscribe(
  STANDARD_EVENTS.CHECKOUT_SHIPPING_INFO_SUBMITTED,
  (event) => {
    sendEvent({
      eventName: STANDARD_EVENTS.CHECKOUT_SHIPPING_INFO_SUBMITTED,
      eventProps: {
        title: event.context.document.title,
        $current_url: event.context.document.location.href,
      },
      timestamp: event.timestamp,
    });
  }
);

analytics.subscribe(STANDARD_EVENTS.CHECKOUT_STARTED, (event) => {
  sendEvent({
    eventName: STANDARD_EVENTS.CHECKOUT_STARTED,
    eventProps: {
      title: event.context.document.title,
      $current_url: event.context.document.location.href,
    },
    timestamp: event.timestamp,
  });
});

analytics.subscribe(STANDARD_EVENTS.COLLECTION_VIEWED, (event) => {
  sendEvent({
    eventName: STANDARD_EVENTS.COLLECTION_VIEWED,
    eventProps: {
      title: event.context.document.title,
      $current_url: event.context.document.location.href,
    },
    timestamp: event.timestamp,
  });
});

analytics.subscribe(STANDARD_EVENTS.PAGE_VIEWED, (event) => {
  sendEvent({
    eventName: "$pageview",
    eventProps: {
      title: event.context.document.title,
      $current_url: event.context.document.location.href,
    },
    timestamp: event.timestamp,
  });
});

analytics.subscribe(STANDARD_EVENTS.PAYMENT_INFO_SUBMITTED, (event) => {
  sendEvent({
    eventName: STANDARD_EVENTS.PAYMENT_INFO_SUBMITTED,
    eventProps: {
      title: event.context.document.title,
      $current_url: event.context.document.location.href,
    },
    timestamp: event.timestamp,
  });
});

analytics.subscribe(STANDARD_EVENTS.PRODUCT_ADDED_TO_CART, (event) => {
  sendEvent({
    eventName: STANDARD_EVENTS.PRODUCT_ADDED_TO_CART,
    eventProps: {
      title: event.context.document.title,
      $current_url: event.context.document.location.href,
    },
    timestamp: event.timestamp,
  });
});

analytics.subscribe(STANDARD_EVENTS.PRODUCT_REMOVED_FROM_CART, (event) => {
  sendEvent({
    eventName: STANDARD_EVENTS.PRODUCT_REMOVED_FROM_CART,
    eventProps: {
      title: event.context.document.title,
      $current_url: event.context.document.location.href,
    },
    timestamp: event.timestamp,
  });
});

analytics.subscribe(STANDARD_EVENTS.PRODUCT_VIEWED, (event) => {
  sendEvent({
    eventName: STANDARD_EVENTS.PRODUCT_VIEWED,
    eventProps: {
      title: event.context.document.title,
      $current_url: event.context.document.location.href,
    },
    timestamp: event.timestamp,
  });
});

analytics.subscribe(STANDARD_EVENTS.SEARCH_SUBMITTED, (event) => {
  sendEvent({
    eventName: STANDARD_EVENTS.SEARCH_SUBMITTED,
    eventProps: {
      title: event.context.document.title,
      $current_url: event.context.document.location.href,
    },
    timestamp: event.timestamp,
  });
});

// DOM EVENTS
analytics.subscribe(DOM_EVENTS.CLICKED, (event) => {
  sendEvent({
    eventName: DOM_EVENTS.CLICKED,
    eventProps: {},
    timestamp: event.timestamp,
  });
});

analytics.subscribe(DOM_EVENTS.FORM_SUBMITTED, (event) => {
  sendEvent({
    eventName: DOM_EVENTS.FORM_SUBMITTED,
    eventProps: {},
    timestamp: event.timestamp,
  });
});

analytics.subscribe(DOM_EVENTS.INPUT_BLURRED, (event) => {
  sendEvent({
    eventName: DOM_EVENTS.INPUT_BLURRED,
    eventProps: {},
    timestamp: event.timestamp,
  });
});

analytics.subscribe(DOM_EVENTS.INPUT_CHANGED, (event) => {
  sendEvent({
    eventName: DOM_EVENTS.INPUT_CHANGED,
    eventProps: {},
    timestamp: event.timestamp,
  });
});

analytics.subscribe(DOM_EVENTS.INPUT_FOCUSED, (event) => {
  sendEvent({
    eventName: DOM_EVENTS.INPUT_FOCUSED,
    eventProps: {},
    timestamp: event.timestamp,
  });
});