How to add a Cainiao tracking page (unbranded) to your site

the_lyall

Active Member
#1
I’ve seen a few different posts about this while searching for a solution myself so I’ve made my own solution and thought I’d share it here.

There are a few reasons why I wanted to use Cainiao rather than 17Track:
  1. 17Track includes ads on the page which show on your site if you use an iframe.
  2. The Cainiao tracking details are more accurate, detailed, recent and easier to understand (in my experience). It also has (on desktop) the nice progress animation at the top.
  3. If you or your customer Googles '17Track' it brings up a lot of negative reviews saying that it's a scam. Obviously just because 17Track is used by scammers doesn't mean it's a scam itself, but the negative reviews can lower customer confidence in your own site.
Essentially the process involves adding the Cainiao tracking page in an iframe and automatically taking the tracking number from the query string and adding it to the iframe URL, so you can use it as the tracking page for email and My Account links without the customer having to enter their tracking number.

For example, you can use a tracking link like this: https://ecorelos.com/order-tracking/?LN844243263CN

1590487041280.png

You will notice that I’ve cropped the tracking after the most recent events and that is deliberate. If you leave enough space (on desktop view only) the page will add a footer section which includes links to AliExpress etc. which I don’t want. If you crop the frame the page doesn’t add the footer as it won’t fit in the frame. On mobile view it doesn’t show anyway.

STEPS:
  • Create a tracking page
  • Create the dynamic iframe link (works with any carrier)
  • Add the link to the page
  • Update the plugin tracking setting
  • Add CSS

  • Create a tracking page

In WooCommerce go to Pages > Add New and create a page called something logical. I used ‘Order Tracking’ but you can use anything you want.
That’s all for now. If you have any SEO or XML Sitemap plugins, update those settings so that this new page isn’t indexed as you don’t want it to be crawled.

  • Create the dynamic iframe link
For this you’ll need to add the plugin ‘Insert PHP Code Snippet’. Once added, go to the PHPCode Snippets settings and click ‘Add New PHP Code Snippet’.

Give it a name – I called mine ‘TrackingFrame’ but you can call it anything.

For the content, add the following:

HTML:
<iframe class="trackingframe" src="https://global.cainiao.com/detail.htm?mailNoList=<?php echo $_SERVER['QUERY_STRING']; ?>" width="100%" frameborder="0" scrolling="no">
Explanation:
class="trackingframe" gives the frame a CSS class so you can target it with CSS later

src="https://global.cainiao.com/detail.htm?mailNoList= is the URL of the tracking page to use, minus the tracking number. You can use any carrier tracking link here

<?php echo $_SERVER['QUERY_STRING']; ?> is the PHP code which takes whatever query string is in the current page URL (i.e. whatever is after a question mark like google.com?1234 would mean ‘1234’ is the query string) and adds it to the iframe URL.

width="100%" frameborder="0" scrolling="no" are iframe attributes to make the frame full width, without a border and non-scrollable.

Save the snippet and the plugin will show you the shortcode you can use to add that snippet to a page (in my case [xyz-ips snippet="TrackingFrame"]).

  • Add the link to the page
Go back to the empty tracking page you created and insert the shortcode you just created into the page body.

Now when you visit that page, the iframe will look at the page URL and copy the query string. So if you add a query string such as tracking.com/mypage?CN1234 the iframe URL would be https://global.cainiao.com/detail.htm?mailNoList=CN1234.

If you access the page directly (without a query string) it will show the Cainiao error/no tracking page. Therefore I don’t have the page accessible through the front end, only via the My Account tracking links and the email tracking links.

  • Update the plugin tracking setting
Go to the AliDropship settings and enter your new tracking page as the custom tracking link. My example from the start would be https://ecorelos.com/order-tracking/? and the plugin will add the tracking number to the end of the URL

  • Add CSS
Now this part will vary heavily depending on which theme you’re using. For example, I added a negative margin to the top of the iframe to ‘slide it under’ the header to hide the top banner. However you can also add a 100% width div to the page to overlap the header instead (which is what I did first but then changed my mind).
Without this part, the page will work but will be Cainaio branded. My CSS is below as an example:

CSS:
.trackingframe{
    margin-top:-80px; //move it up 80px to hide the header
    height:100%;
    width:100%;
    z-index:-1; //make it go under the header instead of over it
    overflow-x:hidden; //hide the horizontal scrollbar
    min-height:585px; //set the height that I want to show
}
The height of the header is 80px on desktop and 50px on mobile, so use CSS media queries to target smaller screens separately.

That's all!
 
Last edited:
#4
Did anyone face negative repercussions (abandoned carts, refund requests, cancelled orders etc) so far since the Cainiao iframe shows China as the origin of shipping destination?

Granted, customers may still know the origin thanks to the packaging but could the very name of China (in the present world scenario) on the tracking orders page give them a fright?
 

Mar

Moderator
#5
Did anyone face negative repercussions (abandoned carts, refund requests, cancelled orders etc) so far since the Cainiao iframe shows China as the origin of shipping destination?

Granted, customers may still know the origin thanks to the packaging but could the very name of China (in the present world scenario) on the tracking orders page give them a fright?
Personally, I don't see any issue with products originating from China. It is something to live with. If you check your gadgets, more often than not, they are made in China. I believe, people accept the fact.
 
#6
If you check your gadgets, more often than not, they are made in China. I believe, people accept the fact.
True, do you also mention China in your shipping policy page just so the customers get a fair idea beforehand where the products they are purchasing are sourced from? IMO it helps in establishing 'trust'.
 

Mar

Moderator
#7
True, do you also mention China in your shipping policy page just so the customers get a fair idea beforehand where the products they are purchasing are sourced from? IMO it helps in establishing 'trust'.
I don't advertise China anywhere in my sites, but I don't spend time and effort to hide, e. g. Ship from China and other signs of China. If anything China is bad, AliExpress which everybody know originated from China and is China until now, would not have succeeded.
 

the_lyall

Active Member
#8
Did anyone face negative repercussions (abandoned carts, refund requests, cancelled orders etc) so far since the Cainiao iframe shows China as the origin of shipping destination?

Granted, customers may still know the origin thanks to the packaging but could the very name of China (in the present world scenario) on the tracking orders page give them a fright?
They don't see the tracking page until after their order has been placed and shipped, so too late to abandon cart or cancel the order once shipped. I don't mention China on the site but if you read between the lines ('shipping direct from the manufacturer/supplier' and the long delivery times) it kinda says so. I'm not stating it but I'm not going out of my way to hide it and if anyone asks I will always tell them the truth.
 

the_lyall

Active Member
#9
Did anyone face negative repercussions (abandoned carts, refund requests, cancelled orders etc) so far since the Cainiao iframe shows China as the origin of shipping destination?

Granted, customers may still know the origin thanks to the packaging but could the very name of China (in the present world scenario) on the tracking orders page give them a fright?
I just re-read the last part... If by 'present world scenario' you mean COVID-19 then I don't think it's an issue unless the customer is particularly racist (might be a strong word to use but I can't think of a better one). In terms of COVID I'd be more worried about a parcel coming from the US or UK at the moment!
 

Mar

Moderator
#10
They don't see the tracking page until after their order has been placed and shipped, so too late to abandon cart or cancel the order once shipped. I don't mention China on the site but if you read between the lines ('shipping direct from the manufacturer/supplier' and the long delivery times) it kinda says so. I'm not stating it but I'm not going out of my way to hide it and if anyone asks I will always tell them the truth.
If customers really want to find out, they will know that the product come from China and that is even before the order is shipped. That is why again, I don't spend time and effort to hide it.
 
#11
Personally, I don't see any issue with products originating from China. It is something to live with. If you check your gadgets, more often than not, they are made in China. I believe, people accept the fact.
Yes, I agree. It is stated in my website that the product are kept in warehouse in China. I am more concern of products coming from nations badly hit by covid-19 at the time being. U.S.A still at the top of the charts. Some of my parcel took 7 weeks to reach my customer in Vancouver, Canada.
 
Top