Blazor Google Analytics

I'm using metronic with Blazor integration. I use Google Analytics on my website. However, the analysis does not work properly because the transition between pages is dynamic.

When user moves from page A to page B, the skeleton remains the same, but the content of the page changes. It doesn't work even if the url is changed. But when the page is refreshed (F5) the analysis works properly.

I frankly searched for how to fix this, but I couldn't find it. I hope someone here knows the solution to this..

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)

Hi,

When you change routes in Blazor the page doesn't get reloaded I guess this could be a reason why your Google Analytics doesn't work.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

There is no need to do anything extra in Google Analytics 4 (GA4) version.

However, in previous versions, the following JavaScript code should be run on every page change:

let configObject = ConfigObject = {};

let gid = "UA-XXXXXXXXX-X";

configObject.page_location = location.href;
Object.assign(configObject, this.globalConfigObject)
gtag("config", gid, configObject);

Hi,

Do you have any errors in your browser console?

Regards,
Lauris Stepanovs,
Keenthemes Support Team

I solved the problem.
I just wrote the solution in case others encounter this problem.
For those who don't use GA4, the method that should be called after each page change, referring to the gtag.js function, should be used.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(