Learn More About Tracking Page Embedding Using Proxy URL
Plans: Premium, Enterprise Platforms: Shopify
Embedding the AfterShip branded tracking page into your Shopify store using the proxy URL allows you to give your customers a consistent and branded user experience. The entire tracking experience feels more brand-aligned when placed between the header and footer of your Shopify store.
The tracking page embedding using the Shopify Proxy URL doesn’t give you any control over the header and footer of the page. They will remain aligned with the Shopify store theme and layout. You can configure the tracking page layout from the order lookup widget, review widget, page styling, and chat widget, to basic functional settings through the tracking page editor.
In this article, we'll discuss:
Get Shopify proxy URL
Update proxy URL in Shopify
Embed proxy URL in Shopify header and footer
Redirect customers to proxy URL
Steps to troubleshoot various issues
FAQs
Go to Tracking pages > Embedding in the AfterShip Tracking admin
Select the tracking page from the list of Your proxy URLs and pages that you have created targeting different customer segments.
Click Actions
a. Change page: Select a page you want to embed
If you want to give a standard tracking experience across your audience, opt for Use universal URL (default AfterShip tracking page)
If you want to give a personalized tracking experience to different customer segments, select Use a specific page variation and select the variation of your tracking page you want to embed
b. Update URL: If you want, you can change the URL of the page by just updating the parameters of the proxy URL and clicking Save
This URL must match the proxy URL you add for AfterShip in your Shopify settings, so make sure you update the proxy URL in Shopify too.
Copy the proxy URL
Go to Settings > Apps and sales channels in the Shopify admin
Select AfterShip Tracking
Scroll down to App proxy, click Customize URL. Update the URL parameters as done in AfterShip Tracking admin and click Save
Go to your Shopify store’s admin > Online store > Navigation
Decide whether you want to embed your tracking page into the Main menu or the Footer menu
Click +Add menu item
Enter the page title (e.g., Track your order) and paste the proxy URL
Click Add
You can redirect your customers from your Shopify store and AfterShip Tracking shipping notifications to your proxy URL. Just select from which touchpoints you want to redirect customers.
When customers click on tracking numbers on your Shopify store, they will be redirected to your embedded tracking page instead of the carrier's website. This ensures a better brand experience as they don't have to leave your store. Tracking numbers appear in these places:
Shipment update emails
Order confirmation page
Order details page
Order history page
Note: If you have not imported the shipment to AfterShip, the link will redirect them to aftership.com/track where they can track it themselves.
When customers receive AfterShip shipment updates, they will be redirected to your embedded tracking page. This ensures a better brand experience as the page is embedded in your store. They will be redirected from these updates:
AfterShip shipment update emails
AfterShip shipment update SMS
AfterShip shipment updates via Facebook Messenger
Note: If you have not imported the shipment to AfterShip, the link will redirect them to aftership.com/track where they can track it themselves.
[iframe] Page's size is so narrow that the content cannot be fully displayed
Resolution
The issue may arise when the height and width values are not set in a compatible manner. The size of the iframe is controlled explicitly by the hosting page, which in this case is your store page, through the width and height attributes specified within it. The provided iframe code snippet includes default values, where the width is set as 100% and the height corresponds to the height of the tracking page content (depending on the customized page's height).
To resolve this, we recommend adjusting the code snippet to ensure alignment with the default width and height values. This will help maintain proper proportions and prevent any display inconsistencies.
[iframe] Cookie banner/help button appear in the middle of the page
Resolution
The tracking page within an iframe is completely isolated from the hosting page. We can only control the presentation within the iframe area, which means that any floating elements on the tracking page will also be limited to appearing within the iframe.
To resolve this, we recommend you implementing your own cookie banner or help button on the hosting page.
[Shopify proxy] Style of my tracking page differ from what I see in the tracking page editor
Resolution
Shopify proxy embeds the tracking page directly into your store as if it is a native part of the website. Therefore, some global style definitions may impact the appearance of the tracking page, such as the global background color.
To resolve this, please avoid any global style definitions that may affect it or consider using iframe.
[Shopify proxy] Tracking URL in emails/order detail pages not directing to the correct app proxy URL
Resolution
This can occur if you have made changes to the proxy URL within the Shopify admin settings but without updating the corresponding URL in the AfterShip admin. It is required to ensure that the proxy URL configured in the AfterShip admin matches the proxy URL set in the Shopify admin.
Navigation steps: AfterShip Admin → Tracking Pages → Embedding → Your proxy URLs and pages → Actions → Update URL
Navigation steps: Shopify Admin → Settings → Apps and sales channels → App Proxy → customize URL
We suggest you avoid going that way because the links in the already-sent emails won’t be updated. It means your customer will deal with unnecessary hassle, once they click on the link.
If you absolutely need to update, please make sure you update the proxy URL in the AfterShip Tracking admin too.
Plans: Pro, Enterprise
Note: It is important for you to choose the tracking page for each Shopify store you have created. Otherwise, all your stores will use the default tracking page mentioned in your AfterShip account.
If you have multiple Shopify stores and want to set up a different tracking page for each one, visit the Tracking pages section of AfterShip and add pages as per your needs.
Once you add the desired number of tracking pages, just go to Embed on Shopify using a proxy URL, copy the Proxy URL, and paste it into the desired Shopify store.
Overview
Embedding the AfterShip branded tracking page into your Shopify store using the proxy URL allows you to give your customers a consistent and branded user experience. The entire tracking experience feels more brand-aligned when placed between the header and footer of your Shopify store.
The tracking page embedding using the Shopify Proxy URL doesn’t give you any control over the header and footer of the page. They will remain aligned with the Shopify store theme and layout. You can configure the tracking page layout from the order lookup widget, review widget, page styling, and chat widget, to basic functional settings through the tracking page editor.
What you’ll learn
In this article, we'll discuss:
Get Shopify proxy URL
Update proxy URL in Shopify
Embed proxy URL in Shopify header and footer
Redirect customers to proxy URL
Steps to troubleshoot various issues
FAQs
Get Shopify proxy URL
Go to Tracking pages > Embedding in the AfterShip Tracking admin
Select the tracking page from the list of Your proxy URLs and pages that you have created targeting different customer segments.
Click Actions
a. Change page: Select a page you want to embed
If you want to give a standard tracking experience across your audience, opt for Use universal URL (default AfterShip tracking page)
If you want to give a personalized tracking experience to different customer segments, select Use a specific page variation and select the variation of your tracking page you want to embed
b. Update URL: If you want, you can change the URL of the page by just updating the parameters of the proxy URL and clicking Save
This URL must match the proxy URL you add for AfterShip in your Shopify settings, so make sure you update the proxy URL in Shopify too.
Copy the proxy URL
Update Proxy URL in Shopify
Go to Settings > Apps and sales channels in the Shopify admin
Select AfterShip Tracking
Scroll down to App proxy, click Customize URL. Update the URL parameters as done in AfterShip Tracking admin and click Save
Embed proxy URL in Shopify header and footer
Go to your Shopify store’s admin > Online store > Navigation
Decide whether you want to embed your tracking page into the Main menu or the Footer menu
Click +Add menu item
Enter the page title (e.g., Track your order) and paste the proxy URL
Click Add
Redirect customers to proxy URL
You can redirect your customers from your Shopify store and AfterShip Tracking shipping notifications to your proxy URL. Just select from which touchpoints you want to redirect customers.
From your Shopify store
When customers click on tracking numbers on your Shopify store, they will be redirected to your embedded tracking page instead of the carrier's website. This ensures a better brand experience as they don't have to leave your store. Tracking numbers appear in these places:
Shipment update emails
Order confirmation page
Order details page
Order history page
Note: If you have not imported the shipment to AfterShip, the link will redirect them to aftership.com/track where they can track it themselves.
From AfterShip shipment updates
When customers receive AfterShip shipment updates, they will be redirected to your embedded tracking page. This ensures a better brand experience as the page is embedded in your store. They will be redirected from these updates:
AfterShip shipment update emails
AfterShip shipment update SMS
AfterShip shipment updates via Facebook Messenger
Note: If you have not imported the shipment to AfterShip, the link will redirect them to aftership.com/track where they can track it themselves.
Steps to troubleshoot various issues
[iframe] Page's size is so narrow that the content cannot be fully displayed
Resolution
The issue may arise when the height and width values are not set in a compatible manner. The size of the iframe is controlled explicitly by the hosting page, which in this case is your store page, through the width and height attributes specified within it. The provided iframe code snippet includes default values, where the width is set as 100% and the height corresponds to the height of the tracking page content (depending on the customized page's height).
To resolve this, we recommend adjusting the code snippet to ensure alignment with the default width and height values. This will help maintain proper proportions and prevent any display inconsistencies.
[iframe] Cookie banner/help button appear in the middle of the page
Resolution
The tracking page within an iframe is completely isolated from the hosting page. We can only control the presentation within the iframe area, which means that any floating elements on the tracking page will also be limited to appearing within the iframe.
To resolve this, we recommend you implementing your own cookie banner or help button on the hosting page.
[Shopify proxy] Style of my tracking page differ from what I see in the tracking page editor
Resolution
Shopify proxy embeds the tracking page directly into your store as if it is a native part of the website. Therefore, some global style definitions may impact the appearance of the tracking page, such as the global background color.
To resolve this, please avoid any global style definitions that may affect it or consider using iframe.
[Shopify proxy] Tracking URL in emails/order detail pages not directing to the correct app proxy URL
Resolution
This can occur if you have made changes to the proxy URL within the Shopify admin settings but without updating the corresponding URL in the AfterShip admin. It is required to ensure that the proxy URL configured in the AfterShip admin matches the proxy URL set in the Shopify admin.
Navigation steps: AfterShip Admin → Tracking Pages → Embedding → Your proxy URLs and pages → Actions → Update URL
Navigation steps: Shopify Admin → Settings → Apps and sales channels → App Proxy → customize URL
FAQs
1. What will happen if I update the App Proxy URL in Shopify?
We suggest you avoid going that way because the links in the already-sent emails won’t be updated. It means your customer will deal with unnecessary hassle, once they click on the link.
If you absolutely need to update, please make sure you update the proxy URL in the AfterShip Tracking admin too.
2. Can I use a different tracking page for multiple Shopify stores?
Plans: Pro, Enterprise
Note: It is important for you to choose the tracking page for each Shopify store you have created. Otherwise, all your stores will use the default tracking page mentioned in your AfterShip account.
If you have multiple Shopify stores and want to set up a different tracking page for each one, visit the Tracking pages section of AfterShip and add pages as per your needs.
Once you add the desired number of tracking pages, just go to Embed on Shopify using a proxy URL, copy the Proxy URL, and paste it into the desired Shopify store.
Updated on: 30/04/2024
Thank you!