将 Google Adwords 脚本添加到 Vaadin 应用程序
Adding Google Adwords script into Vaadin Application
我得到了一个脚本片段,可以将其添加到我们的 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&currency_code=EUR&label=XXXYYYZZZ&guid=ON&script=0"/>
</div>
</noscript>
现在,我正在处理使用 Vaadin 时无法将该代码段直接放置在页面上的问题。
- 我尝试使用 Vaadin 的
Label
和 ContentMode.HTML
添加此代码块,但它根本没有添加到我的 Layout
或 Component
.
CustomLayout
和使用此代码作为模板的特殊 HTML 页面正在过滤掉 <script>
部分。
是否有更多解决方案可以将此代码包含在我的应用程序中?
使用 Vaadin 的 JavaScriptComponent
功能。
状态class:您可以将变量从服务器端传递到您的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 and https://vaadin.com/blog/-/blogs/vaadin-7-loves-javascript-components。
我得到了一个脚本片段,可以将其添加到我们的 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&currency_code=EUR&label=XXXYYYZZZ&guid=ON&script=0"/>
</div>
</noscript>
现在,我正在处理使用 Vaadin 时无法将该代码段直接放置在页面上的问题。
- 我尝试使用 Vaadin 的
Label
和ContentMode.HTML
添加此代码块,但它根本没有添加到我的Layout
或Component
. CustomLayout
和使用此代码作为模板的特殊 HTML 页面正在过滤掉<script>
部分。
是否有更多解决方案可以将此代码包含在我的应用程序中?
使用 Vaadin 的 JavaScriptComponent
功能。
状态class:您可以将变量从服务器端传递到您的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 and https://vaadin.com/blog/-/blogs/vaadin-7-loves-javascript-components。