我们正在使用圆滑的传送带,并且已启用箭头。 单击箭头后,我们要通过以下内容向GA发送事件。 但是,当我们单击箭头元素时,它不会发送。 没有错误消息,并且我拥有的扩展程序(例如GA Debugger for Chrome)似乎都未返回任何结果。

这是我们尝试的方法,但是没有起作用。 在我们的本地测试环境中,我们可以添加google-analytics.js文件,但无法在此处加载它。

我们已使用本文通过GTM安装了GA

 $(document).ready(function () { var carsl = $('.carousel'); carsl.slick(); carsl.on('click', '.slick-arrow', function() { // Create GA event; // this does not work. ga('send', { hitType: 'event', eventCategory: 'Slick', eventAction: 'arrow', eventLabel: 'clicked' }); }); }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <div class="carousel"> <div class="carousel__item">item 1</div> <div class="carousel__item">item 2</div> <div class="carousel__item">item 3</div> <div class="carousel__item">item 4</div> </div> 

这也在<head>

 <script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script> 

#1楼 票数:1 已采纳

这里的问题是您没有使用正确的方法将事件发送到GA。

您已经通过GTM实现了GA,但是如果您通过analytics.js实现了GA,则单击箭头时所使用的功能。

有很多方法可以使用GTM跟踪事件,但是由于您已经在页面上找到了javascript,因此根据到目前为止的知识来解决它是最简单的。

该解决方案将利用gtm中的数据层事件

将代码的GA部分更改为:

$(document).ready(function () {

  var carsl = $('.carousel');
  carsl.slick();

  carsl.on('click', '.slick-arrow', function() {

    // push event to datalayer, the event name is whatever you like
    // this does should work
     dataLayer.push({'event': 'mySlickArrowEvent'});

  });

});

GTM设置:

在GTM中,设置触发器。 进入GTM,转到“触发器”屏幕,添加“自定义事件”类型的新触发器,然后在“事件名称”字段中,从上方输入该名称“ mySlickArrowEvent”。 像这样: 在此处输入图片说明

现在转到“标签”屏幕,并添加一个新的Google Analytics(分析)标签。 这次选择“事件”类型,填写您希望其出现在GA中的所有事件类别,操作和标签,并将我们刚刚创建的触发器附加到此新标签。 像这样:

在此处输入图片说明

现在,可以使用调试模式预览所有内容 ,也可以只发布容器,并且该事件应在GA中注册。

  ask by usernameabc translate from so

未解决问题?本站智能推荐:

1回复

如何避免专注于slickGoTo事件

我正在使用光滑的滑块以对轮播执行一些操作。 我录制了想要避免的行为的视频 。 当您单击选项卡时,它会做出奇怪的焦点动作吗? 我需要做的就是,如果您单击任何选项卡,焦点都不会移到任何地方,因此屏幕不会执行向下滚动操作。 我正在使用此功能转到需要的幻灯片,这导致了我不需要的聚焦故障:
1回复

与2个触摸事件javascript插件冲突,以错误的顺序分层触摸事件?

参见我的jsFiddle进行测试。 我正在使用这两个js / jquery插件, Ken Wheelers Slick Slider和Jakie Stfu Snap.js插件,它们都依赖于触摸事件来触发其功能。 我希望能够相互结合使用这些插件。 我已经创建了精确的工作环境的jsFi
1回复

点击事件后调用滑动

点击事件后,我遇到了一个打滑的问题。 在页面加载后,这种方法就可以正常工作,但是问题出在以下代码上: 我无法调用点击功能。 错误是:
2回复

拖动时如何避免意外点击事件?

我有一个使用 Slick 构建的滑块,每张幻灯片都有一个 data 属性,当单击幻灯片时,该属性被复制到输入字段,然后提交具有该输入字段值的表单。 问题是,如果我有多个幻灯片,“也许通过从上面的选择框中选择 Kissen=>Sitz 然后尝试拖动幻灯片滚动浏览它们,这可能会导致点击事件(大多
1回复

使用Slick切换beforeChange事件上的图像

我试图弄清楚如何根据Slick事件之一的单击元素显示和隐藏一些图像。 如您在该标记中所看到的,有些图像具有img-active类,它们是文档准备好后用户将看到的图像。 该组图像如下所示: 我需要的是,当您单击图像时,它必须隐藏当前图像并显示带有img-inactive类的图
1回复

光滑滑块无法正确循环

我有一个Slick滑块的问题,你可以在http://chriswickham.co.uk/startrek/看到 当滑块循环时,它会在拍摄回到第一张幻灯片之前暂时显示第一张幻灯片的子元素“hero__text”。 我无法弄清楚是什么导致了它。 任何帮助,将不胜感激。 HTML
1回复

2 slick carousel init 方法的问题

我正在使用 slick.js 在同一页面上处理一个带有 2 个滑块的页面。 第一个滑块是页面的主要顶部横幅,第二个滑块是一个弹出窗口,用于显示产品图像和其余信息。 此外,我使用 .NET CORE MVC,所以我决定对弹出的产品详细信息使用部分视图。 所以。 问题是第二个滑块无法正常工作。 我有
1回复

如果只有 1 个项目,则光滑的滑块不会引发事件

我已经实现了一个处理动态数据的光滑滑块。 我的问题是只剩下一张幻灯片。 在这种情况下,不会抛出任何事件。 如果这个“幻灯片”是一个视频项目,我需要在视频结束时从头开始回收它。 我什至在漂亮的代码中实现了一个触发器,但似乎也没有抛出这个触发器(如果只有一张幻灯片)。 任何建议表示赞赏。