Learn More About Tracking Page Embedding Using Proxy URL
Plans: Non-API 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
Embed proxy URL in Shopify header and footer
Redirect customers to proxy URL
Troubleshooting
FAQs
Go to Tracking pages > Embedding in the AfterShip Tracking admin.
Your default tracking page will appear here, along with its auto-generated Proxy URL, which will display the tracking page embedded between the store's header and footer.
If your organization has multiple stores connected, the default tracking pages for each store, along with their respective proxy URLs, will be listed here.
You can decide where do you want the proxy URL to point to when the customer decides to visit your tracking page under the Points to section.
You can set your proxy URL to show dynamic content or a fixed tracking page. Here's how the 2 options work:
a. Default page or follow segmentation rules: If you want segment your tracking experience across your audience, opt for this option.
If you haven't set up segmentation rules, your proxy URL will show your default page tracking page.
If you have set up segmentation rules, your proxy URL will show a tracking page based on those rules.
b. Specific page: If you want to show all customers the same tracking page you will select, opt for this option.
Upon selecting this option, you must select the tracking page variation from the dropdown where all the customers visiting this page will be directed to.
If you want, you can edit the proxy URL of the page by either updating the path or parameters or both.
Click the {...} icon > Edit proxy URL.
Select the new URL from the dropdown or change the parameter. The preview of the new URL will display.
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. Click Edit proxy URL in Shopify to be redirected straight to the Shopify settings.
or,
Go to Settings > Apps and sales channels in the Shopify admin.
Select AfterShip Tracking app.
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 → {...} → Edit proxy URL
Navigation steps: Shopify Admin → Settings → Apps and sales channels → AfterShip Tracking → App Proxy URL → 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.
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
Embed proxy URL in Shopify header and footer
Redirect customers to proxy URL
Troubleshooting
FAQs
Get Shopify proxy URL
Go to Tracking pages > Embedding in the AfterShip Tracking admin.
Your default tracking page will appear here, along with its auto-generated Proxy URL, which will display the tracking page embedded between the store's header and footer.
If your organization has multiple stores connected, the default tracking pages for each store, along with their respective proxy URLs, will be listed here.
You can decide where do you want the proxy URL to point to when the customer decides to visit your tracking page under the Points to section.
You can set your proxy URL to show dynamic content or a fixed tracking page. Here's how the 2 options work:
a. Default page or follow segmentation rules: If you want segment your tracking experience across your audience, opt for this option.
If you haven't set up segmentation rules, your proxy URL will show your default page tracking page.
If you have set up segmentation rules, your proxy URL will show a tracking page based on those rules.
b. Specific page: If you want to show all customers the same tracking page you will select, opt for this option.
Upon selecting this option, you must select the tracking page variation from the dropdown where all the customers visiting this page will be directed to.
Edit Proxy URL
If you want, you can edit the proxy URL of the page by either updating the path or parameters or both.
Click the {...} icon > Edit proxy URL.
Select the new URL from the dropdown or change the parameter. The preview of the new URL will display.
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. Click Edit proxy URL in Shopify to be redirected straight to the Shopify settings.
or,
Go to Settings > Apps and sales channels in the Shopify admin.
Select AfterShip Tracking app.
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 → {...} → Edit proxy URL
Navigation steps: Shopify Admin → Settings → Apps and sales channels → AfterShip Tracking → App Proxy URL → 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?
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: 19/11/2024
Thank you!