将Google Adwords脚本添加到Vaadin应用程序中

Adding Google Adwords script into Vaadin Application

本文关键字：Vaadin 应用程序 添加 Google Adwords 脚本      更新时间：2023-09-26

我收到了一个脚本片段，可以将其添加到我们的Vaadin应用程序中，在完成订单后重定向到特定的单个页面：

<script type="text/javascript">
  var google_conversion_id = XYZ;
  var google_conversion_language = "en";
  var google_conversion_format = "3";
  var google_conversion_color = "ffffff";
  var google_conversion_label = "XXXYYYZZZ";
  var google_conversion_value = 1.00;
  var google_conversion_currency = "EUR";
  var google_remarketing_only = false;
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
  <div style="display:inline;">
    <img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/XYZ/?value=1.00&amp;currency_code=EUR&amp;label=XXXYYYZZZ&amp;guid=ON&amp;script=0"/>
  </div>
</noscript>

现在，我要处理的问题是，在使用Vaadin时，我无法将该片段直接放在页面上。

  • 我尝试了Vaadin的Label和ContentMode.HTML来添加这个代码块，但它根本没有添加到我的Layout或Component中
  • CustomLayout和一个以该代码为模板的特殊HTML页面正在过滤掉<script>部分

还有其他解决方案吗？我可以在应用程序中包含这些代码吗？

使用Vaadin的JavaScriptComponent功能。

State类：您可以将变量从服务器端传递到javascript组件。

public class MyComponentState extends JavaScriptComponentState {
  public String google_conversion_id = "XYZ";
  public String google_conversion_language = "en";
  public String google_conversion_format = "3";
  public String google_conversion_color = "ffffff";
  public String google_conversion_label = "XXXYYYZZZ";
  public double google_conversion_value = 1.00;
  public String google_conversion_currency = "EUR";
  public boolean google_remarketing_only = false;
}

和

@JavaScript({"mycomponent-connector.js"})
public class MyComponent extends AbstractJavaScriptComponent {
    @Override
    protected MyComponentState getState() {
        return (MyComponentState) super.getState();
    }
}

您可以在@JavaScript注释中包含多个js文件，如：

@JavaScript({"https://www.googleadservices.com/pagead/conversion.js", "mycomponent-connector.js"})

它将按顺序加载这些文件。

在同一个包上创建mycomponent-connector.js（如果使用maven，请使用resources文件夹），并在init函数中填充组件的根：

window.com_mypackage_MyComponent =
function() {
    // this is your html component to fill
    var myelement = this.getElement();
    // get state variables
    var myvar = this.getState().google_conversion_label;
    // call some library method to fill it
};

请参阅https://vaadin.com/docs/-/part/framework/gwt/gwt-javascript.html和https://vaadin.com/blog/-/blogs/vaadin-7-loves-javascript-components了解更多信息。

相关文章：