Merge pull request #217 from datacamp/add-utm-parameters

[WL-3239] feat: add utmSource and utmCampaign parameters
datacamp · Jan 12, 2024 · ec4abe8 · ec4abe8
2 parents 8ca9787 + 6621d13
commit ec4abe8
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 2 deletions.
diff --git a/src/boot.tsx b/src/boot.tsx
@@ -27,6 +27,9 @@ export default (element: HTMLDivElement, hub: Hub) => {
     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;
@@ -95,7 +98,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>
     );

diff --git a/src/components/App/index.tsx b/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>

diff --git a/src/components/Footer.tsx b/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,10 @@ 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 +126,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"