[SOLVED] How to add google remarketing code & pixel facebook code to meteor?

help
1

Hi, sorry about my English…

I hired an advertising company, they asked me to make 2 pages: Index and Thank-you, and put codes inside.

  1. Conversion
    Type of code : Conversion (Google Ads & Facebook Ads)
    Setup : Insert Code into “body” tag of thank-you page(s)
    Requirement : Website need to have separated thank-you page after purchase/submit
  2. Remarketing
    Type of code : Remarketing (Google Ads & Facebook Ads)
    Setup : Insert Code into “body” tag of all pages

Ex :

<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 949352235;
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>

I used packages as following:

kadira:flow-router-ssr
kadira:react-layout
react
twbs:bootstrap

and I created 2 routes: / & /thank-you
However, when i put the code (google & facebook), errors happened all the time and the codes didnt work.

Please help, much appreciated!

2

If you solved this, would you mind posting what your solution was?

3

Yes, I render content of noscript tag in body.

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>
        )
    }
})

<GoogleTag type="remarketing" id="XXXXXXX"/>

Its worked.

1 Like
4

You know, in retrospect, I’m not sure that render is the best place for the pixel code. This means that every time a prop or state updates, or something causes render to re-render, the pixel code will be invoked. It might be better to put it in componentDidMount.

3 Likes