To implement and test the Universal Ads pixel(s) on your Shopify store please follow the directions provided below.
Create the Shopify Custom Pixel:
Create the code for a Shopify Custom Pixel by replacing the red text with your desired selections.
analytics.subscribe('<shopify event name>', (event) => { var cachebuster = Math.floor(Math.random() * 10000000000); var img = new Image(); img.src = "<img.src string from UA pixel>" + cachebuster; img.width = 0; img.height = 0; document.body.appendChild(img); });
Shopify Event Name: the event name for your Shopify event you want tracked. Each pixel can track only a single event, and the event name must be structured according to Shopify’s documentation. The five common events referenced above are structured as follows:
- page_viewed
- product_viewed
- product_added_to_cart
- checkout_started
- checkout_completed
img.src from UA pixel: to ensure your event data gets passed to the proper UA endpoint, users must copy and paste the img.src string from their UA pixel to the img.src field in the Custom Pixel template. Please note that only the text in-between the double quotes needs to be copy and pasted.
*Screenshot of pixel generated in UA Ads Manager. The highlighted text is what needs to be copied and pasted into the Shopify Custom Pixel template.
You are now ready to create the custom pixel code by adding the Shopify-specific event name for the event you’d like the pixel to track, and the img.src string from UA pixel generated in the UA platform. Once you append to your Shopify store, this pixel will pass back data on all purchase events tracked on the advertisers Shopify store.
Implementing and Testing the Code on a Shopify Store:
1. Log-in to your Shopify store account
2. Select "Settings" in the bottom left
3. Select "Customer events" from the vertical menu bar
4. Select “Add custom pixel” button at the top-right
5. Name the pixel and select “Add pixel” button.
6. Within Customer privacy, ensure the “Permission” settings include “Required” > “Marketing” & “Analytics”. For “Data sale”, expand the drop down and select “Data collected does not qualify as data sale”
7. Scroll down to the “Code” box, delete all of the explainer text and paste the Custom Pixel code generated in Step 3, above. The code should end on line 8.
8. At the very top of the page, select the “Save” button.
9. At the top right, select the “Connect” button.
10. Within the pop-up box, select “Connect” button once again.
11. Your pixel should now be live and you will see it listed as a Custom Pixel
12. To confirm the pixel is implemented correctly and firing when the desired event takes place, click the three dots next to status and select “Test”
13. This will open up a new browser window with your website and the Shopify Pixel Helper as an overlay. Navigate your website to the action you set the pixel to track. Once you take the action on website you should see an “Event received” in the pixel helper, with a timestamp corresponding to when the event took place.
Up Next: