【问题标题】:Google Web Designer banner Missing click tag check on validationGoogle Web Designer 横幅在验证时缺少点击标记检查
【发布时间】:2020-05-22 17:32:06
【问题描述】:

我需要创建双击横幅,并且我正在使用 Google Web Designer。我想通过简单的href="javascript:window.open(window.clickTag)" 调用clickTag,一切正常,但是当我验证它时

https://h5validator.appspot.com/dcm/asset我得到错误:

缺少点击标签检查

我怎样才能消除这个错误,我错过了什么?

谢谢

【问题讨论】:

  • 这是导致错误的代码,它只是带有 clicktag jsfiddle.net/ae363saf 的 GWD 模板

标签: javascript banner double-click google-web-designer clicktag


【解决方案1】:

我认为这将帮助您找到解决问题的方法,请按照以下步骤操作:

第 1 步:从 zip 中提取文件。并使用任何代码编辑器打开 .html 文件,对广告投放人员最有用的是 notepad++。

第2步:html文件<head></head><body></body>中有两个重要部分

  • <head> 部分将有 <script type=”text/javascript”> 处理大部分功能。

  • 现在在</head>部分之前和<script type=”text/javascript”>Some Code From Creative </script>内部粘贴下面的代码

  • var clickTag = "http://www.google.com";

  • 确保其他标签/功能已关闭,并且您没有将上述代码粘贴到其他标签/功能中。

代码:

<head>
    <script type=”text/javascript”>
        var clickTag = “http://www.google.com”;
        Somecode of(function() 
        {
            somefunctionality code ...
        }
    </script>
</head>

第 3 步:在&lt;body&gt; start 之后粘贴以下代码,代码的排列方式会影响广告素材的可点击部分,因此请确保覆盖广告素材代码的所有资源下面的代码

<body>
    <a href="javascript:window.open(window.clickTag)">
        .......Creative assets code...
        .......Some functionality code.....
    </a>
</body>
click tag google web designer

第 4 步:确保 body 中定义的 clickTag 和 head 部分中定义的 clickTag 应该相同。现在保存文件。

第 5 步:转到所有资源所在的文件夹,全选然后创建 zip,确保创建的是 zip 而不是 rar,因为 zip 仅在 DFP 中是支持的格式。对于其他服务器,可能会有所不同。

因为如果不正确压缩所有文件,您可能会收到“No Primary HTML file detected”这个错误

未检测到主要 HTML 文件

Creative 由 Adob​​e Animate CC 构建

逐步解决广告素材问题

  • 第 1 步:解压缩 zip 文件并打开文件夹中的 html 文件
  • 第 2 步:在文件 sublime/Notepad++ 编辑器中打开 .html,将下面的代码粘贴到 &lt;head&gt; 部分之前,您可以将 http://www.google.com 替换为点击跟踪器或客户提供的着陆页 URL。

代码:
var clickTag = "http://www.google.com";

Adobe_animate_CC_clickTag_Issue_head_section
  • 第 3 步:现在一旦实现了上述代码,就可以在 body 部分实现 clickTag,由于 clickTag 区分大小写,请确保在 Head 部分实现的 clickTag 应与 body 部分中的 clickTag 匹配,现在在下面的代码中实现标记。

    Adobe_animate_CC_clickTag_Issue_body_section

  • 第 4 步:确保标记的位置很重要,您必须覆盖整个画布部分,以便整个广告素材都可以点击。

【讨论】:

  • 谢谢,但没有帮助。看起来验证器由于某种我不明白的原因无法“看到”变量。编辑:这是导致错误的代码,它只是带有 clicktag jsfiddle.net/ae363saf 的 GWD 模板
  • 哦,对不起,让我检查一下你的代码,看看能不能帮到你。
【解决方案2】:

我遇到了同样的问题,我尝试按照https://support.google.com/dcm/answer/3145300?visit_id=636892883779240296-1524067146&rd=1#dev > 点击代码 > 点击代码插入示例下的说明进行操作。 但是,无论我尝试什么,我都无法让它发挥作用。结果总是:工作正常,但验证器抛出错误。

所以我回到了“使用 Google Web Designer 处理退出事件”下描述的第二个选项。完全按照那里的所有步骤。 结果是一个在验证器中签入但不可点击的广告。

所以在包含 gwd 点击区域之后,我还手动在 body 内部添加了一个附加锚点,所以它看起来像这样:

<body>
  <a href="javascript:window.open(window.clickTag)">
    <gwd-google-ad id="gwd-ad" polite-load="">
    (...)
      <gwd-pagedeck class="gwd-page-container" id="pagedeck">
        <gwd-page id="page1" class="gwd-page-wrapper gwd-page-size gwd-lightbox" data-gwd-width="300px" data-gwd-height="600px">
         (...)
            <gwd-taparea id="gwd-taparea_1" class="gwd-taparea-vsnj"></gwd-taparea>
          </div>
        </gwd-page>
      </gwd-pagedeck>
      <gwd-exit metric="CTA-xyz" url="http://abc.de"></gwd-exit>
    </gwd-google-ad>
    <script type="text/javascript" id="gwd-init-code">
     (...)
    </script>
  </a>
</body>

现在我有一个经过验证但也可点击的广告素材。

【讨论】:

    【解决方案3】:

    使用 Google Web Designer (GWD) 创建的 HTML5 广告素材在导出为 .zip 文件之前,应在 Google Web Designer 中添加 clickTag 作为号召性用语 (https://support.google.com/webdesigner/answer/3263494?hl=en)。

    由于您只有导出的 .zip 文件,您需要返回 GWD 并添加号召性用语,或者按照我制定的硬编码解决方法:

    我会参考你的 jsfiddle (http://jsfiddle.net/ae363saf):

    1. 与其余样式标签一起粘贴(第 8 行)。
    <style data-exports-type="gwd-taparea" data-gwd-node="true">gwd-taparea{display:block;cursor:pointer;background-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}</style>
    
    1. 根据您的广告尺寸,您需要修改此代码中的值。广告素材示例为 300x250,因此在以下代码中进行设置: 高度:300 像素,
      宽度:250 像素,
      变换原点:125px 150px 0px,
      -webkit-transform-origin:125px 150px 0px,
      -moz-transform-origin:125px 150px 0px(半宽,半高,0)。
      将编辑后的代码粘贴到第 13 行末尾的 &lt;/style&gt; 之前。
    .gwd-taparea-11s4{position:absolute;top:0px;height:300px;left:0px;width:250px;transform-origin:125px 150px 0px;-webkit-transform-origin:125px 150px 0px;-moz-transform-origin:125px 150px 0px}
    
    1. &lt;/head&gt; 之前粘贴(第86 行)。
      <script data-source="gwdtaparea_min.js" data-version="4" data-exports-type="gwd-taparea">(function(){'use strict';var c;var d=function(a,b,e){if(e){var f=document.createEvent("CustomEvent");f.initCustomEvent(a,!0,!0,e)}else f=document.createEvent("Event"),f.initEvent(a,!0,!0);b.dispatchEvent(f);return f};var g=[],h=function(a){a=g.indexOf(a);0<=a&&g.splice(a,1)};document.addEventListener("click",function(a){for(var b=0;b<g.length;b++)if(25>Math.abs(a.clientX-g[b].m)&&25>Math.abs(a.clientY-g[b].o)||25>Math.abs(a.screenX-g[b].A)&&25>Math.abs(a.screenY-g[b].B))g.splice(b,1),a.stopPropagation(),a.preventDefault()},!0);var k=function(){};goog.inherits(k,HTMLElement);c=k.prototype;c.createdCallback=function(){this.l=this.j=0;this.f=this.b=this.g=this.c=null;this.a=!0;this.h=this.s.bind(this)};
    c.attachedCallback=function(){this.b||(this.c=this.i.bind(this),this.g=this.w.bind(this),this.b=this.v.bind(this),this.f=this.u.bind(this));this.addEventListener("click",this.c,!1);this.addEventListener("touchstart",this.g,!1);this.addEventListener("action",this.h,!1)};c.detachedCallback=function(){this.removeEventListener("click",this.c,!1);this.removeEventListener("touchstart",this.g,!1);this.removeEventListener("action",this.h,!1)};c.i=function(){this.a&&d("action",this);this.a=!0};
    c.w=function(a){this.addEventListener("touchmove",this.b,!1);this.addEventListener("touchend",this.f,!1);a=a.touches[0];this.j=a.clientX;this.l=a.clientY};c.u=function(a){this.i();this.removeEventListener("touchmove",this.b,!1);this.removeEventListener("touchend",this.f,!1);a=a.changedTouches[0];a={m:a.clientX,o:a.clientY,A:a.screenX,B:a.screenY};g.push(a);setTimeout(h.bind(null,a),2500)};c.v=function(a){a=a.touches[0];this.a=this.a&&10>=Math.abs(this.j-a.clientX)&&10>=Math.abs(this.l-a.clientY)};
    c.s=function(){var a=this.getAttribute("exit-id"),b=this.getAttribute("product-index"),e=this.getAttribute("exit-override-url");e&&!d("tapareaexit",this,{"exit-id":a,url:e,"product-index":b}).detail.handled&&window.open(e)};c.attributeChangedCallback=function(){};document.registerElement("gwd-taparea",{prototype:k.prototype});}).call(this);
    </script>
      <script type="text/javascript" gwd-events="support">var gwd=gwd||{};gwd.actions=gwd.actions||{};gwd.actions.events=gwd.actions.events||{};gwd.actions.events.getElementById=function(id){var element=document.getElementById(id);if(!element){var pageDeck=document.querySelector("[is=gwd-pagedeck]");if(pageDeck){if(typeof pageDeck.getElementById==="function"){element=pageDeck.getElementById(id)}}}if(!element){switch(id){case"document.body":element=document.body;break;case"document":element=document;break;case"window":element=window;break;default:break}}return element};gwd.actions.events.addHandler=function(eventTarget,eventName,eventHandler,useCapture){var targetElement=gwd.actions.events.getElementById(eventTarget);if(targetElement){targetElement.addEventListener(eventName,eventHandler,useCapture)}};gwd.actions.events.removeHandler=function(eventTarget,eventName,eventHandler,useCapture){var targetElement=gwd.actions.events.getElementById(eventTarget);if(targetElement){targetElement.removeEventListener(eventName,eventHandler,useCapture)}};gwd.actions.events.setInlineStyle=function(id,styles){var element=gwd.actions.events.getElementById(id);if(!element||!styles){return}var transitionProperty=element.style.transition!==undefined?"transition":"-webkit-transition";var prevTransition=element.style[transitionProperty];var splitStyles=styles.split(/\s*;\s*/);var nameValue;splitStyles.forEach(function(splitStyle){if(splitStyle){var regex=new RegExp("[:](?![/]{2})");nameValue=splitStyle.split(regex);nameValue[1]=nameValue[1]?nameValue[1].trim():null;if(!(nameValue[0]&&nameValue[1])){return}element.style.setProperty(nameValue[0],nameValue[1])}});function restoreTransition(event){var el=event.target;el.style.transition=prevTransition;el.removeEventListener(event.type,restoreTransition,false)}element.addEventListener("transitionend",restoreTransition,false);element.addEventListener("webkitTransitionEnd",restoreTransition,false)};gwd.actions.gwdDoubleclick=gwd.actions.gwdDoubleclick||{};gwd.actions.gwdDoubleclick.exit=function(receiver,exitId,url,opt_collapseOnExit,opt_pauseMedia){gwd.actions.events.getElementById(receiver).exit(exitId,url,opt_collapseOnExit,opt_pauseMedia)}</script>
      <script type="text/javascript" gwd-events="handlers">gwd.auto_Gwd_taparea_1Action=function(event){gwd.actions.gwdDoubleclick.exit("gwd-ad","clickTag","http://www.visitloscabos.travel/",true,true)}</script>
      <script type="text/javascript" gwd-events="registration">gwd.actions.events.registerEventHandlers=function(event){gwd.actions.events.addHandler("gwd-taparea_1","action",gwd.auto_Gwd_taparea_1Action,false)};gwd.actions.events.deregisterEventHandlers=function(event){gwd.actions.events.removeHandler("gwd-taparea_1","action",gwd.auto_Gwd_taparea_1Action,false)};document.addEventListener("DOMContentLoaded",gwd.actions.events.registerEventHandlers);document.addEventListener("unload",gwd.actions.events.deregisterEventHandlers)</script>
    
    1. &lt;gwd-metric-configuration&gt; 标签内(第 90 行)。
    <gwd-metric-event source="gwd-taparea_1" event="tapareaexit" metric="" exit="Exit"></gwd-metric-event>
    
    1. &lt;div class="gwd-page-content gwd-page-size"&gt;&lt;/div&gt; 之前(第95 行)。
    <gwd-taparea id="gwd-taparea_1" class="gwd-taparea-11s4"></gwd-taparea>
    
    1. 将下面的 URL 替换为您想要点击进入的任何 URL(您的 clickTag)或默认 URL,因为某些广告服务器可以在其界面中修改此 URL。在 &lt;/gwd-doubleclick&gt; 之前粘贴(第 98 行)。
    <gwd-exit metric="clickTag" url="https://www.google.com/"></gwd-exit>
    
    1. 将 URL 替换为您想要点击进入的 URL。粘贴到 StudioExports 函数中的括号之间(第 138 行末尾)。
    Enabler.exit("clickTag", "https://www.google.com/");
    
    
    1. 将 URL 替换为您想要点击进入的 URL。在括号之间的&lt;script type="text/gwd-admetadata"&gt;"exits":[]数组中粘贴(第138行)。
    {"exitId":"clickTag","url":"https://www.google.com/"}
    
    1. 粘贴到"components":["gwd-doubleclick","gwd-page","gwd-pagedeck"] 数组中最后一个组件"gwd-pagedeck" 之后的&lt;script type="text/gwd-admetadata"&gt; 标记末尾(第138 行)。
    ,"gwd-taparea"
    

    保存文件,再次对文件夹进行 .zip 压缩,现在广告素材应该会通过 Google 的 HTML5 验证器。

    【讨论】:

      【解决方案4】:

      我知道我可能会迟到,但我遇到了同样的问题,我找到了一种更简单的方法来修复 https://h5validator.appspot.com/dcm/asset 上的“缺少点击标签检查”错误,并且无需添加自定义代码。

      步骤如下:

      1. 创建点击区域
      2. 将事件添加到点击区域并设置事件如下:

      完成后,保存您的构建并将其发布到 ZIP。您可以在https://h5validator.appspot.com/dcm/asset 上传 ZIP,您应该清楚一切。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-07-25
        • 2011-01-31
        相关资源
        最近更新 更多