单击按钮后如何插入动态跟踪像素？答案

【问题标题】：How to insert dynamic tracking pixel after clicking a button?单击按钮后如何插入动态跟踪像素？
【发布时间】：2018-03-26 09:59:29
【问题描述】：

我指的是这个问题，它已经解决了，但只是我正在寻找的解决方案的一部分： How to insert Google Analytics after clicking a button?

我想在单击按钮后使用数据库中的动态跟踪代码。用例是一个可选插件（用于 Wordpress）。实际的跟踪代码来自数据库。由PHP查询，用户确认后才执行。

这是我的代码，到目前为止：

<script type="text/javascript">

    (function( $ ) {

        $("#button").click(function(){

            var pixel = <?php echo $pixel; ?>;

            $('head').append('<script>' + pixel + '</script>');

        });

    })( jQuery );

</script>

【问题讨论】：

标签： javascript analytics pixel tracking matomo

【解决方案1】：

在写下这个问题并苦苦挣扎时，我为自己找到了解决方案：

首先出错的是链接问题中提到的脚本标签。如果我使用内联 JavaScript，它将被解析并且浏览器会抛出错误。但我需要内联 JavaScript，因为我需要使用 PHP 查询跟踪像素。所以我必须像这样创建一个脚本元素：

var script = document.createElement("script");

接下来是特殊字符的使用，例如换行符、回车符和引号。因此，可能不仅仅回显跟踪像素，它也会导致解析错误，因为跟踪像素肯定包含换行符和引号。所以在 PHP 中我需要替换它们。最简单的方法是：

var pixel = '<?php echo (str_replace("\n", "", str_replace("\r", "", str_replace("'", "\"", $pixel)))); ?>';

因此，最终的工作代码将是：

<script type="text/javascript">

    (function( $ ) {

        $("#button").click(function(){

            var pixel = '<?php echo (str_replace("\n", "", str_replace("\r", "", str_replace("'", "\"", $pixel)))); ?>';

            var script = document.createElement("script");

            script.innerHTML = pixel;

            document.body.appendChild(script);

        });

    })( jQuery );

</script>

【讨论】：