How to create a custom pixel in Shopify with cart data for Google Ads

// Start ProfitMetrics - Conversion Booster for Google Ads - (v4)

// Configuration
let pmGtagId = 'AW-XXXXXXXXX'; // Insert Google Ads Conversion ID
let orderValueModifier = 0.XX; // Insert Average Order Profit Margin
let revenueInclTax = true;
let includeCartDataInRevenue = true;
let includeCartDataInGrossProfit = true;
let pmItemIdType = 'variant_id'; // Choose between 'shopify_id', 'variant_id', 'sku', 'parent_id'
let pmRemarketingCC = 'XX'; // IF 'shopify_id' is select THEN insert Shopify Country Code
let pmMerchantCenterId = XXXXXXXXX; // Insert Merchant Center ID
let pmFeedCountry = 'XX'; // Insert Feed Country
let pmFeedLanguage = 'xx'; // Insert Feed Language


let enableLogs = false;


function debugLog(...args) {
  if (enableLogs) {
    console.log("PM:", ...args);
  }
}

debugLog("Initializing ProfitMetrics - Conversion Booster");

debugLog("ProfitMetrics Configurations:", {
  pmGtagId, orderValueModifier, revenueInclTax, includeCartDataInRevenue, 
  includeCartDataInGrossProfit, pmMerchantCenterId, pmFeedCountry, pmFeedLanguage, REMARKETING_COUNTRY_CODE
});

// Consent Configuration
let customerPrivacyStatus = init.customerPrivacy;
let cc_marketing = false;
let cc_statistics = false;
debugLog("Initial customer privacy status:", customerPrivacyStatus);

// Load Google Tag
debugLog("Loading Google Tag Manager script");
const script = document.createElement('script');
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=' + pmGtagId);
script.setAttribute('async', '');
document.head.appendChild(script);

window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
  debugLog("gtag event:", arguments);
}

// Default Consent
debugLog("Setting default consent");
gtag('consent', 'default', {
  'ad_storage': cc_marketing ? 'granted' : 'denied',
  'ad_user_data': cc_marketing ? 'granted' : 'denied',
  'ad_personalization': cc_marketing ? 'granted' : 'denied',
  'analytics_storage': cc_statistics ? 'granted' : 'denied',
  'wait_for_update': 500,
});

gtag('js', new Date());
gtag('config', pmGtagId);

// Update Consent Function
function updateConsent() {
  debugLog("Updating consent based on customer preferences");
  cc_statistics = customerPrivacyStatus.analyticsProcessingAllowed;
  cc_marketing = customerPrivacyStatus.marketingAllowed;

  gtag('consent', 'update', {
    'ad_storage': cc_marketing ? 'granted' : 'denied',
    'ad_user_data': cc_marketing ? 'granted' : 'denied',
    'ad_personalization': cc_marketing ? 'granted' : 'denied',
    'analytics_storage': cc_statistics ? 'granted' : 'denied',
  });
}

// Subscribe to Visitor Consent Updates
debugLog("Subscribing to visitor consent updates");
api.customerPrivacy.subscribe('visitorConsentCollected', (event) => {
  debugLog("Visitor consent collected:", event);
  customerPrivacyStatus = event.customerPrivacy;
  updateConsent();
});

// Event - Page View
analytics.subscribe("page_viewed", async (event) => {
  debugLog("Page viewed event detected");
  updateConsent();
});

// Event - Purchase
analytics.subscribe("checkout_completed", async (event) => {
  debugLog("Checkout completed event detected:", event);
  var pmOrderId = event.data.checkout.order.id;
  var pmOrderValue = event.data.checkout.totalPrice.amount;
  var pmOrderValueExTax = event.data.checkout.totalPrice.amount - event.data.checkout.totalTax.amount;
  var pmOrderCurrency = event.data.checkout.currencyCode;
  var pmOrderEmail = event.data.checkout.email;
  var pmOrderItems = event.data.checkout.lineItems;


  debugLog("Order details:", { pmOrderId, pmOrderValue, pmOrderValueExTax, pmOrderCurrency, pmOrderEmail });

  if (cc_marketing || cc_statistics) {
    try {
      const pmShopifyLastOrder = { orderId: pmOrderId, ts: Math.floor(new Date() / 1e3) };
      browser.sessionStorage.setItem('pmShopifyLastOrderId', JSON.stringify(pmShopifyLastOrder));
      debugLog("Stored last Shopify order ID in session storage", pmShopifyLastOrder);
    } catch (e) {
      console.error("Error storing order ID in session storage:", e);
    }
  }

  // Include Cart Data
  const pmCartData = Array.isArray(pmOrderItems) ? pmOrderItems.map(item => ({
    id: {
      shopify_id: `shopify_${pmRemarketingCC}_${item.variant?.product?.id}_${item.variant?.id}`,
      variant_id: item.variant?.id,
      sku: item.variant?.sku,
      parent_id: item.id
    }[pmItemIdType],
    quantity: item.quantity,
    price: item.finalLinePrice?.amount || 0,
  })) : (console.error("Invalid array (pmOrderItems):", pmOrderItems), []);

  debugLog("Cart data:", pmCartData);

  // Send Conversion
debugLog("Sending conversion event to Google Ads");
gtag('event', 'purchase', {
    send_to: 'AW-XXXXXXXXX/ZZZZZZZZZZZZZZZZZZZZ',
    value: revenueInclTax ? pmOrderValue : pmOrderValueExTax,
    currency: pmOrderCurrency,
    transaction_id: pmOrderId,
    ...(includeCartDataInRevenue && pmMerchantCenterId ? { aw_merchant_id: pmMerchantCenterId } : {}),
    ...(includeCartDataInRevenue && pmFeedCountry ? { aw_feed_country: pmFeedCountry } : {}),
    ...(includeCartDataInRevenue && pmFeedLanguage ? { aw_feed_language: pmFeedLanguage } : {}),
    ...(includeCartDataInRevenue ? { items: pmCartData } : {}),
});

debugLog("Sending gross profit event to Google Ads");
gtag('event', 'purchase', {
    send_to: 'AW-XXXXXXXXX/YYYYYYYYYYYYYYYYYYY',
    value: pmOrderValueExTax * orderValueModifier,
    currency: pmOrderCurrency,
    transaction_id: pmOrderId,
    ...(includeCartDataInGrossProfit && pmMerchantCenterId ? { aw_merchant_id: pmMerchantCenterId } : {}),
    ...(includeCartDataInGrossProfit && pmFeedCountry ? { aw_feed_country: pmFeedCountry } : {}),
    ...(includeCartDataInGrossProfit && pmFeedLanguage ? { aw_feed_language: pmFeedLanguage } : {}),
    ...(includeCartDataInGrossProfit ? { items: pmCartData } : {}),
});

debugLog("Conversion and gross profit events sent successfully");
});

// End ProfitMetrics - Conversion Booster for Google Ads