Boilerplate: add Disqus and Google Analytics

[MoOx]

setup should ask user for their id, and if present, boilerplate should contains required components.

[thangngoc89]

The components part is easy. But how to add/remove them according to user's answer ?

Also how to add them when user run phenomic config ? (see #415)

[MoOx]

Meanwhile for GA:

• phenomic/docs/src/AppContainer.js

  Line 15 in b641f0f

  <GoogleAnalyticsTracker params={ props.params }>

• https://github.com/MoOx/phenomic/blob/b641f0f6eea2979604cb5e785b581bfeb54bfcf5/docs/src/components/GoogleAnalyticsTracker/index.js

[thangngoc89]

There is a tutorial https://theduke.at/blog/develop/how-to-use-google-analytics-with-phenomic/

[DavidWells]

This is tricky. I think we should provide an easy way for folks to do this, but GA can be implemented via this component OR via something like segment.io

Perhaps giving users a way to inject custom html/js into the footer of the page would solve this.

Probably one of the hardest things to do with a dynamic site like this is adding custom scripts to given pages b/c you have to learn and use <Helmet>

Netlify has a pretty nifty feature that lets you inject any custom stuff you want into your site after it's build process is done:

Just thinking it might be cool to start potentially thinking about this for phenomic as perhaps some customBuildHooks or something.

ORRRR even better, giving the user access to the index.html template and they could add/configure these global scripts/third party deps in there.

Sorry for rant =)

[MoOx]

I really don't want to allow an index.html template: this does not make sense. When you are on the client side, the code won't be executed on each pages, just once!

Helmet is pretty easy to "learn" and I think we can add example in the docs.

[cedricdelpoux]

@thangngoc89 I saw you use autotrack for your phenomic project. Can I check somewhere how you did ? Thank you

[MoOx]

See #384 ;)

[cedricdelpoux]

Thank you

[kchens]

@MoOx and @xuopled should the autotrack set-up in @MoOx/react-toulouse@c42045d still the best way to set-up GA? Not sure if it matters but autotrack got bumped up to v2.

I prefer to have auto-tracking, but I ended up having to set-up react-ga for the time being.

[cedricdelpoux]

I finally used react-ga and it works well

[MoOx]

I just checked my current setup for react-toulouse website and it's working like a charm (checked using real-time tracking). I didn't update tho.
Just be sure to check with a browser without adblocks and in a private tab ;)

[DavidWells]

Interesting. @MoOx do you no longer need react-ga with the auto track setup? MoOx/react-toulouse@c42045d

[kchens]

I followed the steps in MoOx/react-toulouse@c42045d several times.

I get this error though
Uncaught SyntaxError: Unexpected token import at Object.<anonymous> (phenomic.browser.07e4847….js:3722) at __webpack_require__ (phenomic.browser.07e4847….js:556) at fn (phenomic.browser.07e4847….js:87) at eval (eval at <anonymous> (phenomic.browser.07e4847….js:1788), <anonymous>:58:3) at Object.<anonymous> (phenomic.browser.07e4847….js:1788) at __webpack_require__ (phenomic.browser.07e4847….js:556) at fn (phenomic.browser.07e4847….js:87) at eval (eval at <anonymous> (phenomic.browser.07e4847….js:990), <anonymous>:19:21) at Object.<anonymous> (phenomic.browser.07e4847….js:990) at __webpack_require__ (phenomic.browser.07e4847….js:556)

[MoOx]

@kchens this looks like a webpack configuration issue (saying this because of Unexpected token import).
@DavidWells no I don't, but I have still very few visit on this site, so be careful and try on a small period and double check :)

[yatsyk]

@kchens The reason of this error is that imported files (for example node_modules/autotrack/lib/plugins/url-change-tracker.js) are not processed by babel. According to webpack config only scripts and src folders are processed. Only node_modules/autotrack/autotrack.js is ready for importing.

[codepreneur]

@yatsyk do you have any solutions for this? Cause I am experiencing the exact same problem.

[yatsyk]

@codepreneur you can use autotrack by importing autotrack.js with all plugins enabled or use features you need by importing particular files from lib/plugins folder. I think that importing 'autotrack' with all plugins should work without additional settings.

[MoOx]

@kchens @yatsyk what version of webpack are you using? Can you share your webpack config?

[jedau]

@MoOx I'm encountering the same error as @codepreneur and @kchens I'm on webpack v1.11.0 and I'm using Phenomic's default webpack config. I'm running on phenomic v0.20.3

[Quinn-H]

@jedau @codepreneur @kchens I'm also on webpack v1.11.0. I have same error when set-up GA. Did you guys still have this error ? Any workaround available ? Thank you @MoOx

[MoOx]

Might add a thing in an example but not a priority for v1.