简体   繁体   English

如何为meteor.js添加Google再营销代码?

[英]How to add google remarketing code for meteor.js?

The seo company I work closely with told me I needed to add this code inbetween the body tags of my meteor project. 与我紧密合作的seo公司告诉我,我需要在流星项目的body标签之间添加此代码。

<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 123456789;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</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="//googleads.g.doubleclick.net/pagead/viewthroughconversion/949352235    /?value=0&amp;guid=ON&amp;script=0"/>
</div>
</noscript>

However as we know script tags don't get executed properly inside body tags. 但是,我们知道脚本标记在body标记内无法正确执行。 So I searched on google to find an answer and I found this code that supposedly works but it's in REACT. 因此,我在Google上搜索以找到答案,我发现该代码可以正常工作,但它处于REACT状态。 How can I convert this react code into normal javascript that I can refer from a template or something. 如何将此反应代码转换为可以从模板或其他内容引用的普通javascript。 I'm thinking in a onCreated and or onRendered function. 我在考虑一个onCreated和或onRendered函数。

          GoogleTag = React.createClass({
                displayName : 'GoogleTag',
                render(){
                    var src = '';
                    if(this.props.type === 'conversion'){
                        src =  _.template('//www.googleadservices.com/pagead/conversion/<%=id%>/?label=<%=label%>&guid=ON&script=0'),
                        src = src({id : this.props.id, label : this.props.label})
                    }

                    if (this.props.type === 'remarketing') {
                        src = _.template('//googleads.g.doubleclick.net/pagead/viewthroughconversion/<%=id%>/?value=0&guid=ON&script=0'),
                        src = src({id: this.props.id})
                    }
                    var style = {
                        display : "inline"
                    },
                    imgStyle = {
                        borderStyle : "none"
                    }
                    return (
                        <div style={style}>
                            <img height="1" width="1" style={imgStyle} alt="" src={src}/>
                        </div>
                    )
                }
            })

You can use Google Remarketing library for async actions and write your meta-data via direct call tracking function: 您可以将Google再营销库用于异步操作,并通过直接调用跟踪功能来写入元数据:

/* remarketingTrack utility */

export default function remarketingTrack(data = {}) {
      try {
        trackConversion({
          google_conversion_id: SOME_ID,
          google_custom_params: data,
          google_remarketing_only: true
        });
      } catch (e) {
        // error
      }
 }

/** somewhere in ReactJS component **/

    componentDidMount() {
       remarketingTrack({
         flight_originid: XXX,
         flight_destid: XXX,
         flight_startdate: date,
         flight_pagetype: 'home',
       });
    }

I think that it's more flexible and neat solution 我认为这是更灵活,更整洁的解决方案

Place 地点

<script type="text/javascript">
    var google_conversion_id = 123456789;
    var google_custom_params = window.google_tag_params;
    var google_remarketing_only = true;
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>

in your head and you will be fine. 在你的头上,你会没事的。

In Meteor you can only have one <head> defined in your project, just create a file called head.html on the client and place the code above inside a body tag in the file. 在Meteor中,您只能在项目中定义一个<head> ,只需在客户端上创建一个名为head.html的文件,然后将代码放在文件中的body标记内。

First, remove any code that you have regarding this. 首先,删除与此相关的所有代码。 A standard implementation won't work with Meteor without a custom written implementation. 没有自定义的书面实现,标准的实现将无法与Meteor一起使用。

Second, take the code block that Google gives you. 其次,采用Google为您提供的代码块。 Throw out all of the JavaScript, and all of the script tags. 丢弃所有JavaScript和所有脚本标签。 You don't need them. 您不需要它们。

We'll be running a 'non-standard implementation', but it work's the same as far as we're concerned. 我们将运行“非标准实现”,但就我们所关注的而言,它的工作原理是相同的。 Take the code within the noscript tags (the div with the img tag), and we need to place it in every place our pages render. 将代码放入noscript标记(带有img标记的div)中,然后将其放置在页面呈现的每个位置。 So, place it in your Blaze or React layout template, and you should be done. 因此,将其放在您的Blaze或React布局模板中,就应该完成了。

Google will detect the noscript implementation (which they create so it'll work for visitors who don't have JavaScript enabled, but we are hacking it for use with our implementation), all Google really needs to see is the url call from the img tag :) Google会检测到noscript实施(他们创建的noscript实施将对未启用JavaScript的访问者有效,但是我们正在对其进行黑客操作以与我们的实施配合使用),Google真正需要查看的只是img中的url调用标签 :)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM