Adds Multiple page updates

Multipage accounts added for testing transitions
appcues · Nov 1, 2019 · 546f075 · 546f075
1 parent 9c432d8
commit 546f075
Show file tree

Hide file tree

Showing 11 changed files with 188 additions and 51 deletions.
diff --git a/package.json b/package.json
@@ -3,9 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "amplitude-js": "^5.3.1",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
-    "react-router-dom": "^4.3.1",
+    "react-router": "^5.0.1",
+    "react-router-dom": "^5.0.1",
     "react-scripts": "2.1.1",
     "yarn": "^1.13.0"
   },

diff --git a/public/index.html b/public/index.html
@@ -1,16 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script src="//fast.appcues.com/49805.js"></script>
-    <script>
-    Appcues.identify("userbob", {
-        name: 'bob'});
-  </script>
-  <script>
-  Appcues.on("flow_started", function(event) {
-  console.log("Appcues started a flow with ID " + event.flowId);
-});
-</script>
+
 
     <link rel="stylesheet" type="text/css" href="//fast.appcues.com/widget.css">
 
@@ -39,7 +30,76 @@
     window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=t.forceSSL||"https:"===document.location.protocol,a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=(r?"https:":"http:")+"//cdn.heapanalytics.com/js/heap-"+e+".js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(a,n);for(var o=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],c=0;c<p.length;c++)heap[p[c]]=o(p[c])};
       heap.load("1994516134");
 </script>
+<!-- start Mixpanel --><script type="text/javascript">(function(c,a){if(!a.__SV){var b=window;try{var d,m,j,k=b.location,f=k.hash;d=function(a,b){return(m=a.match(RegExp(b+"=([^&]*)")))?m[1]:null};f&&d(f,"state")&&(j=JSON.parse(decodeURIComponent(d(f,"state"))),"mpeditor"===j.action&&(b.sessionStorage.setItem("_mpcehash",f),history.replaceState(j.desiredHash||"",c.title,k.pathname+k.search)))}catch(n){}var l,h;window.mixpanel=a;a._i=[];a.init=function(b,d,g){function c(b,i){var a=i.split(".");2==a.length&&(b=b[a[0]],i=a[1]);b[i]=function(){b.push([i].concat(Array.prototype.slice.call(arguments,
+0)))}}var e=a;"undefined"!==typeof g?e=a[g]=[]:g="mixpanel";e.people=e.people||[];e.toString=function(b){var a="mixpanel";"mixpanel"!==g&&(a+="."+g);b||(a+=" (stub)");return a};e.people.toString=function(){return e.toString(1)+".people (stub)"};l="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");
+for(h=0;h<l.length;h++)c(e,l[h]);var f="set set_once union unset remove delete".split(" ");e.get_group=function(){function a(c){b[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));e.push([d,call2])}}for(var b={},d=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<f.length;c++)a(f[c]);return b};a._i.push([b,d,g])};a.__SV=1.2;b=c.createElement("script");b.type="text/javascript";b.async=!0;b.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?
+MIXPANEL_CUSTOM_LIB_URL:"file:"===c.location.protocol&&"//cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js";d=c.getElementsByTagName("script")[0];d.parentNode.insertBefore(b,d)}})(document,window.mixpanel||[]);
+mixpanel.init("4f2e7400352c8660e08b98b612f1b6a8");</script><!-- end Mixpanel -->
+<script>
+mixpanel.identify("12149");
+mixpanel.people.set({
+    "$email": "[email protected]",    // only special properties need the $
+
+    "$created": "2011-03-16 16:53:54",
+    "$last_login": new Date(),         // properties can be dates...
+
+    "credits": 150,                    // ...or numbers
+
+    "gender": "Male"                    // feel free to define your own properties
+});
+</script>
 
+
+<script type="text/javascript">
+  (function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script")
+  ;r.type="text/javascript"
+  ;r.integrity="sha384-d/yhnowERvm+7eCU79T/bYjOiMmq4F11ElWYLmt0ktvYEVgqLDazh4+gW9CKMpYW"
+  ;r.crossOrigin="anonymous";r.async=true
+  ;r.src="https://cdn.amplitude.com/libs/amplitude-5.2.2-min.gz.js"
+  ;r.onload=function(){if(!e.amplitude.runQueuedFunctions){
+  console.log("[Amplitude] Error: could not load SDK")}}
+  ;var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)
+  ;function s(e,t){e.prototype[t]=function(){
+  this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}}
+  var o=function(){this._q=[];return this}
+  ;var a=["add","append","clearAll","prepend","set","setOnce","unset"]
+  ;for(var u=0;u<a.length;u++){s(o,a[u])}n.Identify=o;var c=function(){this._q=[]
+  ;return this}
+  ;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"]
+  ;for(var p=0;p<l.length;p++){s(c,l[p])}n.Revenue=c
+  ;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","groupIdentify","onInit","logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId"]
+  ;function v(e){function t(t){e[t]=function(){
+  e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}}
+  for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){
+  e=(!e||e.length===0?"$default_instance":e).toLowerCase()
+  ;if(!n._iq.hasOwnProperty(e)){n._iq[e]={_q:[]};v(n._iq[e])}return n._iq[e]}
+  ;e.amplitude=n})(window,document);
+
+  amplitude.getInstance().init("cbf808963acacfd641ac45755739f4d0");
+</script>
+<script>
+  !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";
+  analytics.load("n8FLfPwiuWglYk5ASMXhHHW9BQfEa540");
+  analytics.page();
+  }}();
+</script>
+<script src="//fast.appcues.com/49805.js"></script>
+<script>
+Appcues.identify("12345", {
+    name: 'Dan',
+    Funkiness: 2,
+    Boogie: 0,
+    pageDestination: "about",
+    groupId: "1360287003083988472",
+    calendly: "calendly.com/acbl/30min"
+  });
+</script>
+
+<script>
+Appcues.on("flow_started", function(event) {
+console.log("Appcues started a flow with ID " + event.flowId);
+});
+</script>
   </head>
   <body>
     <noscript>
@@ -48,6 +108,8 @@
     <script src="//fast.appcues.com/widget-bundle.js" type="text/javascript"></script>
     <div id="root"></div>
     <div class="hello">Hello</div>
+    <button onclick={mixpanel.track("Record play")}>This is a button </button>
+    <button onclick="mixpanel.identify("13487")">Click to identify</button>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/Account.js b/src/Account.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+const Account = () => {
+  return (
+    <div>
+      <h1>Account</h1>
+      <p>This is account stuff!</p>
+    </div>
+  );
+};
+
+export default Account;
diff --git a/src/AccountSettings.js b/src/AccountSettings.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+const AccountSettings = () => {
+  return (
+    <div>
+      <h1>Account Settings</h1>
+      <p>This is account settings!</p>
+    </div>
+  );
+};
+
+export default AccountSettings;
diff --git a/src/Acct123.js b/src/Acct123.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+const Acct123 = () => {
+  return (
+    <div>
+      <h1>Account 123</h1>
+      <p>Welcome to account 123</p>
+    </div>
+  );
+};
+
+export default Acct123;
diff --git a/src/App.css b/src/App.css
@@ -63,23 +63,3 @@ appcues-layer .apc-spotlight {
  background: rgba(255,0,0,0.5) !important;
  border-image: radial-gradient(transparent 2%, rgba(255,0,0,0.5) 28%) 49% 49% 49% 49% !important;
 } */
-
-/* Hide the original Appcues beacon */
-appcues-layer svg.beacon {
-  display: none;
-}
-
-/* Replace it with styles on the .beacon-container */
-appcues-layer .beacon-container {
-  background: red;
-  border-radius: 24px;
-  display: block;
-  height: 24px;
-  width: 24px;
-  cursor: pointer;
-}
-
-/* Define a hover style */
-.beacon-container:hover {
-  background: dodgerblue;
-}
diff --git a/src/App.js b/src/App.js
@@ -1,22 +1,55 @@
 import React from "react";
-import { BrowserRouter, Route, Switch } from "react-router-dom";
+import { Route, Switch } from "react-router-dom";
+import { withRouter } from "react-router";
 
 import Home from "./Home";
 import About from "./About";
 import Contact from "./Contact";
 import Navigation from "./Navigation";
+import Acct123 from "./Acct123";
+import Account from "./Account";
+import AccountSettings from "./AccountSettings";
 
-const App = () => (
-  <BrowserRouter>
-    <div>
-      <Navigation />
-      <Switch>
-        <Route exact path="/" component={Home} />
-        <Route path="/about" component={About} />
-        <Route path="/contact" component={Contact} />
-      </Switch>
-    </div>
-  </BrowserRouter>
-);
+// const App = () => (
+//   <BrowserRouter>
+//     <div>
+//       <Navigation />
+//       <Switch>
+//         <Route exact path="/" component={Home} />
+//         <Route path="/about" component={About} />
+//         <Route path="/contact" component={Contact} />
+//       </Switch>
+//     </div>
+//   </BrowserRouter>
+// );
 
-export default App;
+class App extends React.Component {
+  componentDidUpdate(prevProps) {
+
+
+  console.log(prevProps+"test");
+    const { location: { pathname } } = this.props;
+    const previousLocation = prevProps.location.pathname;
+
+    if (pathname !== previousLocation) {
+      window.Appcues.page();
+    }
+  }
+  render() {
+    return (
+      <div>
+          <Navigation />
+          <Switch>
+            <Route exact path="/" component={Home} />
+            <Route path="/about" component={About} />
+            <Route path="/contact" component={Contact} />
+            <Route exact path="/account" component={Account} />
+            <Route exact path="/account/acct123" component={Acct123} />
+            <Route exact path="/account/acct123/accountsettings" component={AccountSettings} />
+           </Switch>
+        </div>
+    )
+  }
+}
+
+export default withRouter(App);
diff --git a/src/Home.js b/src/Home.js
@@ -4,15 +4,17 @@ function pearsonEvent() {
   window.Appcues.track("Grades, one student AND one published assignment");
 }
 
-function getName() {
-  prompt("What is your name?", "Your Name");
+function ampEvent() {
+  window.amplitude.getInstance().logEvent('Amp_Event');
 }
 
+
 const Home = () => {
   return (
-    <div>
-      <h1>Welcome to Awesome Company, Inc.</h1>
-      <button onClick={pearsonEvent()}>This is a button </button>
+    <div >
+      <h1 data-info="bob">Welcome to Awesome Company, Inc.</h1>
+      <button onclick={pearsonEvent() }>This is a button </button>
+      <button onclick={ampEvent()}> take me there</button>
     </div>
   );
 };

diff --git a/src/Lifecycle.jsx b/src/Lifecycle.jsx
@@ -0,0 +1,10 @@
+import { Component } from 'react';
+
+
+class App extends Component {
+  componentDidMount() {
+    window.Appcues.page()
+  }
+}
+
+export default App;
diff --git a/src/Navigation.js b/src/Navigation.js
@@ -9,6 +9,12 @@ const Navigation = () => (
     <Link to="/about">About</Link>
     {" - "}
     <Link to="/contact">Contact Us</Link>
+    {" - "}
+    <Link to="/account">Account</Link>
+    {" - "}
+    <Link to="/account/acct123">Account 123</Link>
+    {" - "}
+    <Link to="/account/acct123/accountsettings">Account 123 Settings</Link>
   </div>
 );
 

diff --git a/src/index.js b/src/index.js
@@ -3,8 +3,14 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import { BrowserRouter as Router } from "react-router-dom";
+
+ReactDOM.render(
+  <Router>
+  <App />
+  </Router>,
+  document.getElementById('root'));
 
-ReactDOM.render(<App />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.