The solutions contained within this article may affect Google search rankings since they contain Javascript redirects. For this reason, they may not be suitable for long-term or large-scale deployment.
If you've deleted articles from your Help Center, you may have noticed that users occasionally still attempt to access the URLs associated with these articles. No matter the source of such traffic, you can automatically redirect users visiting these URLs to more useful pages.
This article includes several solutions that, in most cases, should help you redirect traffic:
- Redirecting a set of deleted articles to new article equivalents
- Redirecting untranslated articles to an existing language
- Redirecting all deleted articles to one specific page
- Generalizing or specifying which articles (or community posts) redirect to one specific page
Accessing Your Help Center's Custom JavaScript file
In order to implement any such solution, you must first access your Help Center's JavaScript file:
- Sign in to Zendesk Support as an administrator. Click the Zendesk Products icon (
) in the top bar, then select Guide.
- In the top right corner of Zendesk Guide select Guide Admin.
- Click the Customize design icon (
) in the sidebar.
- Click the theme you want to update to open it.
- Click the options menu (3 horizontal dots), then select Edit Code.
- Open the script.js file.
Example: Redirecting a set of deleted articles to new article equivalents
Here's an example in which a Help Center has a set of old, deleted pages, each of which corresponds to a new page to which we are redirecting.
Within the first few lines of the JS file, you will see a line reading:
$(document).ready(function() {
Insert the following code directly above that line:
var oldIds = ["217352077", "216552968"];
var newIds = ["216553098", "216552958"];
for (var i = 0; i < oldIds.length; i++){
if (window.location.href.indexOf( oldIds[i]) > -1) {
window.location.href = 'https://YOURSUBDOMAIN. zendesk.com/hc/en-us/articles/ ' + newIds[i];
}
}
You'll need to customize a few things about this script before you can save. Let's take a look at those below.
The first part of the code you'll edit is here:
var oldIds = ["217352077", "216552968"];
var newIds = ["216553098", "216552958"];
This is a list of the old article IDs and new article IDs. You are going to have to add your own article IDs here. In order to find an article ID, just view the article in your browser (or the URL from your analytics platform). The URL will look similar to this:
https://[YOURSUBDOMIAN].zendesk.com/hc/en-us/articles/203664386-Help-Center-guide-for-agents-and-end-users
In this case, the article ID is "203664386".
In order to redirect properly with this solution, they must be at the same position within the array. So in this case, an article whose URL contains "217352077" will now redirect to "216553098". And an article containing "216552968" will now redirect to "216552958".
Be sure to keep these IDs wrapped in quotes, as seen above, and separated by a comma in each case. So if you added a new set of redirects, it would look like:
var oldIds = ["217352077", "216552968", "216552902"];
var newIds = ["216553098", "216552958", "216552944"];
Second, you will have to edit the URL in this line:
window.location.href = 'https://YOURSUBDOMAIN. zendesk.com/hc/en-us/articles/ ' + newIds[i];
Make sure that you use your subdomain, or alternately, use your entire Help Center URL as normally appears in your Help Center if it is white labeled to your own URL. Do not remove the end of the line, where it reads "+ newIds[i];". This is how the loop appends your new article ID to your URL. The code will fail without it.
Example: Redirecting untranslated articles to an existing language
Here's an example in which you have Help Center content in multiple languages. Let's say all of your contents exist in English, but only some of it exists in French and German. When a user tries to access those articles in French or German, they'll get an error page. This code allows redirects them away from the error page back to the existing English-language article:
var notDefaultLanguage = window.location.href.indexOf('/en-us/') == -1;
var isArticle = window.location.href.indexOf('/articles/') > -1;
var isErrorPage = $(".error-page").length > 0;
if ( isArticle && notDefaultLanguage && isErrorPage ) {
var newURL = window.location.href.replace(/(.*\/hc\/)([\w-]+)(\/.*)/, "$1en-us$3");
window.location.href = newURL;
}
In this example, there's only one bit of customization that needs to be done. If your default Help Center language isn't English, you can replace that language. In the code, you'll see "en-us" appear in two places:
var notDefaultLanguage = window.location.href.indexOf('/en-us/') == -1;
and
var newURL = window.location.href.replace(/(.*\/hc\/)([\w-]+)(\/.*)/, "$1en-us$3");
You'll replace "en-us" in these two lines with your default language code. Find your default language code in the URL for any of your main articles. For example, a URL for a French-language Help Center page will look like
https://[YOURSUBDOMAIN].zendesk.com/hc/fr/articles/214943538
with "fr" representing the country code.
Example: Redirecting all deleted articles to one specific page
Here's another example in which a Help Center redirects all deleted articles (note: not including community posts) to one specific article.
Within the first few lines of the JS file, you will see a line reading:
$(document).ready(function() {
In this case, insert the following code directly below that line. Important note, inserting above (as with the previous example) will not work for this example:
if ( window.location.href.indexOf('articles') > -1 && $(".not-found").length > 0 ) {
window.location.href = 'https://[YOURSUBDOMAIN].zendesk.com/hc/en-us/articles/216553068-error-redirect';
}
You'll need to customize the URL in this script before you can save. Make sure to replace it with the URL of the article you want your Help Center to redirect to.
This solution will only work if we make sure that a ".not-found" class exists in your error page. So let's add one.
On the grey bar where the "JS" link appears, click on the "Home Page" link. Find and select "Error page" in that dropdown. In the error page, you'll find an area starting with the code {{#is error 'not_found'}}
. It will look something like this:
{{#is error 'not_found'}}
<h2>{{t 'nonexistent_page'}}</h2>
<p>{{t 'mistyped_address_or_moved_page'}}</p>
{{/is}}
You will want to add a new class to the h2 element (or any element within the 'not_found' #is tags), so that it looks like this:
<h2 class="not-found">{{t 'nonexistent_page'}}</h2>
Now you have all the elements in place that you'll need for a general deleted article redirect.
Example: Generalizing or specifiying which articles (or community posts) redirect to one specific page
You can get more specific or general with this solution by customizing the if statement. For example, to redirect from any deleted article or community post, change the if statement to:
if ( $(".not-found").length > 0 )
Alternately, to only redirect deleted articles that have the word "buttermilk" in the title, change the if statement to:
if ( window.location.href.indexOf('buttermilk') > -1 && $(".not-found").length > 0 )
Unlike the first solution presented, these solutions will first breifly show the error page, then redirect to the new page. This is due to the fact that we are using JS to search for an element within the page, and in order to do that, we must first wait for the page to load.
62 Comments
Hi Aswin,
In the default Copenhagen theme there is an element with "error-page" class on the error_page.hbs. If you're using an older or customized theme then it may not be there. Open up your error_page.hbs template and add f.e.:
If that doesn't help then it's probably not working due to an other issue. Feel free to paste a link to your Help Center and I'll take a look.
Thank you, Simon. We are using a customized theme built on top of Copenhagen. Our help center is help.cricut.com.
Hi Aswin,
Your error_page.hbs file doesn't have the required class I mentioned.
The snippet I pasted earlier should work but it's probably better to change the javascript instead:
Note that there may be other issues preventing the redirects to work but this is definitely one of them.
Hope that helps.
Simon
I have made that change in our sandbox, but it doesn't seem to work either. I wish there was an easier way from the Zendesk Guide side. Just a checkbox that says "Fall back on default language for missing translations". Thanks so much for trying! :)
Hi Aswin,
Could you link me to your sandbox so I can take a look? Thanks
Simon - Our sandbox has different themes under construction, so it will be messy. But the change that you have suggested is available in our production now (help.cricut.com). Feel free to take a look again. Thanks a bunch for your help! :)
Hi Aswin,
I see what's going on, the code should only run on dom ready:
That should do it.
Simon
This is now working perfectly! You are a rockstar! THANK YOU!
Anyone have trouble seeing these redirects work in Firefox? We just archived a lot of articles, and the redirects work great in Chrome, Safari, etc. but not Firefox.
One of our devs figured it out: https://stackoverflow.com/questions/48618345/regexp-works-in-chrome-but-not-in-firefox-or-ie11?noredirect=1&lq=1
Hi - I am trying to Redirecting all deleted articles to one specific page, but I want that page to just be our help center home page.
I tried this code snippet, in the JS section. any idea what I am doing wrong?
Hi Alex,
Could you check that there is a ".not-found" element in your error_page.hbs. These things change and current Copenhagen themes use an ".error-page" element instead.
If you see an ".error-page" element, change the JS to:
I made 2 other small corrections. While a single ampersand works in this specific case, two is better to make sure you get a boolean.
I also made the first check look for '/articles/' instead of 'articles'. On the off-chance there would be a deleted section named f.e. "My favourite articles" the old check would match.
If it's still not working there may be something else causing the issue. Feel free to pass the link to your Help Center and I'll take a closer look.
Thanks
Thanks, Simon!
Still experiencing the issue. Here is the code on the error page. I see both a ".not-found" a ".error-page" element, which both have classes.
Here is the link to our help center (note: I unpublished the updates for now, so you won't see these updates in the live code): https://support.virtru.com/
Hi Alex,
It looks like there's an issue with your script.js file. At the very bottom there's a script tag that shouldn't be there:
It causes the entire script to fail, including the redirect bit. If you want to add in an external script it would typically go in the document_head.hbs template instead.
Also, I didn't see a .not-found class so best to go with .error-page from my snippet.
Hope that does it.
Hello everyone - Has anyone figured out how to use vanity URLs in Help Center/Guide?
Ex: help.company.com/offers linking to an article like https://help.company.com/hc/en-us/articles/360081928433-Latest-offers-and-promotions
Zendesk makes it really difficult to maintain redirects and we have a necessity to create a bunch of these vanity URLs. :(
Hi Aswin,
It's possible to set up vanity URLs by applying the techniques discussed in this thread.
A link to help.company.com/offers will get you a 404 not found error, served by the error_page.hbs template. This template has a "div.not-found" element. In your scripts.js you can detect this element and then redirect the user depending on the current URL.
if you have a bunch of redirects you could use a variable to make it more maintainable:
Hope that helps!
Hi,
I'm trying to redirect non-existent articles to our main page, but our JS file doesn't have that line:
While we do have a custom theme, it is based on Copenhagen and I have just checked JS file in Copenhagen and didn't manage to find it there either. I tried using different combinations, even looking for all mentions of "document", yet nothing similar seem to be present in neither in Copenhagen nor in our custom theme...
Thanks, Elliott,
I used your redirect idea to set up article redirects to simulate an article being in multiple sections without having to duplicate the content.
How to Include Article in Multiple Sections
Thanks so much for writing up your tip, Alejandro!
Nicole S.
No problem.
----------------------------------------------------------------------------------------------------------------------------------
I actually started a new post with some of the planned tips I intend on writing up.
Ranking Tips to be written up
I am looking for feedback on which ones I should write up next when I have the time.
Hi -
We support two languages for most of our articles. For the ones we don't we to redirect the user to the same article in the existing language.
I tried the Redirecting untranslated articles to an existing language section in this article, but:
I dont see the document.ready function in our helpcenter code so I thought that I had to insert the whole function. I found a spot in the script.js file and put it there. It didn't work. Instead of redirecting to the article with the existing language, is redirecting to the main page.
Even without the code I inserted, the helpcenter is redirecting to the main page.
What am I missing?
I really want to avoid creating the same article in the unsupported language...
Exactly as another user has written,
I'm trying to redirect non-existent articles to our main page, but our JS file doesn't have that line:
While we do have a custom theme, it is based on Copenhagen and I have just checked JS file in Copenhagen and didn't manage to find it there either. I tried using different combinations, even looking for all mentions of "document", yet nothing similar seem to be present in neither in Copenhagen nor in our custom theme...
So how can we add the code to our JS file? It's throwing an error on this line:
`var isErrorPage = $(".error-page").length > 0;`
With the $ being the culprit.
Hi Team,
There seems to be an issue with the multilingual routing.
For example, users that land on https://help.example.co/hc/en-us (without the extra "/" at the end) will have a homepage with https://help.example.co/hc/en-us/articles/36002405313 link and it doesn't work as expected, getting the below error message:
oops
The page you were looking for doesn't exist
You may have mistyped the address or the page may have moved
If the user lands on https://help.example.co/hc/en-us/ (with the extra"/") they will have a homepage with https://help.example.co/hc/en-us/categories/36002405313 link and it works fine.
How can we force this extra "/" or what other options do we have to handle this for an user that lands without this extra "/" at the end?
Thanks!
Hi Marco, I replied to your comment on the other thread.
Madison Davis can we move into a ticket? Please let me know how to proceed. Thank you!
Hi Marco,
Here is information on contacting Zendesk support.
After migrating our entire Help Center into a new Zendesk instance (merger into a multi-brand account) all of our article IDs changed. We were able to successfully implemented a redirect script of over 1,000 articles using the suggestions in this article and some of our own modifications.
My question is this: Prior to the redirect processing, the user briefly sees the "page not found" screen (error page), then the page redirects. Is there any way to have them see an alternate page that we could customize with a more relevant message? Or does that error page appear prior to the system realizing there is a redirect for the article being accessed?
Hi Eric,
You nailed it with your second question - that page appears and then the JS runs to execute the redirect. At the moment we do not have a workaround to offer.
That being said, you may want to post your issue and what you're looking for in the Guide product feedback forum. You may also want to comment or up-vote on this request: Allow Redirect of URLs
Say we wanted to redirect all articles of one brand to a new brand is that possible?
Thanks
Hello David Halewood,
This article's information with some changes to fit your use case is the best documentation we have available for this ask. I'll reach out to our moderator team to see if they can offer son insight into making these changes. We'll also share this post in our weekly digest so others can share that advice on how to accomplish this.
Best regards.
Please sign in to leave a comment.