I'm trying to integrate Hotjar with an admin panel.
The way it currently works is some sort of SPA without page loads and neither URL changes.
It all happens under /index.php and then when we need to change a page, just send an AJAX request to load it's content.
From checking the documentation, Hotjar seems compatible with SPA's but only when there's a change in the URL (either query string or hash).
Is there a way to trigger in JS a page change to a page name (i.e. Main Page) ?
I've tried
hj('vpv', 'Main Page')
But the output seems weird
url: "http://mydomain.comTest Page"
Thanks.
You can track your changes manually by adding additional JavaScript after your AJAX calls.
Documentation:
To Manually Issue a State Change
hj('stateChange', 'some/relative/path');
Example:
Imaging that you have a SPA with base URL http://example.com/ and you want to track the main page and a page that gets dynamically loaded with AJAX once you click some button.
In order to do that, you would need to:
1) In your Hotjar account, create two heatmaps. For the main page, you can use the base URL http://example.com/. For the page that is going to be loaded dynamically, you can put a virtual URL, e.g. http://example.com/my-dynamic-page, which will be used only for recording and will not need to exist in your SPA.
2) In the JavaScript of your application, add the state change code after the AJAX call that will dynamically load the page.
You need to use the virtual URL that you defined in the previous step to let Hotjar know that this is a new page and you want to track it separately:
hj('stateChange', 'http://example.com/my-dynamic-page');
Related
This might just be because I'm not entirely sure how to word it properly, but here's an overview of the problem.
I have a site where it pulls the main content using ajax, and by using pushState, I change the url. Say from "site.com/" to "site.com/area". But reloading this page (or entering it in the url) causes it to completely fail (because there's no such thing as site.com/area).
Is there a way to load the page from that link?
Note, that this isn't about the history / back and forward buttons. I simply want it to load a page from that kind of link.
The page must exist in one way or another. Depending on what server you're running it on you can redirect all requests to your first page if you want to solve it like that. Then you don't have to create a new page for all "routes", but can build it into your first page/application.
But the page must exist in one way or another.
I have two basic pages with the urls
http://localhost:8000/page-a and
http://localhost:8000/page-b.
I'm using html5 history api and following this tutorial.
The only difference is that I add the api endpoint of the data, like
http://localhost:8000/api/page-a and
http://localhost:8000/api/page-b, in pushState().
I can easily go back and forth in history but when reloading the page and go back and forth, window.popstate does not trigger anymore. Rather, it directly navigates to page-a and page-b as it says in the console.
In the demo, I reloaded the pages but it still works fine. Is this because the data has to be fetched with AJAX? (but in the tutorial it says the AJAX is fine)
EDIT
I forgot to mention that the pages are created dynamically (with Django). Is it because of the dynamic nature of the pages?
SOLVED
I should have added the url of the state like http://localhost:8000/api/page-a/. On page reload, Django always resolves the url http://localhost:8000/page-a to http://localhost:8000/page-a/ so when I click the back button the onpopstate is never triggered. It was just a '/' and costed me like two days.
I have a table with live data in it (meaning it is stored on the server and people who has access can view the data in their machine as well). I have a Create data page and View data page that contains the table. Once I have finished creating a new data and click a link going to the View page. The data should be there already.
I have tried the location.load() internal script in the View.html page that is triggered by the attribute onLoad="" but it's not working. However, when I create a button that has a function to refresh, it does work but I want it to be an auto refresh.
To make it easy and simple, use location.reload(). You can also use location.reload(true) if you want to grab something from the server.
You can simply use an jQuery Ajax call to make call to your backend API and fetch data, which you can add to your html table. This process you can handle in page/document ready or load events. I don't think you need to reload the page just to achieve this.
If you are working with AngularJs SPA (mentioning this as you added the tag), these two HTMLs/Pages can be rendered into the same layout based on the route and follow the above mentioned approach (using $http.get of Angular) to get view data and bind it to the respective view. As it is SPA, no concept of page reload.
On my website, Like buttons are generated dynamically. The URLs associated with these Like buttons are links that automatically redirect (with htaccess) to its respective hashtag url (i.e. ".com/event/200" redirects to ".com/#event/200"). The issue is that I can't seem to set the title or image. When a page loads with a hashtag, a database is queried and then the page title, meta data, and other things are changed. Facebook seems to be using the metadata that's set before the database has had time to load and the content has been changed. Does anyone have any idea how I can solve this problem? I'd love to be able to set the title and image when the like button is loaded if there's anyway to do that. Here's my like button code:
<fb:like href='http://website.com/"+postname+"/"+data.id+"' send='true' layout='button_count' width='450' show_faces='true'></fb:like>
The URLs associated with these Like buttons are links that automatically redirect (with htaccess) to its respective hashtag url (i.e. ".com/event/200" redirects to ".com/#event/200").
That’s your error right there.
Since the Hash part of an URL does not get transmitted to the server, it’s only usable client-side. So redirecting to it server-side is a really bad idea, since you know nothing about the client’s capabilities (f.e. if it supports JavaScript).
Don’t do server-side redirects - make them client-side instead, via JS.
This tutorial shows how to basically go about making an “AJAX-Page” crawlable: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=174992
So I have my site at http://example.com/foo/ (under a directory, the main domain is for something else).
Using .htaccess, I've set up my pages so the URLs look like http://example.com/foo/about/, http://example.com/foo/polls/, http://example.com/foo/registration/, etc. This works great and the site loads fine and can be traversed without any Javascript issues.
Now, I'd like to add some AJAX functionality to the navigation. If I'm on http://example.com/foo/ and I click the navigation for "About", it changes the URL to http://example.com/foo/#about and dynamically loads the about page in one section of the site. I also have this working.
I have two problems which involve handling switching between AJAX and non-AJAX URLs.
If I'm on http://example.com/foo/about/ and I click on polls, it would look like http://example.com/foo/about/#polls which doesn't look very pretty. Ideally, I'd want every AJAX URL to be formatted with just the main directory and a hash, like http://example.com/foo/#about.
Should I handle it by forcing an actual (non-AJAX) redirect to the index page with a hash symbol then load it from there?
The other problem is the reverse. If I send http://example.com/foo/#about to someone who has Javascript disabled, or maybe if someone links to it and a bot crawls that link, is there any way to handle that to redirect to the correct non-AJAX page or is this just an unfortunate fact of life I'll have to deal with?
If you need non-javascript support, I'd change all your urls directly to the pages. Like http://example.com/foo/#about to http://example.com/foo/about/
Then, the javascript can intercept it, call event.preventDefault(), and 'redirect' it to #about, which will follow your ajax functionality.
If the client doesn't have javascript, it will go to http://example.com/foo/about/ as normal.
As for being on http://example.com/foo/about/, a javascript client should never get here as they will always be redirected to hashtags.
1) if you redirect to the main page and then use ajax to load the about page that would just not make much sense. what you should do is make everything work through ajax : there should never be a http://example.com/foo/about/ in the first place only http://example.com/foo/#about then you just update the hash and the content when you click on polls.
2) there is no way to avoid, sorry.