使用 Google 跟踪代码管理器 (JavaScript) 防止弹出窗口在同一会话中重新出现

Question

在 Google 跟踪代码管理器中，我创建了一个脚本，其中包含在某些条件下显示的弹出窗口。具体来说，我有两个启动脚本的关联触发器：

• 30秒延迟后（我使用自定义代码，在30秒后将事件

  timer_elapsed

  推送到数据层）

• 滚动页面 50% 后（我使用 GTM 的滚动深度触发器）

这两个触发器是与此脚本分开配置的。所以脚本可以通过延迟或滚动来触发。

在GTM的预览模式下测试时，当我打开页面时，弹出窗口确实在30秒后显示。然后我关闭它，它就消失了。然而，当我向下滚动到 50% 时，问题就出现了；弹出窗口重新出现并且不再关闭（并且它重新出现时没有我的

{{DL - locale}}

数据层变量定义的良好翻译。

为了避免打扰用户，我不希望弹出窗口在同一会话中显示两次。因此，如果它显示一次（无论触发器如何），它在该会话期间根本不应该重新出现。

如何修改我的脚本以确保弹出窗口一旦关闭，无论再次满足触发条件，都不会重新出现在同一用户会话中？

// Function to check if the popup session is active
function isPopupSessionActive() {
    return sessionStorage.getItem('popupSession') === 'active';
}

// Function to set the popup session as active
function setPopupSessionActive() {
    sessionStorage.setItem('popupSession', 'active');
}

// Function to close the popup
function closePopup() {
    document.getElementById('popup').style.display = 'none';
    console.log("Popup closed");
}

// Function to translate the popup content
function translatePopup(locale) {
    var translations = {
        'en': {
            'title': "End of year offer",
            'text': "Get <strong>500€ off</strong> on online bootcamps starting in 2023",
            'button': "Discover Online Bootcamps"
        },
        'fr': {
            'title': "End of year offer",
            'text': "Get a <strong>500€ discount</strong> on online bootcamps starting in 2023",
            'button': "Discover Online Bootcamps"
        },
        // other translations...
    };

    var localeTranslations = translations[locale] || translations['en'];
    document.querySelector('#popup .split-right h2').innerHTML = localeTranslations.title;
    document.querySelector('#popup .split-right p').innerHTML = localeTranslations.text;
    document.querySelector('#popup .split-right button').textContent = localeTranslations.button;
}

// Function to initialize the popup
function initPopup() {
    if (!isPopupSessionActive()) {
        var userLocale = "{{DL - locale}}"; // Replace with your method of obtaining the locale
        translatePopup(userLocale);

        var popupElement = document.getElementById('popup');
        if (popupElement.style.display === 'block') {
            console.log("The popup is already visible.");
            return;
        }

        popupElement.style.display = 'block';
        setPopupSessionActive();
        console.log("Popup displayed");

        var closeButton = document.querySelector(".close-btn");
        if (closeButton.getAttribute("data-listener") !== "true") {
            closeButton.addEventListener("click", closePopup);
            closeButton.setAttribute("data-listener", "true");
        }
    } else {
        console.log("The popup has already been shown or closed. Cancelling new initialization.");
    }
}

// Initialize the popup when the script loads
initPopup();

HTML：

<div id="popup" class="popup">
  <div class="popup-content">
    <span class="close-btn" onclick="closePopup()">&times;</span>
      <div class="split-left">
        <img src="#">
      </div>
      <div class="split-right">
        <h2>End of year offer</h2>
        <p>Get <strong>500€ off</strong> on online bootcamps starting in 2023</p>
        <a href="#"><button class="cta-popup">Discover Online Bootcamps</button></a>
      </div>
    </div>
  </div>

CSS：

.cta-popup{
    border: 0;
    color: white;
    background-color: #670BFF;
    text-decoration: none;
    padding: 0.88rem 1.4rem;
    border-radius: 0.5rem;
    font-weight: 700;
}
.cta-popup:hover{
    background-color: #5809d9;
}
.split-popup{
    grid: 1fr;
    display: flex;
    flex-direction: row;
}
.split-left{
    grid: 2fr;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.split-left > img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.split-right{
    display: grid;
    align-content: center;
    width: 100%;
    height: 100%;
    padding: 2rem;
    grid-gap: 1rem;
}
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    z-index: 99999;
}
.popup-content {
    position: absolute;
    display: grid;
    grid-template-rows: 1fr 0.5fr;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    width: 500px;
    height: 500px;
    border-radius: 1rem;
    overflow: hidden;
}
.close-btn {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 24px;
    cursor: pointer;
}

感谢您的帮助！

Answer 1

您已经在使用 sessionStorage 来表示它处于活动状态，但我认为如果您设置一个键值对来检查每个函数是否已被看到，您就会得到您正在寻找的结果。

如果您已触发模式，请将存储值设置为 true。这样，当对方触发时，您可以评估键值来决定是否显示它。

//inside your function if it does show the modal
sessionStorage.setItem('seen-modal', true);

//check to see if it's been seen yet before running code inside your function
let seenModal = sessionStorage.getItem('seen-modal');
if(!seenModal) {
  //your code inside the function that runs ONLY if you have not seen the modal yet
}