Shopify Custom NextJS React Vue storefronts integration guide - anujtenani/goaffpro GitHub Wiki

Next JS

1. Create a custom _app.jsx in /pages directory /pages/app.jsx (https://nextjs.org/docs/advanced-features/custom-app)
2. Add the global tracking in there with next/script

import Script from 'next/script'

function MyApp({ Component, pageProps }) {
  return <>
      <Script src="https://api.goaffpro.com/loader.js?shop=your-shop-domain" strategy="beforeInteractive" />
      <Component {...pageProps} />
    </>
}
export default MyApp

Note: Please replace the script URL with the URL from Settings -> Advanced Settings -> Third party tracking section

The basic referral tracking is now set. 3. To track conversion, in your storefront's order thank you page. Call the function goaffproTrackConversion with the shopify ORDER ID

eg.

import React, {useEffect} from 'react'

function OrderThankYou(props) {
  useEffect(()=>{
    if(typeof window !== undefined){
       window.goaffpro_order = {
         id: '83727839393' // use the real shopify order ID
       };
       if(window.goaffproTrackConversion){
         window.goaffproTrackConversion(window.goaffpro_order)
       }
    }
  }, [])
  return <>Your content of the order thank you page</>
}
export default OrderThankYou