Passing Data from Landing Page to Sub Pages in AJO | Community
Skip to main content
D
DanSpigs1
Level 2
December 2, 2024
Solved

Passing Data from Landing Page to Sub Pages in AJO

  • December 2, 2024
  • 1 reply
  • 1000 views

I am trying to set up a Landing Page to manage a set of subscriptions, and would like to have a subpage on confirm that shows a message "Thank you, you have opted out of (Subscription X)".  How do I pass a value for each of the check boxes from the Landing Page to a Sub Page?

 

Looking at the documentation here, Create a landing page | Adobe Journey Optimizer it references an Additional Data section that sounds like it would do this, but I don't see that section available when I create a landing page.  What is the best way to go about passing this data through?

 

Thanks in advance.

Best answer by Manoj_Kumar

Hello @danspigs1 

 

In your Primary Page, Add a HTML Content below your form and add this code:

<script> // Initialize an empty array to store selected labels let selectedLabels = []; // Function to update local storage function updateLocalStorage() { const labelString = selectedLabels.join(', '); localStorage.setItem('selectedLabels', labelString); } // Function to handle checkbox changes function handleCheckboxChange(event) { const checkbox = event.target; const label = checkbox.closest('.spectrum-Checkbox').querySelector('.spectrum-Checkbox-label').textContent; if (checkbox.checked) { // Add label if checkbox is checked selectedLabels.push(label); } else { // Remove label if checkbox is unchecked selectedLabels = selectedLabels.filter(item => item !== label); } // Update local storage updateLocalStorage(); } // Attach event listeners to all checkboxes document.querySelectorAll('.spectrum-Checkbox-input').forEach(checkbox => { checkbox.addEventListener('change', handleCheckboxChange); }); // Load initial state from local storage window.addEventListener('load', () => { const storedLabels = localStorage.getItem('selectedLabels'); if (storedLabels) { selectedLabels = storedLabels.split(', '); } }); </script>

 

now in the sub page, 

Add the HTML content and add this code.

Thank you, you have opted out of <div id="mySubscriptionLists"></div> <script> window.addEventListener('load', () => { const storedLabels = localStorage.getItem('selectedLabels'); if (storedLabels) { selectedLabels = storedLabels.split(', '); document.getElementById("mySubscriptionLists").innerText=storedLabels; } }); </script>

1 reply

Manoj_Kumar
Community Advisor
Manoj_KumarCommunity AdvisorAccepted solution
Community Advisor
December 3, 2024

Hello @danspigs1 

 

In your Primary Page, Add a HTML Content below your form and add this code:

<script> // Initialize an empty array to store selected labels let selectedLabels = []; // Function to update local storage function updateLocalStorage() { const labelString = selectedLabels.join(', '); localStorage.setItem('selectedLabels', labelString); } // Function to handle checkbox changes function handleCheckboxChange(event) { const checkbox = event.target; const label = checkbox.closest('.spectrum-Checkbox').querySelector('.spectrum-Checkbox-label').textContent; if (checkbox.checked) { // Add label if checkbox is checked selectedLabels.push(label); } else { // Remove label if checkbox is unchecked selectedLabels = selectedLabels.filter(item => item !== label); } // Update local storage updateLocalStorage(); } // Attach event listeners to all checkboxes document.querySelectorAll('.spectrum-Checkbox-input').forEach(checkbox => { checkbox.addEventListener('change', handleCheckboxChange); }); // Load initial state from local storage window.addEventListener('load', () => { const storedLabels = localStorage.getItem('selectedLabels'); if (storedLabels) { selectedLabels = storedLabels.split(', '); } }); </script>

 

now in the sub page, 

Add the HTML content and add this code.

Thank you, you have opted out of <div id="mySubscriptionLists"></div> <script> window.addEventListener('load', () => { const storedLabels = localStorage.getItem('selectedLabels'); if (storedLabels) { selectedLabels = storedLabels.split(', '); document.getElementById("mySubscriptionLists").innerText=storedLabels; } }); </script>
Manoj     Find me on LinkedIn
    D
    DanSpigs1Author
    Level 2
    December 3, 2024

    Thank you very much for this, one additional question.  In testing this looks like it logs any change to a check box, so if someone opted into a new option, rather than opting out, it still logs it.  Is there a way to differentiate between a check and an uncheck and log those separately?

     

    Thanks!

    Manoj_Kumar
    Community Advisor
    Manoj_KumarCommunity Advisor
    Community Advisor
    December 4, 2024

    Hello @danspigs1  You can modify this function to log them seperately:

     function handleCheckboxChange(event) {
            const checkbox = event.target;
            const label = checkbox.closest('.spectrum-Checkbox').querySelector('.spectrum-Checkbox-label').textContent;

            if (checkbox.checked) {
                // Add label if checkbox is checked
                selectedLabels.push(label);
            } else {
                // Remove label if checkbox is unchecked
                selectedLabels = selectedLabels.filter(item => item !== label);
            }

            // Update local storage
            updateLocalStorage();
        }
    Manoj     Find me on LinkedIn
      Terms & ConditionsAccessibility statement

      Loading footer...