Question

在我的项目中，客户希望我通过将Hotjar代码放在页面的<head>中来实现Hotjar。

这很简单，但是他们还希望用户控制是否允许自己被跟踪。

现在设置的方式是一个“ cookie设置”页面，用户可以在其中打开或关闭此选项：

<template>
    <form>
        <div class="field">
            <div class="control">
                <div class="public-switch text-right is-success">
                    <input v-model="performanceConsent" @change="onPerformanceConsentUpdate" type="checkbox" id="performance-cookies">
                    <label for="performance-cookies" class="toggle-switch"></label>
                    <small>Performance</small>
                </div>
                <br>
                <p class="caption">These cookies help us to improve the site’s performance. Select these cookies for faster experience and better content recommendations.</p>
            </div>
        </div>
    </form>
</template>

这是我们的Vue代码：

<script>

export default {

    data() {        
        return {                     
            performanceConsent: false,
        };
    },

    methods: {
        onPerformanceConsentUpdate() {
            this.$cookie.set('cookie-consent-performance', this.performanceConsent ? 'yes' : 'no');
        }
    },

    created() {

        this.performanceConsent = 'no' !== this.$cookie.get('cookie-consent-performance');

        this.onPerformanceConsentUpdate();
    }

}

</script>

现在，我的问题是，如果在Vue组件中performanceConsent是true的情况下，如何将条件添加到标头中以仅包括Hotjar？

这是否有可能，或者我是否必须发送Ajax请求并将这些设置存储在数据库中的某个位置，然后在页面加载时从那里获取它们？

Answer 1

我认为您要搜索的是vue-head

我也可能会做些什么，我会尝试v-if 我将在head中添加一个组件，然后在该组件内部我将使用v-if

进行逻辑条件运算

类似的东西，

如果您不喜欢vue-head

index.html

<script>

export default {
    name : 'head_component',
    template: '<template v-if="performanceConsent"> //import Hotjar </template>',
    data() {        
        return {                     
            performanceConsent: false,
        };
    },

    methods: {
        onPerformanceConsentUpdate() {
            this.$cookie.set('cookie-consent-performance', this.performanceConsent ? 'yes' : 'no');
        }
    },

    created() {

        this.performanceConsent = 'no' !== this.$cookie.get('cookie-consent-performance');

        this.onPerformanceConsentUpdate();
    }

}

</script>

Answer 2

一个非常简单的问题的非常简单的解决方案。

您无需依赖您的Vue组件，因为同意已写入Cookie。在文档标题中，您可以检查cookie是否存在，以及它是否存在以及是否等于true您可以将hotjar脚本附加到标题中。

这是一个带有实现的简单jsfiddle

https://jsfiddle.net/py0udsnk/

<head>
  <script>
    function getCookie(cname) {
      var name = cname + "=";
      var decodedCookie = decodeURIComponent(document.cookie);
      var ca = decodedCookie.split(';');
      for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
          c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
          return c.substring(name.length, c.length);
        }
      }
      return "";
    }
  </script>
  <script>
    var consent = getCookie('cookie-consent-performance')
    if (consent) {
      var hotjar = document.createElement('script')
      hotjar.src = 'https://hotjar.com/hotjar.js'
      document.getElementsByTagName('head')[0].appendChild(hotjar)
    }
  </script>
</head>

获取标头脚本中由Vue.js组件设置的Cookie变量

2 个答案: