Possible to check previous page user visited?

support
1

How do I figure out what page a user previously was on before landing on a specific page?

As an example, when a user visits products/product-a/ and clicks on preview, they come to the products/preview page. I’d like to display a link to the products/product-a/ page on products/preview. If they were previously on products/product-b/, I’d like to show that link.

Content

 products
   _index.md
   product-a.md
   product-b.md
   preview
     index.md [layout = preview]

Layout

layout > products > single.html
layout > products > preview.html
2

It seems I can do this using the JavaScript function document.referrer; which gives the previous page.

Is it possible to pass the javascript variable to a go variable?

Something like this:

<script>
var url = "{{$url := slice}}
var url = document.referrer;
var url += "{{$url}}"
</script>

Calling {{$url}} gives document.referrer;

3

You can build JavaScript with Hugo templating, but not the other way around.

4

Agreed with @zwbetz. From what I can tell you don’t actually need Hugo for anything you want to do…

5

Thanks. I’m not familiar with javascript so that’s why I was wondering if it was possible. I need to think a bit more about what I’m trying to achieve as I’m overcomplicating things. Thanks again.

6

Most css libraries achieve this with “breadcrumbs” right?

7

If you DON’T want to know which page they were on, but WANT to send them to the last page they were on (semantics, sorry) use the following:

<a href="javascript:history.back();">Back to last page</a>
<a href="javascript:history.back(2);">Back to page before last page</a>
8

Thanks all for the suggestions.

So what I’m trying to do is the following:

  • I want to figure out the previous page a user was on in order to display information related to that page on the current page they are viewing.

Example:

  • User visits products/product-a/

  • User clicks on the preview link

  • User lands on products/preview/

  • On products/preview/ the previous page’s – products/product-a/ – title and description along with other information from the markdown file, product-a.md, is displayed.

I thought by using document.referrer; I would be apply to capture the url of the previous page, pass it to a go variable, and then do the logic using Hugo. But that’s apparently not possible.

My understanding of breadcrumbs is that they follow the structure of the content folder. Using my example:

When a user visits products/products-a/, the breadcrumbs become:

home > products > products-a

When a user visits preview from products/product-a/, the breadcrumbs become:

home > products > preview.

Any suggestions on this?

9

if the breadcrumb is home > products > preview you don’ know he was on products-a before so it’s not a referrer thing but a simple hierarchical thing of the current page. because preview.md is (if you did it all the way it works best) inside of /content/products/.

/content/products/products-a.md
/content/products/preview.md

any breadcrumb template will display it right if your files are located like these.

The problem is: I have the quaint feeling that yo would probably prefer

home > products > product-a
home > products > product-a > preview

from a logical point of view. in this case you need a subfolder preview in your product-a folder.

10

You’re correct. This would mean creating a subfolder in each product folder which number in the hundreds which isn’t optimal.

11

In that case: RETHINK.

You want a preview of something. What is the preview? A gallery? Add a gallery to product-a.md that pop ups per click. A file sample (PDF?)? add it as page ressource to product a.

Page ressources:
/content/products/product-a/index.md - product info (the index.html page)
/content/products/product-a/sample.pdf - a page resource you can use in index.html

Check out page resources in the docs.

12
13

Thank you! Will do.

14

An important thing to note is, hugo is building before your users view the site, so, it’s not involved. Nor does it inject any javascript automatically. It helps you assemble the site, taking exactly what you give it and building the site quickly.

1 Like