Show pop-up form when visitor comes from utm

[BrilliantBrilliant is verified member.]

To show a pop-up form when a visitor comes to your site with specific UTM parameters (e.g., utm_source, utm_medium, etc.), you can implement this in React using the following steps:


---

Steps to Implement

1. Detect UTM Parameters

Use the browser's window.location.search to extract UTM parameters from the URL.

2. Check for Specific UTM

Once you extract the UTM parameters, check if they match the desired values (e.g., utm_source=google).

3. Show the Pop-Up Form

If the desired UTM is present, display a pop-up form. You can use a modal component (like from Material-UI, React Bootstrap, or a custom one).


---

Code Example

Here’s an example implementation in React:

1. Create a Helper to Parse UTM Parameters

// utils/getUTMParams.js

export function getUTMParams(search) {

  const params = new URLSearchParams(search);

  return {

    utm_source: params.get('utm_source'),

    utm_medium: params.get('utm_medium'),

    utm_campaign: params.get('utm_campaign'),

  };

}





---

2. Display Pop-Up Form if UTM Parameters Are Present

import React, { useEffect, useState } from "react";
import { getUTMParams } from "./utils/getUTMParams";

const PopupForm = ({ isVisible, onClose }) => {
  if (!isVisible) return null;

  return (
    <div style={styles.overlay}>
      <div style={styles.popup}>
        <button style={styles.closeButton} onClick={onClose}>
          X
        </button>
        <h2>Sign Up</h2>
        <form>
          <input type="text" placeholder="Your Name" style={styles.input} />
          <input type="email" placeholder="Your Email" style={styles.input} />
          <button type="submit" style={styles.submitButton}>
            Submit
          </button>
        </form>
      </div>
    </div>
  );
};

const App = () => {
  const [showPopup, setShowPopup] = useState(false);

  useEffect(() => {
    const utmParams = getUTMParams(window.location.search);
    if (utmParams.utm_source) {
      // Show popup only if `utm_source` is present
      setShowPopup(true);
    }
  }, []);

  return (
    <div>
      <h1>Welcome to the Website</h1>
      <PopupForm isVisible={showPopup} onClose={() => setShowPopup(false)} />
    </div>
  );
};

// Styles (inline for simplicity)
const styles = {
  overlay: {
    position: "fixed",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    backgroundColor: "rgba(0, 0, 0, 0.5)",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  },
  popup: {
    background: "#fff",
    padding: "20px",
    borderRadius: "10px",
    width: "300px",
    textAlign: "center",
  },
  closeButton: {
    position: "absolute",
    top: "10px",
    right: "10px",
    background: "none",
    border: "none",
    fontSize: "16px",
    cursor: "pointer",
  },
  input: {
    display: "block",
    width: "100%",
    padding: "10px",
    margin: "10px 0",
    border: "1px solid #ddd",
    borderRadius: "5px",
  },
  submitButton: {
    padding: "10px 20px",
    background: "#007BFF",
    color: "#fff",
    border: "none",
    borderRadius: "5px",
    cursor: "pointer",
  },
};

export default App;

How It Works

1. URL with UTM: When the user visits your site with a URL like:

https://example.com?utm_source=google&utm_medium=cpc&utm_campaign=test-campaign

The getUTMParams function will extract these values.


2. Check and Show:

useEffect checks for the presence of utm_source.

If a valid UTM parameter is found, the state (showPopup) is set to true, triggering the pop-up.



3. Close Functionality:

Clicking the close button sets showPopup to false, hiding the form.





---

Using a Library for the Modal

If you'd rather use a library for styling and accessibility, you can replace the custom PopupForm with a library like:

React Modal

Material-UI Dialog

React Bootstrap Modal


Example with react-modal:

npm install react-modal

import Modal from "react-modal";



const PopupForm = ({ isVisible, onClose }) => (

  <Modal isOpen={isVisible} onRequestClose={onClose} ariaHideApp={false}>

    <h2>Sign Up</h2>

    <form>

      <input type="text" placeholder="Your Name" />

      <input type="email" placeholder="Your Email" />

      <button type="submit">Submit</button>

    </form>

    <button onClick={onClose}>Close</button>

  </Modal>

);





---

Additional Tips

1. Save UTM Parameters:

You might want to store UTM parameters in localStorage or state for later use (e.g., analytics or form submission).

localStorage.setItem("utm_source", utmParams.utm_source);



2. Prevent Repeated Pop-Ups:

Use localStorage to check if the pop-up has already been shown:

const alreadyVisited = localStorage.getItem("popupShown");

if (!alreadyVisited && utmParams.utm_source) {

  setShowPopup(true);

  localStorage.setItem("popupShown", "true");

}

3. Customization:

Tailor the pop-up to display different forms or messages depe
nding on the UTM values.





---

This implementation ensures the pop-up only appears for visitors arriving with specific UTM parameters, improving targeting and user experience.