[Customer Pixel] Configure Google Ads Conversion Tracking for Add Contact Info Events on Shopify
Learn how to set up Google Ads conversion tracking for add contact info events on your Shopify store using Google Tag Manager and a customer pixel. Improve your customer tracking data.
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 auditadd_contact_info.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-XXXXX");
13// Function to log event to console with enhanced visibility
14function logEventToConsole(dataLayerEvent) {
15 const customStyle01 =
16 "color: #FFFF00; background-color: #000000; font-size: 10px; font-weight: bold; padding: 2px 0;";
17 console.log("%cDataLayer Event: add_contact_info ", customStyle01, dataLayerEvent);
18}
19// Subscribe to contact info submitted events
20analytics.subscribe("checkout_contact_info_submitted", (event) => {
21 const getEventData = (obj, path, fallback = "") => {
22 return (
23 path.split(".").reduce((acc, part) => {
24 if (acc && part.includes("[")) {
25 const [key, index] = part.replace("]", "").split("[");
26 return acc[key] ? acc[key][index] : undefined;
27 }
28 return acc ? acc[part] : undefined;
29 }, obj) || fallback
30 );
31 };
32 // Prepare data objects with safe fallbacks
33 const page_data = {
34 hostname: getEventData(event, "context.document.location.hostname"),
35 location_query_string: getEventData(event, "context.document.location.href"),
36 path: getEventData(event, "context.document.location.pathname"),
37 referrer: getEventData(event, "context.document.referrer"),
38 page_title: getEventData(event, "context.document.title"),
39 url: getEventData(event, "context.document.location.href"),
40 };
41 const user_data = {
42 id: getEventData(event, "data.checkout.order.customer.id") || event.clientId,
43 phone: getEventData(event, "data.checkout.shippingAddress.phone"),
44 email: getEventData(event, "data.checkout.email"),
45 address: {
46 city: getEventData(event, "data.checkout.shippingAddress.city"),
47 address: getEventData(event, "data.checkout.shippingAddress.address1"),
48 state: getEventData(event, "data.checkout.shippingAddress.state"),
49 country: getEventData(event, "data.checkout.shippingAddress.country"),
50 postal_code: getEventData(event, "data.checkout.shippingAddress.zip"),
51 first_name: getEventData(event, "data.checkout.shippingAddress.firstName"),
52 last_name: getEventData(event, "data.checkout.shippingAddress.lastName"),
53 },
54 language: getEventData(event, "context.navigator.language"),
55 userAgent: getEventData(event, "context.navigator.userAgent"),
56 };
57 const event_data = {
58 timestamp: event.timestamp || "",
59 id: event.id || "",
60 };
61 // E-commerce data
62 const ecommerce_data = {
63 currency: getEventData(event, "data.checkout.currencyCode"),
64 value: getEventData(event, "data.checkout.totalPrice.amount"),
65 shipping: getEventData(event, "data.checkout.shippingLine.price.amount"),
66 tax: getEventData(event, "data.checkout.totalTax.amount"),
67 coupon: getEventData(event, "data.checkout.discountApplications[0].code", ""),
68 items: event.data.checkout.lineItems.map((item, index) => ({
69 item_id: getEventData(item, "variant.product.id"),
70 item_name: getEventData(item, "variant.product.title"),
71 item_brand: getEventData(item, "variant.product.vendor"),
72 item_category: getEventData(item, "variant.product.type"),
73 price: getEventData(item, "variant.price.amount"),
74 item_variant:
75 getEventData(item, "variant.title") || getEventData(item, "variant.untranslatedTitle"),
76 item_list_name: "Checkout",
77 index: index + 1,
78 product_id: getEventData(item, "variant.id"),
79 product_image: getEventData(item, "variant.image.src"),
80 product_url: getEventData(item, "variant.product.url"),
81 product_untranslatedTitle: getEventData(item, "variant.product.untranslatedTitle"),
82 product_sku: getEventData(item, "variant.sku"),
83 quantity: getEventData(item, "quantity"),
84 })),
85 };
86 // Combine all data into a single object
87 const dataLayerEvent = {
88 event: "gtm_custom_event",
89 datalayer_event_name: "add_contact_info",
90 user_data: user_data,
91 event_data: event_data,
92 ecommerce: ecommerce_data,
93 page_data: page_data,
94 };
95 // Push the event to dataLayer
96 window.dataLayer.push(dataLayerEvent);
97 // Log the event with styled console output
98 logEventToConsole(dataLayerEvent);
99});
