Change the product.liquid file to trigger the ViewContent and AddToCart event

Highlighted
New Member
1 0 1

I am trying to add some FB events to my product.liquid file..I need to edit the code before copying..

http://shopify.flexify.net/facebook-dynamic-product-ads-shopify/#install-facebooks-custom-audience-p...

 

Where do I find the following?

$('#ADD_TO_CART_BUTTON_ID').bind( 'click', function(){

and

var variant_id = YOUR_CODE_HERE;

I'm not quite sure what to enter here.

1 Like
Highlighted
Shopify Staff
Shopify Staff
368 0 34

Hello Daniel, Ben here - your Shopify Guru! 

  The first would be based on your theme. This is what your add to cart button looks like:

Your theme does not have an id for this button. You could target it either by class using JQuery or by the data-label. For class you could do the following:

$( ".add_to_cart" ).bind( 'click', function(){

or to select by data-label:

$('button[data-label="Add to Cart"]').bind( 'click', function(){

for the variant you would need to list out the variant Id this can be done with liquid easy enough using:

{{ product.variant.id }}

Although from what you linked in that guide I do not see where it is asking you to var the variant_id. It seems to already have that built into the tracking pixel code.

 

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben C - Shopify Guru
Support@Shopify.com

0 Likes
Highlighted
New Member
1 0 0

I'm using the following code in my product.liquid within the Mobilia theme and it populates all the necessary fields within the Facebook pixel needed for dynamic Product Catalog Ads.

 

<!-- Beginning FB VIEW CONTENT--!>
<script>
  fbq('track', 'ViewContent', {
content_ids: ['shopify_{{ product.id }}_{{ product.variants.first.id }}'],
content_type: 'product',
content_category: "{{ collection.title }}",
value: {{ product.price | money_without_currency }},
currency: 'USD',
content_name: "{{ product.title }}"
});
</script>
<!-- END OF FB VIEW CONTENT --!>

<!-- Beginning FB ADD TO CART -->
<script>
$( '.add_to_cart' ).click(function() {
fbq('track', 'AddToCart', {
content_ids: ['shopify_{{ product.id }}_{{ product.variants.first.id }}'],
content_type: 'product',
content_category: "{{ collection.title }}",
value: {{ product.price | money_without_currency }},
currency: 'USD',
content_name: "{{ product.title }}"
});
});
</script>
<!-- END OF FB ADD TO CART -->

0 Likes
Highlighted
New Member
2 0 0

<!-- Beginning FB ADD TO CART -->
<script>
$( 'product-add-to-cart' ).click(function() {
fbq('track', 'AddToCart', {
content_ids: ['shopify_{{ product.id }}_{{ product.variants.first.id }}'],
content_type: 'product',
content_category: "{{ collection.title }}",
value: {{ product.price | money_without_currency }},
currency: 'USD',
content_name: "{{ product.title }}"
});
});
</script>
<!-- END OF FB ADD TO CART -->

 

Above is the piece of code that I am using for the AddToCart feature. My theme is minimart. 

Relevant section of the code from the website - 


<input type="submit" name="add" class="btn" id="product-add-to-cart" value="Add to Cart">

 

 

0 Likes
Highlighted

Hi.

My name is Romchy, I am with the support of Shopify Product-Feed. This is a service that will solve your tasks of synchronizing your shop Shopify with advertising services Facebook Shopping, Google Merchant Center aka Google Shopping, Instagram Shopping, Yottos AdLoad, Pinterest.

Now everything is much easier. To launch dynamic advertising, remarketing or retargeting, or to a new audience, or Lookalike, if it was based on what to collect it.

 

1. In your store, in the "Pixel ID of Facebook" field, the identifier of your pixel is indicated.
2. Download the Shopify Product-Feed - Facebook Google
3. In the Facebook business manager, create in the product catalog using the taken feed in Shopify Product-Feed
4. In the business manager of Facebook configure user events
5. In the business manager Facebook set up dynamic ads.

That's all. That's so simple)

 

__________________________________________________________________________

★ Did my post help? If yes, then please like and accept solution. ★


romchy | Application consultant
Feed Product


→ Ask to launch an effective advertising campaign @ Write to WhatsApp 
→ Get Free Guides for Store Sync @ Shopify Feed Product Help Center

→ or Video Help Center Shopify Feed Product
→ Want to get new features? Add Feed product app to your store @ Add app Feed product

0 Likes