[Customer Pixel] Configure Google Ads Conversion Tracking for Purchase Events on Shopify
Learn how to set up Google Ads conversion tracking for purchase events on your Shopify store using Google Tag Manager and a customer pixel. Maximize ROI with precise purchase tracking.
Shahzada Ali Hassan
1 min read
Check your site's tracking
Enter your website to see how good its tracking is, and whether Meta is likely restricting it.
Run a free auditpurchase.js
1// Initialize the dataLayer
2window.dataLayer = window.dataLayer || [];
3(function (w, d, s, l, i) {
4 w[l] = w[l] || [];
5 w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
6 var f = d.getElementsByTagName(s)[0],
7 j = d.createElement(s),
8 dl = l != "dataLayer" ? "&l=" + l : "";
9 j.async = true;
10 j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
11 f.parentNode.insertBefore(j, f);
12})(window, document, "script", "dataLayer", "GTM-EXAMPLE");
13function logEventToConsole(dataLayerEvent) {
14 const customStyle01 =
15 "color: #FFFF00; background-color: #000000; font-size: 10px; font-weight: bold; padding: 2px 0;";
16 console.log("%cDataLayer Event: purchase ", customStyle01, dataLayerEvent);
17}
18analytics.subscribe("checkout_completed", (event) => {
19 const getEventData = (obj, path, fallback = "") => {
20 return (
21 path.split(".").reduce((acc, part) => {
22 if (acc && part.includes("[")) {
23 const [key, index] = part.replace("]", "").split("[");
24 return acc[key] ? acc[key][index] : undefined;
25 }
26 return acc ? acc[part] : undefined;
27 }, obj) || fallback
28 );
29 };
30 const page_data = {
31 hostname: getEventData(event, "context.document.location.hostname"),
32 location_query_string: getEventData(event, "context.document.location.href"),
33 path: getEventData(event, "context.document.location.pathname"),
34 referrer: getEventData(event, "context.document.referrer"),
35 page_title: getEventData(event, "context.document.title"),
36 url: getEventData(event, "context.document.location.href"),
37 };
38 const user_data = {
39 id: event.clientId,
40 customer_id: getEventData(event, "data.checkout.order.customer.id"),
41 phone: getEventData(event, "data.checkout.shippingAddress.phone"),
42 email: getEventData(event, "data.checkout.email"),
43 address: {
44 city: getEventData(event, "data.checkout.shippingAddress.city"),
45 address: getEventData(event, "data.checkout.shippingAddress.address1"),
46 state: getEventData(event, "data.checkout.shippingAddress.state"),
47 country: getEventData(event, "data.checkout.shippingAddress.country"),
48 postal_code: getEventData(event, "data.checkout.shippingAddress.zip"),
49 first_name: getEventData(event, "data.checkout.shippingAddress.firstName"),
50 last_name: getEventData(event, "data.checkout.shippingAddress.lastName"),
51 },
52 language: getEventData(event, "context.navigator.language"),
53 userAgent: getEventData(event, "context.navigator.userAgent"),
54 };
55 const event_data = {
56 timestamp: event.timestamp || "",
57 id: event.id || "",
58 };
59 const ecommerce_data = {
60 currency: getEventData(event, "data.checkout.currencyCode"),
61 value: getEventData(event, "data.checkout.totalPrice.amount"),
62 transaction_id: getEventData(event, "data.checkout.order.id"),
63 tax: getEventData(event, "data.checkout.totalTax.amount"),
64 shipping: getEventData(event, "data.checkout.shippingLine.price.amount"),
65 coupon: getEventData(event, "data.checkout.discountApplications[0].code", ""),
66 items: event.data.checkout.lineItems.map((item, index) => ({
67 item_id: getEventData(item, "variant.product.id"),
68 item_name: getEventData(item, "variant.product.title"),
69 item_brand: getEventData(item, "variant.product.vendor"),
70 item_category: getEventData(item, "variant.product.type"),
71 price: getEventData(item, "variant.price.amount"),
72 item_variant:
73 getEventData(item, "variant.title") || getEventData(item, "variant.untranslatedTitle"),
74 item_list_name: "Checkout",
75 index: index + 1,
76 product_id: getEventData(item, "variant.id"),
77 product_image: getEventData(item, "variant.image.src"),
78 product_url: getEventData(item, "variant.product.url"),
79 product_untranslatedTitle: getEventData(item, "variant.product.untranslatedTitle"),
80 product_sku: getEventData(item, "variant.sku"),
81 quantity: getEventData(item, "quantity"),
82 })),
83 };
84 const dataLayerEvent = {
85 event: "purchase",
86 user_data: user_data,
87 event_data: event_data,
88 ecommerce: ecommerce_data,
89 page_data: page_data,
90 };
91 const newUrl = new URL(dataLayerEvent.page_data.location_query_string, window.location.origin);
92 const newTitle = dataLayerEvent.page_data.page_title;
93 if (newUrl && newTitle) {
94 history.pushState(null, newTitle, newUrl.toString());
95 }
96 dataLayer.push({ ecommerce: null });
97 window.dataLayer.push(dataLayerEvent);
98 logEventToConsole(dataLayerEvent);
99});
