README

使用此包，您的网站将不会设置任何（Google Marketing & Analytics）Cookies，直到用户接受 Cookie 政策。（除基本和功能 Cookies 外）。这一切都因为欧盟的疯狂 Cookie 法规。

Livewire Cookie Consent 是一个 Livewire 组件，提供 Opt-In Cookie 模态框。用户可以选择

基本和功能 Cookies
分析 Cookies
营销 Cookies

特殊

在用户做出 Opt-In 决定之前，不会设置任何分析或营销 Cookies（欧洲法律）。
用户可以通过页面页脚中的链接打开模态框，重新配置其 Cookie 同意选择。
如果您想的话，可以将此组件连接到 Google Tag Manager。包含 GTM 示例脚本。
您可以在 Google Tag Manager 中为其他希望控制的任何 Cookie 添加触发器。

要求

Laravel Jetstream 与 Livewire

Jetstream 应仅安装在新 Laravel 应用程序中。尝试将 Jetstream 安装到现有 Laravel 应用程序中会导致意外行为和问题

安装

如果您还没有安装 Jetstream 和 Livewire

composer require laravel/jetstream

php artisan jetstream:install livewire

现在安装包

composer require martinschenk/livewire-cookie-consent

在 /config/app.php 中注册包

return [
    /*
     * Application Service Providers...
     */
    
    App\Providers\AppServiceProvider::class,
    ...
    Martinschenk\LivewireCookieConsent\CookieConsentModalServiceProvider::class,
    
];

完成安装

安装 Jetstream 后，您应该安装和构建您的 NPM 依赖项，并迁移您的数据库

npm install
npm run build
php artisan migrate

包含 Livewire 和 vite 指令

将此包含到您的 welcome.blade.php、着陆页或任何其他基础模板中。

<html>
<head>
    ...
    @livewireStyles
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    ...
    @livewireScripts
    @livewire('livewire-ui-modal')
    @include('livewire-cookie-consent::cookieconsent')
</body>
</html>

包含链接

通常在网页页脚中包含此链接。这将打开 cookie 模态框以更改首选项。

<a class='underline' href="#" 
   onclick="Livewire.emit('openModal', 'cookie-consent-edit')">
        {{ __('Cookie Config') }}
</a>

发布视图和标志

设计使用 Tailwind 完成。您可以根据需要编辑和修改文件。您将在 resources/views/vendor/livewire-cookie-consent 中找到视图。

php artisan vendor:publish --provider="Martinschenk\LivewireCookieConsent\CookieConsentModalServiceProvider" --tag="views"

现在应该可以工作了

只需这样做

   php artisan optimize:clear
   npm run dev

如果重新加载您的网页，应该会看到弹出模态框。

如果您想的话，发布剩余的内容

对话框文本和语言

如果您想修改对话框中显示的文本，可以使用此命令发布 lang 文件

php artisan vendor:publish --provider="Martinschenk\LivewireCookieConsent\CookieConsentModalServiceProvider" --tag="lang"

这将发布例如英文语言文件到 lang/vendor/livewire-cookie-consent/en/texts.php。

return [
    'alert_accept' => 'Accept all cookies',
    'alert_essentials_only' => 'Accept only necessary cookies',
    'alert_settings' => 'Adjust your preferences',
    ...
];

配置文件

更改配置值时要小心，因为 Google Tag Manager 正在使用它们。只有当您知道自己在做什么时才更改它们。

php artisan vendor:publish --provider="Martinschenk\LivewireCookieConsent\CookieConsentModalServiceProvider" --tag="config"

这是已发布的配置文件的内容。您可以在 /config/livewire-cookie-consent.php 中找到它。

return 

    'cookie_name' => 'cookie-consent',

    'cookie_value_analytics' => '2',
    'cookie_value_marketing' => '3',
    'cookie_value_both' => 'true',
    'cookie_value_none' => 'false',

    'consent_cookie_lifetime' => 60 * 24 * 365,
    'refuse_cookie_lifetime' => 60 * 24 * 30,

];

配置 Google Tag Manager

如果您想使用 Google Tag Manager，您将找到配置 GTM 的示例容器脚本这里

GTM 示例容器

{
    "exportFormatVersion": 2,
    "exportTime": "2022-11-25 20:49:55",
    "containerVersion": {
        "path": "accounts/6060538801/containers/95560929/versions/16",
        "accountId": "6060538801",
        "containerId": "95560929",
        "containerVersionId": "16",
        "name": "cookie consent v1.0",
        "container": {
            "path": "accounts/6060538801/containers/95560929",
            "accountId": "6060538801",
            "containerId": "95560929",
            "name": "www.vissit.io",
            "publicId": "GTM-YOUR-CODE",

您可以将此 GTM 容器导入或合并到您的 GTM 账户中。您可以在这里找到导入容器的 GTM 文档。您可能需要将 GTM 容器中的 GTM-Code 更改为您自己的 GTM-Code。

配置 Google Tag Manager 后，您必须以这种方式在网站 HEAD 部分插入 Google Tag Manager 代码（在 @livewireStyles 和 @vite... 之间）

    @livewireStyles
    HERE THE GOOGLE TAG MANAGER CODE
    @vite(['resources/css/app.css', 'resources/js/app.js'])

示例

<head>
    
    ...
    @livewireStyles 

    <!-- Google Tag Manager -->
    <script>
        window.dataLayer = window.dataLayer || [];
    </script>
    
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://#/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-YOURKEY');</script>
    <!-- End Google Tag Manager -->

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

将 GTM-YOURKEY 替换为您自己的 Google Tag Manager 密钥。

安全

如果您发现任何安全相关的问题，请通过电子邮件 mschenk.pda@gmail.com 而不是使用问题跟踪器来报告。

致谢

本软件包基于 spatie 的版本：https://github.com/spatie/laravel-cookie-consent 以及 statikbe 的版本：https://github.com/statikbe/laravel-cookie-consent

许可证

MIT 许可证（MIT）。请参阅许可证文件获取更多信息。

martinschenk / livewire-cookie-consent

维护者

详情