Shopify Integration

Integration Shopify

Updated this week

At a Glance: With Shopify and Trackier integration, you can connect your Shopify store to your Trackier platform and view all of your clicks and conversion data in one place on your Trackier dashboard.

Overview

Trackier's built-in Shopify integration offers the ability to monitor campaigns, their unique identifier, order number, and order title. This will result in improved efficiency and eliminate the need for supplementary tracking links, affiliates, or collaborators. All daily Shopify operations can be seamlessly tracked using Trackier.

Shopify Integration on Trackier


Integration advantages

  • The clicks and the number of conversions that are reflected on the Shopify store would be tracked on the Trackier platform.

  • The setup process is very easy and does not require any additional technical knowledge.

  • The integration process has to be configured just once and would work for all the campaigns that you want to run through Shopify.

There are three methods of integrating with Shopify.

  • One-Click Checkout

  • Manual Pixel Integration

  • Web SDK integration

Important: We suggest using the One-Click Checkout method to track all the orders seamlessly.

Integration Infographic

This infographic will give you an overview of all the integration steps needed for a successful Shopify integration. All the steps are explained in this article.


One-Click Checkout

One-click checkout happens when customers visit their online shopping cart and purchase items within a single click.

Setting up one-click checkout is simple as a Shopify merchant. Here’s how it works:

  1. From your Shopify admin, go to settings, then payments.

  2. In the Shopify payments section, click Manage.

  3. In the Shop Pay section, check Shop Pay.

  4. Click Save.

After setting up your one-click checkout, all you need to do is create a new customer event and place our web pixel on Shopify for seamless conversion tracking.

For creating the new customer event:

  1. Click on settings and go to customer events.

  2. Click on Add Custom Pixel.

  3. Add the Shopify Web Pixel, which you can get from the Trackier panel.

Shopify Web Pixel

  • Navigate to Automation and click on E-Commerce, then click on Setup Instructions.

  • Select your tracking domain and your advertiser.

  • Below, you can find the Shopify Web Pixel with all the macros already replaced in the pixel code.


Note: Incase of Brands, you do not need to select an advertiser. Just collect the pixel from the panel and paste it in the Shopify custom pixel

Manual Pixel Integration

  • Navigate to Automation and click on E-Commerce, then click on Setup Instructions.

  • By adding Trackier’s JS pixel or the Image tag to the Shopify store, you can start tracking the conversions on the Trackier Platform.

Shopify Integration on Trackier


Step 1: Offer setup and conversion tracking pixel

Shopify allows placing the conversion tracking pixel to track conversions. After creating the campaign, you can find the JS pixel in that particular campaign or in the Shopify Integration tab in Automation.

To generate the JS pixel in the campaign, go to the conversion tracking card and select the checkbox of JS tag.

Shopify Integration on Trackier


Examples

  • Trackier's JS pixel example

<img src="https://demo.gotrackier.com/pixel?adid=5eb27a3cb6920d71dc1c1842&sale_amount=AMOUNT&currency=USD"> <script type="text/javascript"> (function() { var a=document.createElement("iframe"); a.setAttribute("src","https://demo.gotrackier.com/pixel?av=57c4738434243dc57d8b456d&sale_amount=AMOUNT"); a.style.width="1";a.style.height="1"; document.body.appendChild(a) })(); </script>

  • Trackier's Iframe pixel example

<iframe src="https://demo.gotrackier.com/pixel?av=6156db9f6cf95e1d763d9dc7&txn_id=##{{ order_number }}&sale_amount=##{{ total_price | money_without_currency }}&currency=##{{ currency }}" scrolling="no" frameborder="0" width="1" height="1"></iframe>


​Step 2-Placing pixel code in Shopify

Once you've generated the JS tag in the Trackier campaign, go to your Shopify store and select Settings. Click the checkout tab, then go to the order processing section, click the additional script, and enter the JS pixel or image tag that you obtained from the Trackier platform.

After placing the pixel, click "save" to continue.

Shopify Integration on Trackier


Shopify Integration through WEB SDK

Web SDK is a simplified and more refined version of cookie-less tracking. You can easily generate the web SDK script from the panel itself and place it on the Shopify store to track all the orders that occur on any browser.



Step 1: Update the campaign URL

  • To implement the web SDK, it is mandatory to include the below-mentioned parameters in the campaign URL.

utm_campaign=trackier_{camp_id}&click_id={click_id}

Shopify Integration on Trackier

Step 2: Place the Static Script

  • The static script has to be placed on all landing pages. To do that, update Shopify's “theme.liquid” file.

  • In the “theme.liquid” file, place the static code just after the <body> tag.

  • To do that, go to: Online store > Themes > Action > Edit Code > theme. liquid

Shopify Integration on Trackier

Static code ( Imp )

Step 3: Fetch the thank-you page pixel from panel

  • We have two options for the thank you page pixel

  1. Web SDK

  2. web SDK for GA

Trackier Web SDK

  • This pixel can be generated from your panel by opening the campaign from the manage campaign section, going to the conversion tracking section, and selecting campaign or advertiser trackier Websdk depending on your needs.

Note:-

  • Advertiser Trackier WebSDK: We recommend using this only in cases where the advertiser is not comfortable adding pixels multiple times for different campaigns.

  • Campaign Trackier WebSDK: The Campaign Trackier WebSDK is only valid for a specific campaign. We recommend using the campaign-level webSDK for easier access to the Pixel log in case of an issue, instead of having to navigate to the advertiser's Pixel logs.

  • Your system will automatically add your account's domain and adv_unique id in your web SDK code.

Trackier WebSDK


  • Enable UTM Campaign check

    ​If you are selecting trackier web sdk option in the tracking link section, then you have to enable UTM campaign check toggle from the basic campaign settings to ensure seamless tracking on both the ends.

WebSDK on Trackier



​Web SDK for GA ( Highly recommended )​

  • This pixel can be generated from your panel by opening the campaign from the manage campaign section. Navigate to the Conversion tracking section, check the Web SDK for GA check box, and then fetch the specified pixel.​

  • Your system will automatically add your account's domain and adv_unique id in your web SDK code.

    WebSDK on Trackier

Note: If init() script ( static code ) is not placed, then you can face multiple challenges in tracking.


Step 4: Add the thank you pixel to your thank-you page

  • To fire this pixel on the thank you page, go to the Shopify store > settings > checkout > under the order status page you will find the option to add the additional script.

Shopify Integration on Trackier

  • Please refer to this doc by Shopify to gather more information.

Integration testing

After the setup is complete, it is recommended to test the integration by creating a test link in the Trackier panel and performing a test conversion. If the conversion is successful, the integration will produce a conversion containing the order id, order number, and order item information.



We're thrilled to have put together a top-notch team of qualified experts who are available to handle any of your concerns and respond to any inquiries you may have. You can contact us at any time by sending an email to support@trackier.com or using the in-platform chat feature.

Did this answer your question?