如何跟踪 GTM 范围内的测验答案？

Question

我有一个简单的 JavaScript 测验。 html 非常简单：

 <div class="quiz-container">
      <div id="question-container">
        <h3 id="question">Question</h3>
        <div id="answer-buttons"></div>
      </div>
      <button id="next-btn" class="btn hide">Next</button>
      <div id="result" class="hide"></div>
      <button id="restart-btn" class="btn hide">restart</button>
    </div>

单击“下一步”按钮时，不会重新加载页面，只是通过 JavaScript 替换内容；

所以我们通过不同的屏幕，不同的答案被注入到div#asnwer-button中。单选按钮的 ID 会递增，并且无论屏幕如何，都始终相同。所以对于每个问题，我都有#answer1、#answer2 等..

所以我总是为每个屏幕（问题）使用相同的 ID，为每个单选按钮使用相同的 id。

我被问到是否可以跟踪用户旅程，即到底是什么问题，勾选的答案是什么......我的印象是，这首先是不可能的，因为没有差异化元素.

也许我错了。有人知道这是否可能吗？

我遵循了本教程。但正如他所说，当你从一个屏幕切换到另一个屏幕时，没有数据持久性，而且他并不是在谈论你是否可以跟踪单选按钮作为 JavaScript 测验的一部分。

Answer 1

是的，即使不区分每个问题或单选按钮的 ID，确实可以跟踪用户的旅程和他们选择的答案。

使用 JavaScript 管理测验状态： 使用 JavaScript 动态生成测验问题及其相应的答案选项，而不是仅仅依赖具有固定 ID 的静态 HTML 元素。您可以将问题和答案存储在数组或对象中。

存储用户响应：当用户完成测验并选择答案时，将他们的响应存储在数组或对象中。您可以使用问题索引或其他一些标识符来跟踪每个响应对应的问题。并根据用户的进度和响应动态更新 UI。

利用浏览器存储：您可以使用本地存储等浏览器存储机制来存储用户进度，它将在页面刷新或不同页面/问题之间保留数据。