I am working on React.js. I want to know how to integrate tableau with React JS code. If you have any reference let me know
Thanks for Advance
If you want to integrate your Tableau dashboard in your ReactJS application, you can either use the Tableau JavaScript API
Add this inside your Index.html : <script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
and create one component to render the dashboard as per the instructions
here.
OR
use the Tableau-React library.
Add:
<script type="text/javascript" src="https://<tableauurl>/javascripts/api/tableau-2.min.js"></script>
then add:
const { tableau } = window;
const url = "https://<tableau-dashboard-url>/views/testing/map";
const ref = useRef(null)
console.log(ref);
function initViz(){
new tableau.Viz(ref.current, url);
}
useEffect(() => {
initViz();
},[])
And inside return, add below line:
<div ref={ref}></div>
It will work for sure :)
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 have an angularjs (version 5) app running in laravels public folder.
angularjs should serve the ui aka frontend. whilst laravels "only" route is the backend api access to the data(base) serving the ui at /api/....
How do I marry both?
My angularjs app resides in /public/ui/ so I currently just have a route in laravel like so:
Route::get('/', function () {
return Redirect::to('/ui/dist');
});
This works partially. It works from within the angularjs app like expected. But when I call anuglarjs routes they will fail to display because of course they don't exist in laravel.
Going with the angularjs tutorial for example:
If I call /ui/dist/heroes it will display a 404 instead of the angularjs app.
Note: Laravels public folder is symlinked to the webroot.
Edit:
I redirect to /ui/dist as I use angulars builder to build its files and these are reflected in the index.html also generated with the builder.
The index.html looks like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ui</title>
<base href="./">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="styles.5cf98968a6d57e778c48.bundle.css" rel="stylesheet"/><!-- the hash changes on every build -->
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.2379cc013d19d70a8003.bundle.js"></script> <!-- the hash changes on every build -->
<script type="text/javascript" src="polyfills.ad37cd45a71cb38eee76.bundle.js"></script> <!-- the hash changes on every build -->
<script type="text/javascript" src="main.99c0191843a51dda5d54.bundle.js"></script> <!-- the hash changes on every build -->
</body>
</html>
Here is how you can integrate laravel and angular routing.
In your routes.php, add this route:
Route::get('{slug}', function () {
return view('index');
}); // this will ensure all routes will serve index.php file
Route::get('/', function () {
return view('index');
});
In your index.php of laravel view, add all necessary angular js config and controller like normally you do with angular projects.
Note: for each $http request urls you have to define it in laravel route file.
Now when any url is hit, it will serve the index.php file and then angular routing will serve the correct file.
In order to make the routing systems of Angular (7+) and Laravel (5.8) coexist effectively is to redirect all the 404 errors that Laravel intercepts to the Angular router.
You have to edit the render function in app/Exceptions/Handler.php:
public function render($request, Exception $e)
{
// handle Angular routes
if ($e instanceof \Symfony\Component\HttpKernel\Exception\NotFoundHttpException) {
$url = parse_url($request->url());
$angular_url = $url['scheme'] . '://' . $url['host'] . '/#' . $url['path'];
return response()->redirectTo($angular_url);
}
return parent::render($request, $e);
}
Now, let's say that you want to show a login form using angular navigating to /auth/login. When you hit that route Laravel will kick in, and not recognising the route will then pass the control to the Exception Handler. What we're doing in the render() function is simply tell Laravel to rewrite the URL and redirect to /#/auth/login.
Then, you have to enable to enable HashLocationStrategy in your Angular application, like so:
RouterModule.forRoot(routes, {useHash: true})
So I am building an Ionic / AngularJS app using Wistia player API. I finial tried and everything work right on browser test mode. But when compile onto iOs, it just show white screen. Here is the detail:
View - HTML page:
<!-- Wistia Embed -->
<div id="{{ 'wistia_' + mediaHashId }}" class="wistia_embed" style="width:398px;height:224px;" ng-if="mediaHashId"></div>
Controller:
$timeout(function() {
var wistiaEmbed = Wistia.embed($scope.mediaHashId, {
videoFoam: true,
playerColor: "3B97D3"
});
wistiaEmbed.bind("end", function () {
alert ("Video is finished");
});
}, 100);
So it load perfectly onto Chrome.
But when I compile it onto xcode and run it on my phone. It just show a white screen (with no JS error!)
SECOND OPTION: iframe - since iframe load okay on iOs (http://wistia.com/doc/player-api#using_iframes_and_the_player_api).
The second option is attach wistiaApi onto an iframe. But the code does not work.
View - HTML page:
<div class="video-container">
<iframe id="wistia_player" ng-src="{{ mediaHashId | wistiaEmbedUrl }}" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" width="640" height="360"></iframe>
</div>
Controller:
$timeout(function() {
var wistiaEmbed = document.getElementById("wistia_player").wistiaApi;
console.log (wistiaEmbed);
wistiaEmbed.bind("end", function () {
alert ("Video is finished");
});
}, 100);
The wistiaEmbed console log an undefined.
And error log:
TypeError: Cannot read property 'bind' of undefined
at lesson-detail-ctrl.js:46
at ionic.bundle.js:24922
at completeOutstandingRequest (ionic.bundle.js:13604)
at ionic.bundle.js:13984
So clearly .wistiaApi does not work...
I do include this in my index.html:
I will love a AngularJS library like this https://github.com/brandly/angular-youtube-embed with Wistia Player...but no luck...
Wow, I've found the problem. This is actually a very common problem when building ionic apps on iOs and/or Android. When you include <script> tags in your index.html, always put the full http://.... instead of using just //.
In my case, I included the Wistia API via their official documentation like:
<script src="//fast.wistia.com/assets/external/E-v1.js"></script>
It works on browsers because browsers are smart. Devices are not as smart as browsers so by including the http like so:
<script src="https://fast.wistia.com/assets/external/E-v1.js"></script>
Solves it!
In this simple Codepen demo, I have a bar and a slider. Works fine, but if I add the Google Adsense code, then display is broken. How should I insert the Adsense code to display the Ad at the top of the web page.
What I mean by "display is broken": the bar overlays the start of the ion-content (hello1 hello2). I already put class="has-header" in the <ion-content>.
NB I use Ionic framework both for the mobile site, and (next step) for the hybrid app. I don't expect the ad to work in the native code. I just need to display the Adsense ad on the mobile web site.
Code of the ad is:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- hybride_320x50 -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:50px"
data-ad-client="ca-pub-4134311660880303"
data-ad-slot="1861097476"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Skeleton of the ionic page:
header / angularjs
Google ad
bar
ion-content
content
slider
content
I would recommend you to use AdMob. I've written this native plugin which supports ionic: https://github.com/appfeel/admob-google-cordova/wiki/Angular.js,-Ionic-apps. Moreover it will also let you show interstitials.
ionic plugin add cordova-admob
<script src="lib/angular-admob/angular-admob.js"></script>
<script>
var app = angular.module('myApp', ['admobModule']);
app.config(['admobSvcProvider', function (admobSvcProvider) {
// Optionally you can configure the options here:
admobSvcProvider.setOptions({
publisherId: "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",
interstitialAdId: "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII",
autoShowBanner: true,
autoShowInterstitial: true
});
}]);
app.run(['admobSvc', function (admobSvc) {
admobSvc.createBannerView();
admob.requestInterstitialAd();
// Handle events:
$rootScope.$on(admobSvc.events.onAdOpened, function onAdOpened(evt, e) {
console.log('adOpened: type of ad:' + e.adType);
});
}]);
</script>
one fast solution is add the following class to your style
.adsbygoogle {
position: absolute;
z-index: 10;
}