feat: added utm params to button

Author: Mim1991

src/boot.tsx

@@ -25,16 +25,20 @@ export default (element: HTMLDivElement, hub: Hub) => {
 
   let settings: any = {
     id: element.id,
-    height: parseInt(element.getAttribute("data-height") || "auto", 10)
+    height: parseInt(element.getAttribute("data-height") || "auto", 10),
   };
 
+  const utmSource = element.getAttribute("data-utm-source") || undefined;
+  const utmCampaign = element.getAttribute("data-utm-campaign") || undefined;
+
   if (element.getAttribute("data-encoded")) {
     const exercise = JSON.parse(atob(decodeURIComponent(element.textContent)));
     settings.hint = exercise.hint;
     settings.language = exercise.language;
     settings.lang_version = exercise.lang_version;
     settings.pre_exercise_code =
-      getPackages(exercise.packages, exercise.language) + exercise.pre_exercise_code;
+      getPackages(exercise.packages, exercise.language) +
+      exercise.pre_exercise_code;
     settings.sample_code = exercise.sample || exercise.sample_code;
     settings.sct = exercise.sct;
     settings.solution = exercise.solution;
@@ -72,13 +76,15 @@ export default (element: HTMLDivElement, hub: Hub) => {
       lang_version: element.getAttribute("data-lang-version"),
       packages: element.getAttribute("data-packages"),
       pre_exercise_code:
-        getPackages(element.getAttribute("data-packages"), element.getAttribute("data-lang")) +
-        getText("pre-exercise-code"),
+        getPackages(
+          element.getAttribute("data-packages"),
+          element.getAttribute("data-lang")
+        ) + getText("pre-exercise-code"),
       sample_code: getText("sample-code"),
       sct: getText("sct"),
       solution: getText("solution"),
       showRunButton: showRunButton,
-      noLazyLoad: noLazyLoad
+      noLazyLoad: noLazyLoad,
     });
   }
 
@@ -102,7 +108,12 @@ export default (element: HTMLDivElement, hub: Hub) => {
     return (
       <AppContainer>
         <Provider store={store}>
-          <App height={settings.height} language={settings.language} />
+          <App
+            height={settings.height}
+            language={settings.language}
+            utmSource={utmSource}
+            utmCampaign={utmCampaign}
+          />
         </Provider>
       </AppContainer>
     );

src/components/App/index.tsx

@@ -83,6 +83,8 @@ export interface IAppProps extends React.Props<App> {
   language?: string;
   height?: number;
   nPlots?: number;
+  utmSource?: string;
+  utmCampaign?: string;
 }
 
 interface IAppState {
@@ -317,6 +319,8 @@ export class App extends React.Component<IAppProps, IAppState> {
           <Footer
             onShowSolution={this.showSolutionTab}
             showSolutionButton={this.state.solutionButtonVisible}
+            utmSource={this.props.utmSource}
+            utmCampaign={this.props.utmCampaign}
           />
         </div>
       </Provider>

src/components/Footer.tsx

@@ -22,6 +22,8 @@ export interface IFooterProps extends React.Props<Footer> {
   showRunButton?: boolean;
   sct?: string;
   language?: string;
+  utmSource?: string;
+  utmCampaign?: string;
 }
 
 interface IFooterState {
@@ -37,6 +39,8 @@ export class Footer extends React.PureComponent<IFooterProps, IFooterState> {
     isSessionBusy: false,
     showSolutionButton: false,
     showRunButton: false,
+    utmSource: "datacamp_light",
+    utmCampaign: "powered_by_datacamp",
   };
 
   public displayName: string = "Footer";
@@ -72,6 +76,11 @@ export class Footer extends React.PureComponent<IFooterProps, IFooterState> {
   }
 
   public render() {
+    const { utmSource, utmCampaign } = this.props;
+    const baseUrl = "https://www.datacamp.com/";
+    const queryParams = `utm_source=${utmSource}&utm_campaign=${utmCampaign}`;
+    const datacampUrl = `${baseUrl}?${queryParams}`;
+
     return (
       <div className={styles.footer}>
         {this.props.hint ? (
@@ -118,7 +127,7 @@ export class Footer extends React.PureComponent<IFooterProps, IFooterState> {
           className={styles.restart}
         />
         <a
-          href="https://www.datacamp.com/?utm_source=datacamp_light&utm_campaign=powered_by_datacamp"
+          href={datacampUrl}
           className={styles.logo}
           title="Powered by DataCamp"
           target="_blank"