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

Posted 2023-03-08

【中文标题】将 Google Adwords 脚本添加到 Vaadin 应用程序

【英文标题】：Adding Google Adwords script into Vaadin Application

【发布时间】：2016-05-03 08:33:32

【问题描述】：

我得到了一个脚本 sn-p 以将其添加到我们的 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   style="border-style:none;"  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 时无法将 sn-p 直接放在页面上的问题。

我尝试使用 Vaadin 的 Label 和 ContentMode.html 添加此代码块，但它根本没有添加到我的 Layout 或 Component。 CustomLayout 和一个将此代码用作模板的特殊 HTML 页面正在过滤掉 <script> 部分。

还有其他解决方案如何在我的应用程序中包含此代码吗？

【参考方案1】：

使用 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，请使用资源文件夹）并在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 了解更多信息。