I am using React-Router-Dom-6. my public folder structures are:
I have some external javascript libraries for template design in the main public and my index.html is:
<!--=============== scripts ===============-->
<script src="%PUBLIC_URL%/assets/js/jquery.min.js" type="text/babel"></script>
<script src="%PUBLIC_URL%/assets/js/plugins.js" type="text/babel"></script>
<script src="%PUBLIC_URL%/assets/js/scripts.js" type="text/babel"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
above javascript files are working or loading on the first page when the application gets started. But these libraries are not working when redirecting to another page. at that time route changed but the js files are not loading. I tried many ways but couldn't get the solution. I am using react-router-dom v6 for routing.
You should make use of them in the App.js component, call them with useEffect hook before your render method... this process should work on every route changed
for example:
useEffect(() => {
const script = document.createElement("script");
script.src = "/path/to/jquery.js";
script.async = true;
document.body.appendChild(script);
},[])
or this link should do
https://betterprogramming.pub/4-ways-of-adding-external-js-files-in-reactjs-823f85de3668
I seem not to be doing something right, but I don't know what. I need to open cloudinary upload widget in my web app and it keeps throwing this error; TypeError: __WEBPACK_IMPORTED_MODULE_6_cloudinary___default.a.openUploadWidget is not a function.
I am using react and this is how I am using it...
load = (e) => {
e.preventDefault();
cloudinary.openUploadWidget({ cloud_name: 'classvideo', upload_preset: 'classVideo' },
function (error, result) { console.log(result) });
}
This is how I tried rendering it on the click of a button inside my render method...
<div>
<button onClick={this.load}>upload Image</button>
</div>
and this is the script tag in my html
<script src="//widget.cloudinary.com/global/all.js" type="text/javascript" />
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
Is there something I'm doing the wrong way? what does webpack have to do with this?
please help
Try adding window.cloudinary.openUploadWidget({..
cloudinary will be a global object if you are loading it with a separate script tag.
If you remove your import that shadows the global object it will work as expected.
// import cloudinary from 'cloudinary';
If you are landing on this post but are using Angular instead, note that you have to:
include the script in angular.json
reference the script from index.html
...and then declare the cloudinary variable in the component
Notice that I am not using the remote script reference but have downloaded the widget source code and have included it in my project.
You can use React Cloudinary Uploader for Rect, it's a good solution at this time to handle Cloudinary in React.
I am trying to add Google Analytics to a React Web Application.
I know how to do it in HTML/CSS/JS sites and I have integrated it in an AngularJS app too. But, I'm not quite sure how to go about it when it comes to react.
With HTML/CSS/JS, I had just added it to every single page.
What I had done with AngularJS was adding GTM and GA script to index.html and added UA-labels to the HTML divs (and buttons) to get clicks.
How can I do that with React?
Please help!
Update: Feb 2019
As I saw that this question is being searched a lot, I decided to expand my explanation.
To add Google Analytics to React, I recommend using React-GA.
Add by running:
npm install react-ga --save
Initialization:
In a root component, initialize by running:
import ReactGA from 'react-ga';
ReactGA.initialize('Your Unique ID');
To report page view:
ReactGA.pageview(window.location.pathname + window.location.search);
To report custom event:
ReactGA.event({
category: 'User',
action: 'Sent message'
});
More instructions can be found in the github repo
The best practice for this IMO is using react-ga.
Have a look at the github rep
If you prefer not to use a package this is how it can work in a react application.
Add the "gtag" in index.html
<!-- index.html -->
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "<GA-PROPERTYID>");
</script>
In the submit action of the login form, fire off the event
window.gtag("event", "login", {
event_category: "access",
event_label: "login"
});
Without using a package this is how I would do it:
In your index.js (in the render method):
{/* Global site tag (gtag.js) - Google Analytics */}
<script
async
src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"
/>
<script>{injectGA()}</script>
And outside the class:
const injectGA = () => {
if (typeof window == 'undefined') {
return;
}
window.dataLayer = window.dataLayer || [];
function gtag() {
window.dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'YOUR_TRACKING_ID');
};
One other great library that you can check is redux-beacon.
It gets integrated very easily with react/redux application and has a great documentation for it. ReactGA is good too but with redux-beacon, you won't clutter your app code with google analytics code as it works via its own middleware.
Escape the analytics code with dangerouslySetInnerHTML
First you have of course to share the header code to all pages, e.g. as asked at: React js do common header
Then, this Next.js answer https://stackoverflow.com/a/24588369/895245 gives a good working code that should also work outside of Next.js. It escapes the analytics code with dangerouslySetInnerHTML:
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-47867706-3"></script>
<script
dangerouslySetInnerHTML={{
__html: `window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-47867706-3', { page_path: window.location.pathname });
`,
}}
/>
where you should replace UA-47867706-3 with your own code.
This code is exactly the code that Google gives, but with the following modification: we added the:
{ page_path: window.location.pathname }
to gtag('config' for it to be able to get the visited path, since this is a JavaScript SPA.
This generates the desired output on the browser:
<script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-47867706-3"></script><script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-47867706-3', { page_path: window.location.pathname });
</script>
The only other divergence from the exact code given by Google is the async="" vs async, but both of those are equivalent in HTML since it is a boolean attribute, see also: What's the proper value for a checked attribute of an HTML checkbox?
Escaping with dangerouslySetInnerHTML is necessary because otherwise React interprets the code inside script a JSX and that fails with:
Syntax error: Unexpected token, expected "}"
21 | <script>
22 | window.dataLayer = window.dataLayer || [];
> 23 | function gtag(){dataLayer.push(arguments);}
| ^
24 | gtag('js', new Date());
25 |
26 | gtag('config', 'UA-47867706-3');
I wish they would just automatically escape stuff inside script for us.
Finally to get page switches, you also have to track that with more code, see the Next.js answer mentioned above for an example.
Related: Adding script tag to React/JSX
Tested on react 17.0.2, next.js 10.2.2.
There are 2 types of Google Analytics properties: Universal Analytics (UA-xxxxxxxxx-x) which is deprecated with the end of life on 2023.07.01 and Google Analytics 4 property (G-xxxxxxxxxx) which is the replacement.
react-ga was popular for Universal Analytics but the maintainer doesn't plan to update it (related issues: 1, 2, 3) and it had maintenance issues (1). react-ga4 and ga-4-react popped up as replacements but since these are similar wrappers you're at the mercy of the maintainers to implement and support all functionality.
The simplest way to get started is to follow Google's guide: include gtag on the page and use it as window.gtag. This method works for both old and new tags and there's even TypeScript support via #types/gtag.js. The script can be loaded async as recommended.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxxxx" >
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-xxxxxxxxxx')
</script>
<!-- ... -->
</head>
<body>
<!-- ... -->
</body>
</html>
Keep in mind that Google Analytics does automatic page tracking, but this will not work for every use case. For example, hash and search parameter changes are not tracked. This can lead to a lot of confusion. For example, when using HashRouter or anchor links the navigation will not be tracked. To have full control over page view tracking you can disable automatic tracking. See for a detailed explanation: The Ultimate Guide to Google Analytics (UA & GA4) on React (Or Anything Else
Manual page tracking: https://stackoverflow.com/a/63249329/2771889
You can see this working in cra-typescript-starter where I'm also setting the tag from an env var.
I suggest embedding the Segment script into your index.html, use the analytics library that is accessible on the window object, and add tracking calls onto React’s event handlers:
export default class SignupButton extends Component {
trackEvent() {
window.analytics.track('User Signup');
}
render() {
return (
<button onClick={this.trackEvent}>
Signup with Segment today!
</button>
);
}
}
I’m the maintainer of https://github.com/segmentio/analytics-react. I recommend checking it out if you want to solve this problem by using one singular API to manage your customer data, and be able to integrate into any other analytics tool (we support over 250+ destinations) without writing any additional code. 🙂
Looking at google's site https://developers.google.com/analytics/devguides/collection/analyticsjs,
you could also add Google Analytics using this function:
const enableGA = () => {
!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
}(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-X');
ga('send', 'pageview');
}
This way you don't need an external library, and it's pretty quick to setup.
I am trying to use the Stripe API to allow for payment through my website, but I am having issues adding Stripe into my project.
I used the create-react-app structure for my project, and added Stripe into the index.html file in /public/index.html as follows:
<body>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.39.0.min.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script>
window.AWSCognito = window.AWS
</script>
<script src="https://gitcdn.xyz/repo/aws/amazon-cognito-identity-js/master/dist/amazon-cognito-identity.min.js"></script>
<div id="root"></div>
</body>
However when I test, I get an error:
/src/api/stripe.js
2:5 error 'Stripe' is not defined no-undef
My stripe.js file:
export const getStripeToken = (card) => new Promise((resolve, reject) => {
Stripe.card.createToken(card, (status, {error, id}) => {
if (error) {
reject(error.message);
} else {
resolve(id);
}
});
});
Thanks in advance!
I figured it out! I was being a bit of a dumby.
I changed Stripe to window.Stripe in my code, and it works now!
Thanks everyone.
It's only a problem of getting it compiled. The proper way to fix it is to ask compiler to not look for Stripe and it will be available globally. Add this comment /* global Stripe */ before you initialize Stripe:
/* global Stripe */
const stripe = Stripe('STRIPE_KEY');
I am trying to load these scripts
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-sanitize.min.js"></script>
in ionic framework to load/render emoticons using emoji.min.js
The emoticons renders very well when I build a separate app not on ionic to demo it. But immediately I integrate it into ionic app, it freezes.
This is the github url for the project
https://github.com/sagardalal21/AngularEmoji-IonicApp
To run the project, kindly open command prompt and type ionic serve
Kindly assist!
EMOJIS IN ANGULAR AND IONIC by pookdeveloper
EMOJIS IN ANGULAR AND IONIC
To show emjois in angular or ionic you can try this:
Create a service to call a json with all emojis, you can finde the emojis in this page:
https://raw.githubusercontent.com/dzfweb/nativescript-emoji/master/emoji.database.ts
emojis(): any {
return this.http.get('assets/data/emoji.json')
.map((res: any) => res.json());
}
Call the service:
/* CALL SERVICE TO GET EMOJIS */
emoticonos() {
this.confData.emojis().subscribe((data: any) => {
console.log("EMOJIS", data);
this.emojis = data;
});
}
Print the emojis:
<ion-item-group *ngFor="let emoji of emojis">
{{emoji.unicode}}
</ion-item-group>