Setting up Google Ads Conversion Tag with Shopify Custom Pixels

Custom pixels offer a sophisticated means to capture customer interactions across a broader array of your Shopify store’s pages, including those critical checkout and post-purchase stages. For scenarios where existing app-based pixels fall short of your specific tracking needs, implementing custom pixels allows you to monitor these customer events seamlessly, eliminating the need for direct alterations to your theme’s code.

These custom pixels operate within a Lax sandbox environment, a measure put in place to bolster security and govern the data shared with external parties. However, it’s important to note that this sandbox setting may restrict certain pixel functionalities. Therefore, it may be necessary to engage with your external service providers for guidance on navigating these limitations and optimizing your custom pixel setup.

Administering Custom Pixels in Shopify

The management of custom pixels is streamlined through the “Customer events” section within your Shopify Admin panel. Prior to integrating a pixel into your Shopify storefront, it’s essential to first develop the specific code for your custom pixel. This preparation ensures a smooth implementation process for tracking and analyzing customer interactions effectively.

Implementing Your Custom Pixel in Shopify

Once you’ve crafted the code for your custom pixel, the next step is to integrate it with your Shopify store.

Before proceeding with the addition of a new custom pixel, it’s crucial to address any existing pixels. To prevent the duplication of customer event tracking, ensure you either remove or adjust any pre-existing pixels. This involves manually deleting or modifying pixel code found in areas such as theme.liquid, checkout.liquid (exclusively for Plus merchants), and the “Additional scripts” section within your checkout settings.

How to Add a Custom Pixel:

Navigate to “Settings > Customer events” from your Shopify admin dashboard.
Assign a unique name to your pixel. Should you choose a name already in use, a prompt will appear, asking you to select an alternative name.
Select “Add pixel” to access the event editor.
In the “Code” window, insert the JavaScript code for your custom pixel.
Click “Save” to secure your custom pixel. If you’re prepared to activate your custom pixel immediately, selecting “Connect pixel” will commence the tracking of customer events.

Connecting Your Custom Pixel:

To begin tracking events with your custom pixel:

Within your Shopify admin, go to the “Customer events” page and select “Custom pixels”.
Pixels awaiting connection are listed under “Disconnected pixels”. Find your custom pixel and click “Connect”.
Familiarize yourself with the Shopify Terms of Service. If your pixel complies with these terms, proceed by clicking “Connect”.

By following these steps, you’ll ensure that your Shopify store benefits from precise and tailored event tracking, enhancing your data collection and analysis capabilities.

Google Ads Conversion Tag Code

Configuring the Third-Party JavaScript SDK for Shopify Integration

The integration of a third-party service with your Shopify store involves incorporating provided code that synergizes with the pixel. Typically, a pixel is composed of two key elements: the JavaScript SDK, which is the core framework facilitating data collection, and the specific tracking code that captures and sends event data.

When preparing for integration, it is crucial to ensure that any HTML content within the third-party service’s code is excluded. This is because Shopify’s pixel sandbox environment exclusively accommodates JavaScript, aiming to maintain a secure and controlled execution space. Consequently, elements such as the <script> tags, commonly found in codes like the Google Ads conversion tag, must be removed. This step is essential for the successful activation and operation of your custom pixel within the Shopify ecosystem.

Capturing Customer Interactions

Once the pixel’s SDK is activated and set up, the next step involves feeding it with events for monitoring purposes. This process entails subscribing to specific events and then relaying the event information to the pixel’s SDK for analysis by the external service provider.

Subscribing to Predetermined Events

Shopify provides a predefined array of events, streamlining the process of gathering essential data through your pixel. This feature simplifies the integration, ensuring that your pixel effectively captures the necessary information for your analytical needs.

In the following code segment, we aim to monitor the checkout_completed event to facilitate the transfer of data to our Google Ads account upon the finalization of an order.

The checkout_completed event is recorded when a customer successfully finalizes a purchase. This event is activated once per checkout, usually on the ‘Thank You’ page. In cases involving upsells or post-purchase offers, this event is instead initiated on the initial upsell offer page, without repeating on the ‘Thank You’ page. Should there be an issue with the loading of the designated event-trigger page, the checkout_completed event will not be activated.

Navigate to the ‘Custom Pixels’ section within your Shopify Admin, and select the option to add a new pixel. You can name this pixel ‘Google Ads Conversion’ or any other name that aligns with your tracking goals. Upon creation, you will need to input the custom JavaScript code provided below. Ensure that you replace ‘AW-0000’ with your actual GTAG ID, which is specific to your Google Ads account. Additionally, adjust the ‘send_to’ parameter within the code to match your unique Conversion ID.

In the example code, the currency is preset to ‘SEK’. However, for accuracy in tracking transactions across different geographies, replace ‘SEK’ with event.data.checkout.currencyCode to dynamically match the currency code of each transaction. This ensures that your conversion tracking accurately reflects the currency used during the checkout process

analytics.subscribe("checkout_completed", (event) => {
    
    const script = document.createElement('script');
    script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=AW-00000000');
    script.setAttribute('async', '');
    document.head.appendChild(script);

        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'AW-00000');




    gtag('event', 'conversion', {
        'send_to': 'Conversion Tag',
        'value': event.data.checkout.totalPrice.amount,
        'currency': 'SEK',
        'transaction_id': event.data.checkout.order.id
    });


});

Summary

This article has guided you through the comprehensive process of setting up Google Ads Conversion tracking using custom pixels in Shopify. From the initial steps of managing and implementing custom pixels in your Shopify admin, to configuring the third-party JavaScript SDK and capturing crucial customer interactions, we’ve covered essential practices to ensure your Shopify store leverages precise and actionable data for your advertising campaigns.

By integrating Google Ads Conversion tracking, you’re not only enhancing your store’s data collection capabilities but also refining your advertising strategies based on solid, transactional insights. Remember, customization and accuracy in configuring your pixel and SDK settings are key to unlocking valuable conversion data.

We’re eager to hear about your experiences and any insights you’ve gained while implementing these practices. Did you encounter any challenges? Have you noticed improvements in your conversion tracking accuracy? Your feedback is invaluable, not only to us but also to fellow Shopify store owners navigating similar paths. Share your thoughts, questions, or tips in the comments below. Let’s learn from each other and strive for success in our e-commerce journeys.

Andreas Ludvigsson