Installing Customer Events on Shopify
You install Shopify Customer events to track the events begin_checkout, add_paymentinfo, add_shippinginfo, and purchase through the Shopify checkout page.
To successfully track the above events, a special pixel must be added to Shopify’s customer events.
Go to the settings of your Shopify store.
Navigate to “Customer events.”
Add a custom pixel. Give this custom pixel a clear name, such as “AdPage Tagging.”
Go to the trytagging environment, select the sGTM container associated with the Shopify website where you want to install the pixel.
Then go to “pixel installation.”
For the platform, choose “Shopify (Customer Events)” instead of “Shopify.”
Haven’t generated a tagging pixel yet? Follow these steps to generate the rest of the tagging pixel.
Follow the pixel installation instructions. Copy the script from instruction 3 and paste it into the custom pixel you created in Shopify.
Navigate back to the custom pixel you created in your Shopify backend.
Paste the script in the designated field.
Under ‘Customer Privacy’, expand the ‘Permissions’ settings and select “not required.”
Click Save at the top of the page.
Then click connect to activate your Custom Pixel.
Now that the pixel is installed, it’s important to validate if Shopify is using it correctly. We do this using Shopify’s built-in pixel helper tool.
Go to the customer events page and click the three dots next to your installed pixel, then click ‘Test.’
A preview version of your website will appear. Navigate to a product, add it to your cart, and proceed to checkout.
If the pixel helper shows that the event “Checkout_started” has been tracked, the pixel installation was successful.
Now it’s important to add the correct tags to your web container. You will create the following event tags: begin_checkout, add_shipping_info, add_payment_info, and purchase.
Go to your Google Tag Manager Web Container.
Create a new GA4 Tag.
Give your tag an appropriate name, such as “GA4 - begin_checkout”. Add your GA4 Measurement ID and the relevant parameters. You can find these parameters in this article.
Scroll down and click on “triggers.”
Click on the blue plus sign in the upper right to create a new trigger.
Select “custom event.”
Name the trigger the same as the tag and input the name of the trytagging event, as shown below:
Save the trigger. Save the tag.
From that point on, a GA4 event will be created when a user performs that interaction on your checkout page. If the rest of your Server-Side Tagging implementation is set up, the GA4 events will be sent to your server and then forwarded to the respective platforms.
Now that the pixel is installed on your Shopify website and your Google Tag Manager containers have the necessary tags and triggers set to create and forward the pixel events, it’s time to test if everything is properly configured.
Testing is done through the server preview mode. Since Shopify’s checkout is technically in an iframe, it cannot be tested via the Google Tag Manager web container preview mode. You cannot directly test the iframe, but you can test which events are being received on your server container.
Open your sGTM container and enter preview mode.
Open your webshop in another tab.
Navigate to a product, add it to your cart, and proceed to checkout.
If everything is set up correctly, you will now see the event “begin_checkout” in the Google Tag Manager debug view.
Select the event and check under the ‘Event Data’ tab if all eCommerce parameters are being sent correctly.
Check this for add_payment_info and add_shipping_info as well. If you can make a purchase, also check the purchase event.
Installing Pixel Code
To successfully track the above events, a special pixel must be added to Shopify’s customer events.
Go to the settings of your Shopify store.
Navigate to “Customer events.”
Add a custom pixel. Give this custom pixel a clear name, such as “AdPage Tagging.”
Go to the trytagging environment, select the sGTM container associated with the Shopify website where you want to install the pixel.
Then go to “pixel installation.”
For the platform, choose “Shopify (Customer Events)” instead of “Shopify.”
Haven’t generated a tagging pixel yet? Follow these steps to generate the rest of the tagging pixel.
Follow the pixel installation instructions. Copy the script from instruction 3 and paste it into the custom pixel you created in Shopify.
Navigate back to the custom pixel you created in your Shopify backend.
Paste the script in the designated field.
Under ‘Customer Privacy’, expand the ‘Permissions’ settings and select “not required.”
Click Save at the top of the page.
Then click connect to activate your Custom Pixel.
Validating if the Pixel Works
Now that the pixel is installed, it’s important to validate if Shopify is using it correctly. We do this using Shopify’s built-in pixel helper tool.
Go to the customer events page and click the three dots next to your installed pixel, then click ‘Test.’
A preview version of your website will appear. Navigate to a product, add it to your cart, and proceed to checkout.
If the pixel helper shows that the event “Checkout_started” has been tracked, the pixel installation was successful.
Creating the Correct Tags in the Google Tag Manager Web Container
Now it’s important to add the correct tags to your web container. You will create the following event tags: begin_checkout, add_shipping_info, add_payment_info, and purchase.
Go to your Google Tag Manager Web Container.
Create a new GA4 Tag.
Give your tag an appropriate name, such as “GA4 - begin_checkout”. Add your GA4 Measurement ID and the relevant parameters. You can find these parameters in this article.
Scroll down and click on “triggers.”
Click on the blue plus sign in the upper right to create a new trigger.
Select “custom event.”
Name the trigger the same as the tag and input the name of the trytagging event, as shown below:
| Name GA4 Event | Name Custom event trigger |
|---|---|
| begin_checkout | trytagging_begin_checkout |
| add_payment_info | trytagging_add_payment_info |
| add_shipping_info | trytagging_add_shipping_info |
| purchase | trytagging_purchase |
Save the trigger. Save the tag.
From that point on, a GA4 event will be created when a user performs that interaction on your checkout page. If the rest of your Server-Side Tagging implementation is set up, the GA4 events will be sent to your server and then forwarded to the respective platforms.
Testing the Pixel Events
Now that the pixel is installed on your Shopify website and your Google Tag Manager containers have the necessary tags and triggers set to create and forward the pixel events, it’s time to test if everything is properly configured.
Testing is done through the server preview mode. Since Shopify’s checkout is technically in an iframe, it cannot be tested via the Google Tag Manager web container preview mode. You cannot directly test the iframe, but you can test which events are being received on your server container.
Open your sGTM container and enter preview mode.
Open your webshop in another tab.
Navigate to a product, add it to your cart, and proceed to checkout.
If everything is set up correctly, you will now see the event “begin_checkout” in the Google Tag Manager debug view.
Select the event and check under the ‘Event Data’ tab if all eCommerce parameters are being sent correctly.
Check this for add_payment_info and add_shipping_info as well. If you can make a purchase, also check the purchase event.
Updated on: 11/09/2024
Thank you!