Comments (11)
The use case is both inline and linked scripts. The most important thing is that the scripts should only execute once when already rendered via SSR. I suppose checking the contents would be sufficient to ward against this?
Here's how I load ga:
/* global __PRODUCTION__ __CLIENT__ __CONFIG__ */
import React, {Fragment} from 'react'
import Helmet from 'react-helmet'
import {LocationListener} from 'plugins/react-router-deluxe'
const {gaId, gAdwordsId} = __CONFIG__
export const gtag = (...args) => global.gtag && global.gtag(...args)
const handlePageView = location =>
gtag('config', gaId, {
// eslint-disable-next-line camelcase
page_path: location.pathname + location.search,
})
// Don't render the scripts on the client, they
// should be loaded on initial html only
// Also https://github.com/nfl/react-helmet/issues/357
const GoogleAnalytics = () =>
__CLIENT__ ? (
<LocationListener onChange={handlePageView} />
) : __PRODUCTION__ && gaId ? (
<Fragment>
<Helmet>
{/* Putting in head because it also offers page speed tracking */}
<script
async
src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
/>
<script>
{// Must be string to prevent React from messing with the code
`window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','${gaId}');${
gAdwordsId ? `gtag('config','${gAdwordsId}');` : ''
}`}
</script>
</Helmet>
</Fragment>
) : (
false
)
export default GoogleAnalytics
and then I can just put <GoogleAnalytics />
somewhere on the page and it will take care of the rest. The globals are added by webpack.
I think this might also be useful on the client for when you need a third-party library: put a <Script src="url" onLoad={this.handleLibLoaded}/>
in the component and react-head makes sure it's loaded only once, but new onLoads are called every time?
from react-head.
@tizmagik Would you still be game to take a PR on this? I might be interested.
from react-head.
Oh and for external scripts, caching will indeed prevent downloads, but it will still run the script every time. Most scripts already protect against that, so no big issue, and I can't think of workarounds that always work and don't impact preloading etc.
from react-head.
react-head will load it twice too. It's better to use another way of loading for scripts IMO.
@tizmagik What do you think?
from react-head.
from react-head.
Interesting! I think maybe we could figure out a way to support this, either by no-op’ing on the server or no-op’ing on the client perhaps?
@wmertens is your use case for inline scripts or linked scripts, or both? If you have a specific use case or some sample code snippets or something you could share that would be helpful to understand the specific use case better.
Will play around with some ideas and post back when I get a chance.
from react-head.
@RichiCoder1 — yea for sure, if you’re up for it! Thanks in advance 🙏
from react-head.
I'm also looking for this functionality and willing to contribute, but I'm not sure the solution to the double load.
For external scripts, caching should make it irrelevant, right?
Inlined scripts are problematic though. We can't not render them on the client or they won't be set when people navigate in the client. Maybe the server could pass some data to the window indicating an inline script is already loaded?
from react-head.
Inline scripts could be wrapped with something that makes sure they only run once, but that seems hard to do.
Alternatively, tell the user is up to them to handle that.
from react-head.
Another use case for script
tag is to support <script type="application/ld+json">
.
Is there a need to special case these, or can a Script
head tag component be exposed for this purpose ?
from react-head.
For <script type="application/ld+json">
use case I added a Script tag in #115
from react-head.
Related Issues (20)
- Link canonical cascade HOT 1
- Expose HeadTag? HOT 2
- Question: Does it work without ssr for SEO, on fb and twitter ? HOT 1
- Children prop type missing in HeadProvider HOT 7
- Is this library still maintained? HOT 1
- Suggestion: use renderToStaticMarkup instead of renderToString HOT 4
- Some tags not collected HOT 4
- Invariant failed in HeadTags HOT 9
- Development server not working HOT 2
- does not support ie9? HOT 2
- Proposal: headTagsToElement(headTags) HOT 1
- Element.remove() not supported in IE HOT 3
- Document usage with SSR streaming HOT 3
- TypeScript support HOT 3
- react-head supports meta update on lazy load HOT 3
- itemProp support on <Meta /> HOT 1
- canonical link is repeated HOT 1
- Title component doesn't override default <title> tag provided via HTML template HOT 10
- Entities in computed attribute values? Suggested approach? HOT 5
- RFC: Managing tags without extra markup HOT 14
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-head.