Articles on: Branded Tracking Page

Set Up and Customize the Branded Tracking Page

Overview



AfterShip Tracking provides you with your own branded tracking page, offering full customization capabilities. This enables you to offer your customers with a fully on-brand post-purchase experience and drive engagement with interactive marketing assets and product recommendations.

What you’ll learn



In this article, we will show you:

Create branded tracking page
Types of branded tracking page experiences
Branded tracking page editor elements
Branded tracking page customization
Configure tracking page languages
Google Analytics
Branded tracking page variations
Set up a custom domain

Create branded tracking page



The AfterShip branded tracking page simplifies the delivery of a quick, easy, and engaging shipment tracking experience. It facilitates the establishment of trust with your customers, enhancing engagement and driving revenue through a branded, frictionless, and impactful post-purchase experience.

AfterShip’s tracking page editor enables you to customize your tracking experience to align with your branding and customer requirements. Let’s explore the customization features available with AfterShip Tracking’s suite of products and features.



Go to Tracking pages > Page variations in your AfterShip Tracking admin.
A default tracking page would already be ready with basic customization. You can also create a page from scratch or use a pre-built template. Click Create page from the top-right corner or select from the list of templates or click Create from scratch.

Learn more about templates >



All the new and existing customers will get the option to choose the legacy themes—Basic and Nomads as well if they wish to opt for a more refined, crisp, and cleaner layouts.

a. If you have selected Create from scratch, you will be asked to input a name for your tracking page for easy reference and select the Order delivery methodsShipments and/or In-store pickups


Naming modal

After clicking Create, you will land on our default tracking page editor, where you customize your branded tracking page based on your preference.

Manual tracking page editor

b. If you have selected one of the pre-built templates, you will again be asked to name the tracking page. After clicking Create, you will land on that template's editor, which will differ in layout but will harbor the same elements as our default tracking page editor.

Template editor

c. If you are using the default tracking page, to go deeper with customization, click Actions > Edit to open the tracking page editor if you wish to proceed with the default page. If you are creating a new page from scratch or using a template, you will automatically land on the editor after naming your tracking page.

Types of branded tracking page experiences



Select the page you want to edit— Order lookup page or Shipments from the top dropdown of the editor. These two are the primary options you will see when you first land on the branded tracking page editor if you have only opted for Shipments as the Order delivery method.



If you have Gift tracking enabled in your organization, you will see the option to edit that page too in the dropdown.



If you have In-store pickups enabled for any of the locations of your eCommerce store, you will see the option to edit the page in the dropdown.

Plans: Enterprise Platforms: Shopify, Commerce API



Tracking page typeDefinition
Order lookup pageEnables customers to check the status of their order by entering the tracking number or order number along with their email/phone number.
Tracking results pageAllows customers to view the tracking results corresponding to the tracking number/order number they provided.
Gift trackingEnables your customers to share the tracking page link of their order with the recipient of the purchased item.
In-store pickupsEnables your customers to track the progress of the in-store pickup orders including when it’s ready for pickup or if there are any delays by order number along with their email/phone number.


You can manage various pages within each of your page variants. By customizing the displayed assets on these pages, you can ensure that shoppers receive the necessary information in a focused and relevant manner.

Branded tracking page editor elements



The tracking page editor supports 4 major elements that together complete the experiences, functionality, design, and appearance of a branded tracking page.

a. Sections
b. Widgets
c. Style
d. Settings

Sections & blocks available on each page



SectionShipmentsOrder lookup pageIn-store pickups
Tracking updatesYesNoNo
Order lookupNoYesNo
Order updatesNoNoYes
Shipment reviewsYesNoNo
ImagesYesYesYes
SubscriptionYesNoNo
Shipment itemsYesNoYes
Other shipments in orderYesNoYes
VideoYesYesYes
Product recommendationsYesYesYes
Custom sectionsYesYesYes
InstagramYesYesYes
Tabs for other items in orderNoYesYes


Widgets available on each page



WidgetsOrder lookup pageShipments pageIn-store pickups page
Gift trackingNoYesNo
Support chat buttonYesYesYes


You can edit sections and blocks of each page separately; however, the header and footer apply to all pages within the same page variant.
The availability of the widgets– gift tracking and chat support button is also subject to the order lookup and results pages.
The style and the general delivery method, branding, and Google Analytics settings will apply to all pages within the same page variant.

Branded tracking page customization



A. Sections



The Sections tab enables you to

Customize the branding of your tracking page.
Expand customer reach to your store by setting the navigation menu.
Incorporate links to your social media pages to provide your audience with more ways to engage and interact with your brand.
Enhance engagement and customer experience by incorporating additional layout and design elements.
Each section has a Styles tab, where you can configure the appearance of the section, and a Visibility settings tab, where you can choose who should see the section and which device types it should display on.

B. Blocks


With Custom section, blocks can be added to add additional information corresponding to that section. Most blocks have a Styles tab, where you can configure the appearance of the block, and a Visibility settings tab, where you can choose who should see the block and which device types it should display on. The specific styles settings available are different for each block type, but the same display options are available for all blocks.

Access multiple sections, sub-sections or design elements contributing to the structure and layout of the page, including:

1. Order lookup


This section is only applicable to Lookup page where customers need to input the details of your order in order to view the tracking updates in the Results page. This section allows you to customize the order lookup widget.

Order lookup editor

Select the section type: Click Order lookup to access the the Settings tab and select the section type. It can be in the form form of Column with two additional image columns or Hero banner with a banner behind the order lookup widget.
Select the lookup option: Move back to the main editor, click on Lookup fields under Order lookup to access the lookup fields settings. Select the lookup options that are required for customers to enter in order to find your order and the associated tracking updates. It can tracking number or order number along with the verification method.
Text: Input a title for the order lookup widget.

Based on the section type, you can configure additional settings to complete the layout configuration of the lookup widget.

Applicable only to order lookup page

2. Tracking updates


Applicable only to Shipments and Gift tracking results pages

This section is dedicated to displaying the tracking updates of each shipment in the order.

Select the section type: It can be in the form of Column with two additional image columns or Hero banner with a banner behind the tracking updates.

a. The Hero banner layout displays only the tracking information in a clean and crisp format with an aesthetic banner behind it along with the current tracking status in a big and bold format.



b. The 3 column layout displays the compact tracking information section that holds a set of information which you can configure.

Add 2 additional sections to add more relevant information or marketing assets to enhance customer experience like a delivery date estimation calendar.



Edit the information you want to display on the compact tracking information column.

3. Progress bar


It is a visual indicator to show the stages of order processing. Enable it if you wish to give your customers a more interactive experience.

4. Redirect package


This section when enabled allows you to show a link to the carrier's website where customers can ask to change the delivery address.



5. Status description


In this section you can customize the titles and descriptions for the pre-shipments, shipped and no updates orders. Click Edit and start configuring the titles and names based on your requirements.



Status typeStatusOrder look up pageShipments result pageGift tracking pageIn-store pickup page
Pre-shipment
PendingNoYesYesNo
ProcessingNoYesYesNo
CanceledNoYesYesNo
Custom statusNoYesYesNo
Shipment
PendingNoYesYesNo
Info receivedNoYesYesNo
In transitNoYesYesNo
Out for deliveryNoYesYesNo
Available for pickupNoYesYesNo
DeliveredNoYesYesNo
ExceptionNoYesYesNo
Failed attemptNoYesYesNo
Error
ExpiredNoYesYesNo
Non-existentNoYesYesNo
In-store pickups
PendingNoNoNoYes
ProcessingNoNoNoYes
Ready for pickupNoNoNoYes
Picked upNoNoNoYes
CanceledNoNoNoYes
Custom statusesNoNoNoYes


Choose the language from the dropdown and configure the content accordingly directly in the translation mode.

6. Subscription


This section enables your customers to subscribe to email, SMS, and Facebook messenger tracking notifications.



Select the subscription methods for tracking notifications.
Edit the section’s customer-facing title and button content.
Activate tracking events for all the selected subscription methods.

7. Shipment review


This section enables your customers to provide feedback on the delivery experience.



Allow customers to leave star and tag, text, or just tag rating.
Customize the review section’s text prompt.

Tag rating is supported for Premium and Enterprise plan users.

8. Product recommendations


This section allows you to display additional products on the tracking page based on your recommendation engine to drive additional sales and revenue.



Choose one of the supported engines– AfterShip Tracking, AfterShip Personalization, or Nosto. For more information on this, check out this article.



This section when enabled displays other shipments in your order when there are multiple shipments in a single order. It provides a concise overview of each additional shipment's content and current status and you can easily access more detailed information by opening a new window for each shipment.





Images of the items along with estimated delivery date, item title, and the option to view details of the shipment will be given.

For users importing trackings with order info, this component is accessible through Order CSV, Commerce API, and Platform connection. Ensure proper import of orders and trackings. For Tracking API & CSV users, include the order number in the payload or CSV file.

Sections 3-9 can be displayed in the compact tracking section as well as the tracking page anywhere you want.

10. Images


This section enables you to add relevant images to increase engagement.



Image section can be added thrice on the tracking page with a limit of three images in each section.
Edit the section title and add hyperlinks to images.

11. Custom section


This section allows you to create a custom section on the tracking page with six of the available blocks.



Set the title and a background image for the custom section.
Use any 3 out of the 6 supported blocks at a time.
Use a custom section a maximum of 20 times on the tracking page.
.
12. Video


This section allows you to insert video on the tracking page. Check out this article for more details.



13. Items


This section allows you to display other items present in your order along with the product name, variant, and price.



14. Header


The section of the tracking page that appears in the top margin.

Under Header settings, you are offered the following settings,



Your store name will be automatically selected since it's already linked with AfterShip Tracking. However, you have the option to change both the store name and URL if desired.
Upload your brand logo in JPG, PNG, JPEG, or GIF format, ensuring it remains under 2 MB in size.
Adjust the logo size and position according to your preference.
Customize the navigation layout of your tracking page. You have three options available
Click Add if you wish to display a dedicated menu on your tracking page.
If you'd like to include additional information in the header, such as promotions, sales, offers, or business hours, utilize the Header message field for that purpose. Otherwise, let it be as is.



The section of the tracking page that appears in the bottom margin.

Under the Footer settings, you are offered the following settings,

Legacy editor footer

For legacy editor,

a. Social account: Add links to your Facebook, Twitter, and Instagram accounts.
b. Page links: Add links to your Contact Us, Terms, and Privacy pages.

For new template editor, apart from social account and general store links, you can also add

a. Footer message: Enter free text in Markdown format to display in the footer, e.g. promotion, opening hours.
b. Apple wallet: You can enable Apple wallet tracking where your customers can now track orders directly from Wallet. Add a "Track with Apple Wallet" button to your tracking pages that appears when customers use an Apple device.

New template editor

Once changes are done, click Save.

B. Widgets



Add AfterShip Tracking’s Support Chat Widget to your branded tracking pages to reduce the number of support calls and improve customer satisfaction while they track their orders.



Get a complete tutorial here

C. Style





The Style tab enables you to set the

Customize the branding style, including color, fonts, corner, container’s border, and shadow.
Customize the components style, including button, text boxes, tabs and pills.
Customize the block and section style, for example the compact tracking info, instagram, header, and product recommendations by simply switch from the Settings tab to Style tab for each block and section.



D. Branded tracking page settings



1. Order delivery methods


The settings allows you to select which types of orders you support— Shipments and/or In-store pickups

If you've not enabled any of the methods at the time of creating the tracking page in the beginning, you can easily activate the method from here. You can customize the page design for each type separately.



If you wish to disable any of the methods which were enabled at the time of creating the tracking page, you can deactivate the method from here by simply unselecting the method.



2. Branding


The Settings tab enables you to showcase your brand logo as a favicon



Favicons are supported in ICO or PNG format.
Recommended size and dimensions are under 50 KB and 32 x 32px respectively.

3. Google Analytics




If you want to monitor tracking page sessions, copy the tracking code from your Google Analytics account and paste it into the given field.

Get a detailed run down on how you can connect your Google Analytics account with AfterShip Tracking here..

Preview your tracking page on desktop and mobile right in the editor by switching between their respective tabs.
Click Save.

E. Languages



Plans: Pro, Premim, Enterprise Platforms: All platforms



Add a new language and set a default language of the tracking page to allow customers to check the status of their parcel and the page content in the local language.

By default, the tracking page is set to English, but you can change it anytime.
You can also include a language parameter in the tracking URL to pre-select the language. If the URL doesn’t contain the language parameter, the default language page will open.
The supported languages will be displayed at the top of the branded tracking page, allowing customers to switch between them to view the tracking page in their preferred language.
You can use a language parameter in the tracking page URL for customers to directly land on the page in that language without having to select a language from the dropdown menu.
You can enable the auto-detect feature to pre-select the page language based on the customer's browser language.

Additional actions



From the page variations page, you can take the following actions.



Click Actions

Select Edit to open the tracking page editor.
Select Rename to edit the name of the tracking page.
Select Duplicate to make a copy of the current tracking page. You will be required to edit the name of the copied tracking page since you are not allowed to keep the same name for two or more pages.
Click Duplicate to another org to copy the tracking page from the current org to a different org.

Only applicable if you have multiple organizations connected to your AfterShip account.

Select Delete to permanently remove the tracking page.

Default tracking page cannot be deleted.

Select Add segmentation rule to target specific tracking page variation to specific audience segments.

Supported for Enterprise plan users

Tracking page variations



Plans: All plans Platforms: All platforms

The tracking page variation feature is designed to help you create multiple tracking pages tailored to customer segments.

Each page variation will have a different URL, which will be automatically created based on the tracking page name.
Customize each page variation and test styles and layouts according to your requirements.
Segment each tracking page with specific conditions, which will only be shown to customers when those conditions are met. Customers not meeting any defined conditions will automatically be directed to the default tracking page.
Choose to insert specific tracking page URLs for particular customer segments in your marketing campaigns and website.
The AfterShip Tracking notifications merge tag |TRACKING_URL| will automatically direct customers to the default tracking page.
For tracking page proxy URL and iframe code embedding on your store, you can select either a universal tracking page URL or a specific page variation.

Set up a custom domain or use the default URL



Plans: Premim, Enterprise Platforms: All platforms




Go to Tracking pages > Page variations in the AfterShip Tracking admin.
Scroll down to URLs and domains.
Click on Set up custom domain and then Set up instructions on how to get your own custom domain.
Copy the default tracking page URL and add it to your store's navigation if you wish to use this URL.

Tip:



Chat with our support team to get your SSL activated.
Use DNS only while setting up a CNAME.

Checkout This detailed tutorial to set up a custom domain for your tracking page in a few simple steps.

Updated on: 23/08/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!