I am trying to install TruConversion's heatmap script on my Next.js 11 website.
On the homepage of TruConversion, they state that I should add their script before the </head> tag.
And the documentation of Next.js says that I shouldn't use the "next/script" in either a next/head component or in pages/_document.js.
So, I am confused. Where should I add that heatmap script?
To use TruConversion's Heatmap you need to first load the Tracking Code and then start Heatmap Tracking.
You can place the tracking code <script /> either in pages/_document.js using the Head component from this example or in pages/index.js with <Script /> (note uppercase) strategy="beforeInteractive" using the new technique with next/scripts as demonstrated here.
Either approach will load the tracking script early on page load.
With that preloaded, you can now trigger TruConversion to start Heatmap Tracking anywhere in your app.
Related
I followed both the documentation, and the solution found here, on SO. But the input field just wouldn't load on localhost. It does however if I just add it into an index.html file.
<script async src="https://cse.google.com/cse.js?cx=123456">
</script>
<div class="gcse-search"></div>
Does anybody know what might cause it?
Things I tried:
Added it to my page as displayed above.
Added the script tag separately into the head tag.
Added the script as a function into the ComponentDidMount
What's the difference between next js <Script /> component rendering strategies (afterInteracive, beforeInteractive, lazyLoad) and using normal <script /> tag with async and defer?
afterInteractive, beforeInteractive and lazyLoad handles script and decide when it's loaded (from docs). It also differ in 'place' where it loads the script. beforeInteractive loads your script in <head> of your project. afterInteractive loads your script in <body> of your project.
Basically, it's just Nextjs way to handle scripts in your app. Main difference is that you should not use script tag in head (in Nextjs) but place it anywhere else and use right strategy so Nextjs knows where to place it.
We created a widget as an Angular app, which our customers should be able to easily load and integrate into their own website.
The most straightforward way (which works) to do this is simply to tell them to include the default HTML tags from the index.html on their website:
<base href="/">
<app-root></app-root>
<script src="https://ourdomain.com/widget/runtime.js" type="module"></script><script src="https://ourdomain.com/widget/polyfills.js" type="module"></script><script src="https://ourdomain.com/widget/main.js" type="module"></script>
However, we would like to minimize the above code and provide them a one-liner which includes a JavaScript that loads the code dynamically into the DOM, e.g. <div id="widget"></div><script src="https://ourdomain.com/widget/start.js"></script>. The script would simply consist of:
<script>
document.getElementById('widget').innerHTML = '<base href="/"><app-root></app-root>...';
</script>
The tags are loaded correctly into the DOM but the Angular app i.e. the scripts which are dynamically included into the DOM don't load.
How can this problem be solved? Is there a method in main.js which needs to be called additionally to bootstrap the Angular app?
The Angular app is deployed and hosted on our server, e.g. on https://ourdomain.com/widget. The goal is that anyone can load and plug the app into their own website using the above approach.
It turned out to work just like that:
<script>
document.write('<base href="/"><app-root></app-root>...');
</script>
Basically, I have two components page1 and page2 and I would like to draw a google Gantt chart on the second page.
However, when switching to page2 nothing is rendered.
From what I understand you must load google chart inside the <head> element of index.html file, but because the container that should render the chart inside my component page2 is hidden at the start, google chart cannot find render it.
I have tried moving the google chart script to the html file of page2 but still no result.
Making page1 the container works but as soon as I switch pages it disappears when switching back to page1.
Here is my stackblitz with the code: https://stackblitz.com/edit/angular-button-routerlink-xglnar?file=src/index.html
Is there a way to work around that? Thank you!
You can always look for some npm library that acts as a wrapper if you're unsure about how to do it properly - i.e. angular-google-charts. Note - I didn't test the library and whether / how it works.
You can also make changes yourself.
Note that you don't have place all the scripts in the head - important part is referencing the google loader:
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
Then you can use the global functions / variables imported from the file anywhere in your app. But, since Angular uses TypeScript, it will warn you that the 'google' object is not defined. To work around it, you can simply declare an empty const - which will be replaced on the runtime by the script imported from the google hosting:
declare const google;
Then you can simply put the required script in the OnInit hook of your component and it should work properly. Of course replacing the document.getElementById("chart_div") by Angular way of getting the container reference is preferred (i.e. ViewChild).
Updated stackblitz with working barebone minimum example: https://stackblitz.com/edit/angular-button-routerlink-6vzuyd
In React.js's tutorial it shows that its javascript files need to be within the <head> which doesn't allow the page to render until it has finished loading.
It seems from this quick test that any website that requires react.js does not bode well with google's pageSpeed as it throws this issue "Eliminate render-blocking JavaScript and CSS in above-the-fold content"
My questions are:
does this actually effect page speed
does this issue mean google page ranking will also be effected
To expand on #Bojangels comment: You're better off loading React in a script tag just before the </body> closing tag as follows:
<html>
<head>
<title>This is my app!</title>
</head>
<body>
<!-- Your body content -->
<script src="https://fb.me/react-0.13.3.min.js"></script>
</body>
</html>
Putting the script at the end will allow the rest of the html and your css rules to render before the script tag is reached and react-0.13.3.min.js is loaded.
Also as mentioned, you could add a defer attribute to the script tag like so:
<script src="https://fb.me/react-0.13.3.min.js" defer="true"></script>
By adding a defer attribute you would accomplish the following (source: mdn):
This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed.
As far as your second question about whether page load speed effects google search ranking, Moz (an SEO firm) wrote a post about page speed and ranking and concluded:
Our data shows there is no correlation between "page load time" (either document complete or fully rendered) and ranking on Google's search results page.
There is an npm that will help you Extract & Inline Critical-path CSS in HTML pages using webpack.
Critical Webpack Plugin: https://github.com/nrwl/webpack-plugin-critical
This helped me in React.js and to resolve Optimize CSS Delivery after the Google's pageSpeed insights.