Announcement

**AdamKing** · 27-Sep-2021, 11:30 AM

A little more info on the Purchase event - instead of the SKU showing, the ProductRef variable is displaying in Facebook Events manager as:

"NETQUOTEVAR:PRODUCTREF"

Can anyone help explain this to me? How do i get it to show the actual Product code instead?

Thanks

**NormanRouxel** · 27-Sep-2021, 02:09 PM

The Product Page stuff can probably be made to work. Not sure why you have 3 Product Page BlockIf's though. Try to do it with just 1.

The Cart and Checkout are much more complicated as they can contain a sequence of products. You've not taken that into account. E.g. your Receipt page has a single <actinic:variable name="ProductRef" /> (which SellerDeck translates into "NETQUOTEVAR:PRODUCTREF"). This is only valid on the product line display part of that page and displays as junk outside that.

How I've handled this Receipt in the past is to put a unique classname to whatever encloses the Product Reference. Then use jQuery to iterate over all references to build an array to pass to FB.

Code:

<script>
// Receipt Page code - put at bottom of page

// Requires tag containing product reference has class prodrefitem
// Requires tag containing Total has ID grandtotal

		var prodrefs = new Array();
		$('.prodrefitem').each(function(){
			var thisref = $(this).text();
			if ( thisref != '' ) prodrefs.push( thisref );
			});

		fbq('track', 'Purchase', {
			content_ids: prodrefs,
			content_type: 'product',
			value: $( "#grandtotal" ).text().replace(/[^0-9\.]/, ''),
			currency: 'GB'
			});
</script>

N.B. Untested.

**AdamKing** · 27-Sep-2021, 02:43 PM

Hi Norman, thanks for the reply, it is much appreciated.

My knowledge and use of BlockIfs is patchy at best, but yes, I see what you mean about using 3 rather than 1. I will try and tidy that up.

And you are right, I hadn't considered the fact that outside the product page, there may be several instances of a Product ID. So, if I have understood this correctly, by using your script, I should remove the Purchase event code entirely from the facebook pixel code layout in SD? And the two lines that begin // Requires tag in the script code above need acting on in the sellerdeck receipt page layout, by applying class="prodreitem" (for example) to the relevant piece of code?

Apologies, all of this is stretching the limit of my knowledge, but I think i understand what I have to do.

Thanks

**NormanRouxel** · 27-Sep-2021, 10:19 PM

You've got the idea. Look in layout "Cart Product Details With Thumbnails RWD" this is used in the Cart, Checkout and Receipt to show the lines in the Cart.

You'll find around line 5:

Code:

<span class="floatLeft"><Actinic:Variable Name="ProdRef"/></span>

If you amend this to be:

Code:

<span class="floatLeft prodrefitem"><Actinic:Variable Name="ProdRef"/></span>

That will allow it to be picked up by the code in post #3.

Likewise for the Total, look in layout "Total Row" for:

Code:

<td align="right" class="checkout-cartheading"><b><Actinic:Variable Name="Total"/></b></td>

And amend to be:

Code:

<td align="right" id="grandtotal" class="checkout-cartheading"><b><Actinic:Variable Name="Total"/></b></td>

**NormanRouxel** · 27-Sep-2021, 10:41 PM

And, as a confidence checker, try this in the bottom of Receipt Page Bulk RWD.
It just displays the Ref and Total and works in Preview.

Code:

<script>
	var prodrefs = new Array();
	$('.prodrefitem').each(function(){
		var thisref = $(this).text();
		if ( thisref != '' ) alert( 'REF: ' + thisref + ' TOT: ' + $( "#grandtotal" ).text().replace(/[^0-9\.]/, '') );
		});
</script>

Should display "REF: 19 TOT: 25.83" in Design tab, Select Page Type: Receipt.

**AdamKing** · 28-Sep-2021, 07:25 AM

Thanks Norman, that's great, really very helpful. I shall give this a go today.

And yes, I have learnt that it is all about confidence when working with Sellerdeck... which is usually in short supply!

**AdamKing** · 28-Sep-2021, 08:58 AM

Hi Norman. Just to clarify, I am using the Swift layout with v18.

I have placed the script from post 3 at the bottom of: Receipt Page Bulk RWD - would this be the correct placement?

Also, in the Receipt page, as it is Swift, i think it is different. The layout you refer to seems to instead be called: Cart Product Details With Thumbnails Small Swift.

And I am unable to find the line: <span class="floatLeft"><Actinic:Variable Name="ProdRef"/></span>

It doesn't seem to have the ProdRef variable in the layout at all. Are you able to advise me on this?

**NormanRouxel** · 28-Sep-2021, 03:23 PM

Looks like SellerDeck don't intend for the Product Reference to be seen in the swift receipt. You'll have to put it in.
Edit Cart Product Details With Thumbnails Small Swift and look for:

Code:

<Actinic:Variable Name="ProductNameOnline"/>

Above it add:

Code:

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductReferenceVisible%22%20%2f%3e" >
Ref: <span class="prodrefitem"><Actinic:Variable Name="ProdRef"/></span>&nbsp;
</actinic:block>

And the grand total tweak goes into layout Total Row In Mail Swift:

Code:

<td align="right" id="grandtotal" class="checkout-cartheading"><b><Actinic:Variable Name="Total"/></b></td>

Test this by putting the code from my post #6 above into the bottom of Receipt Page Bulk RWD (that's unchanged in Swift).

**AdamKing** · 29-Sep-2021, 08:55 AM

Thanks Norman. I have made the changes, and the test code triggered a small popup box with "REF: 19 TOT: 25.83" so hopefully that is working correctly.

By placing the script code from post 3 into the bottom of Receipt Page Bulk RWD, I am getting an error flagged up - 'fbq' is undefined.

Is this because fbq is defined in the layout 'Facebook Pixel Code' and the error assumes fbq would be defined in the same layout block (ie Receipt Page Bulk RWD)?

The site has uploaded fine and I assume that once the html for receipt page has all been assembled, fbq will then be defined?

**AdamKing** · 29-Sep-2021, 08:58 AM

Click image for larger version

Name: error_fbq_undefined.jpg
Views: 111
Size: 308.6 KB
ID: 554674

**NormanRouxel** · 29-Sep-2021, 11:14 AM

You have a BlockIf <actinic:variable name="FacebookPixelID" /> != "" AND <actinic:variable name="IsNotPreviewMode" />
around the code that loads the Facebook Pixel routines. This is correct as it prevents it from loading when Previewing.

There's no similar BlockIf around the stuff at the bottom of Receipt Page Bulk RWD as it would have prevented you from Preview testing.

Now that you're going live, it would make sense to put the same BlockIf around the stuff at the bottom of Receipt Page Bulk RWD.

**AdamKing** · 29-Sep-2021, 12:02 PM

Thanks, that's great. I will do that.

I can confirm too that we have now received some content ids for the purchase event in Facebook.

For the Add to Cart event, which is not firing at all, would I be right in thinking that I should do similar for this but on the Checkout Cart page? In other words, same theory applies. It is a page that shows more than 1 product ref so the array needs populating in the same way as the receipt page.

Really appreciate your help with this one. Adam

**NormanRouxel** · 29-Sep-2021, 12:48 PM

You have a BlockIf that tries to put some code on an "Add To Cart Confirmation" page but you don't have that type of cart. When a customer adds a product it goes straight to the Cart which may / may not already have products in it. I think that's page type "Shopping Cart" and you'd need code similar to the Receipt as there can be multiple products there.

If you want to tell Facebook that a single item has been added to the Cart then you could add an onclick event to the Cart Button like e.g.

Code:

onclick="fbq('track', 'AddToCart', {content_ids:['<actinic:variable name="ProductRef" encoding="perl" selectable="false" />'], content_type: 'product'}); return true;"

Or to the <form...> tag on the Product page, substituting onclick for onsubmit in the above code.

**AdamKing** · 29-Sep-2021, 01:05 PM

The onclick event to the add to cart button looks like the simplest solution. I'll give that a go.

Thanks again. This really has been one steep learning curve!

Announcement

Facebook Pixel setup for ProductID and Add to Cart

Facebook Pixel setup for ProductID and Add to Cart

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment