Shopify Conversion Pixel Tutorial

by Jordan Bentley in

The video below is a tutorial of how to install, troubleshoot, and verify a conversion tracking pixel on Shopify.

This Audiohook tutorial covers how to install, troubleshoot, and verify that order ids and order values are correctly being passed to a conversion tracking pixel on the Shopify platform.

The first step is to open the text file that you received from Audiohook (an example is shown below). You will then need to copy the whole line of the first pixel (Step 1) which starts with the lesser than sign (ex. <img src=). Pro tip, CTRL + c on Windows or command + c on Mac are keyboard shortcuts.

Please read all the instructions below before beginning. There are two steps to installing the pixel correctly.
Step 1: Please Copy and Paste the code below between the body tags towards the bottom of your website on all pages.
eg.	<body>
	...
	Pixel Code
	</body>
---------------------------------------------------------------------------------------------
<img src="https://listen.audiohook.com/lk23j42l3kj4l/pixel.png" style="display: none;">
---------------------------------------------------------------------------------------------
*** IMPORTANT ***
Step 2: To track attributed purchase conversions, please append the order id as well as the associated value to the end of the pixel as shown below.  
THE CURLY BRACKETS SHOULD BE REPLACED WITH ACTUAL DATA, THESE ARE COMMONLY REFERRED TO AS MACROS. PLEASE REFER TO THE PROVIDER OF YOUR SHOPPING CART
TO GET THE CORRECT MACROS FOR THE PLATFORM YOU ARE USING. DO NOT USE THESE MACROS - THE ARE FOR EXAMPLE PURPOSES ONLY, OBTAIN THE CORRECT ONES FROM YOUR PROVIDER.
For more information about our image pixel, contact support@audiohook.com
---------------------------------------------------------------------------------------------
<img src="https://listen.audiohook.com/lk23j42l3kj4l/pixel.png?order=&value=" style="display: none;">
---------------------------------------------------------------------------------------------

You will then need to navigate to the backend of your Shopify site and click on online store. From there, you will click on the actions dropdown and select edit code. It should automatically take you to the theme liquid section of Shopify, but if it doesn't, you can click on the liquid theme over to the left. Then place the first pixel just above the body clothes tag normally located towards the bottom of the HTML. Pro tip, make sure that you copy the pixel from a text file and not from an email. Most email clients use a different kind of parentheses, which will cause the pixel not to work. Text files use the correct type of parentheses that HTML requires (which are vertical parentheses, not slanted parentheses).

Congratulations, you've now finished installing the first pixel which is a standard analytics tracking pixel. Next we will work on the conversion or checkout pixel.

To install the conversion pixel, go to your Shopify setting and select the check out option (its often in the lower left corner). As you scroll down through the check out settings you will see the additional scripts open field. This is where we want to place the second pixel found in your Audiohook text file. However before we copy the pixel from Step 2, we need to replace the text which contains double curly brackets (ex. {{}}), commonly referred to as macros. The pixel in step 2 contains generic marcos and we need to replace these with Shopify specific macros. Here are the changes that need to be made. Pro tip, if you are using the 3rd party checkout app and not the default Shopify checkout, you need to verify which macros the 3rd party checkout app requires as they are likely slightly different.

 needs to be changed to 
 needs to be changed to money_without_currency

Once you have updated and replaced the default macros with the Shopify specific marcos, you can then copy and paste the second pixel from the text file into the additional scripts open field. Again, its important to verify that you additional spacing has been added and that all parentheses have been copied directly from the audiohook text file. If you already have some scripts or pixels installed, you will see them in this area. And we'll want to place the second pixel at the after any preexisting pixels. Please save the changes.

Now that we have installed both pixels, we are going to want to verify that they have been installed correctly. To do this, we will have you make a test purchase on your online store. Apply a discount coupon code so the purchase and shipping is free is a recommend practice. We will not be going over how to create a discount coupon code in Shopify.

Once you have added a product or service to your shopping cart, continue to the checkout phase and enter in any required details. Before completing the purchase, you will need to open up the developer console in order to verify if the conversion pixel was loaded correctly. You can do this by right clicking anywhere on the checkout page and selecting Inspect.

Inspect Screenshot

This will open the developer console, select the Network tab and type audiohook in the filter section as shown below. Note that depending on your browser settings, the developer console may open up at the bottom of your screen or it may open on the right of your screen. Either one works perfectly fine.

Developer Console

Now that we have the developer console open, we can finalize the purchase. Note that if you open the developer console after finalizing the purchase, you will not be able to verify and see if the pixel was loaded correctly.

Once the purchase has been finalized, you should see pixel.png in the developer console as shown below. Move your mouse to hover over the pixel.png which will show the full url. In the full url you should see both the order id and order value as shown below. If you do not see both values, it means that something was not configured correctly. You should review all the previous steps paying particular attention to the marcos section. Common issues include using the wrong marcos (check with your checkout app to ensure you are using the right macros), typos, unwanted spaces, and incorrect quotation marks.

verifying conversion pixel

If you need any assistance, please feel free to reach out for help using the chat icon in the bottom right corner or send us an email at support@audiohook.com