Image Pixel in Additional Script works for desktop web but not for mobile web

Solved
ryanccsb
New Member
6 0 0

Hi all, 

I have an image pixel implemented within the Additional Script section, the script will capture the conversion data from successful orders.
This script seems to work perfectly fine on desktop web, but not on mobile web orders. I test this by placing test orders in mobile web view, but no conversion tracked.

This is the code within Additional Script:

<script>
Shopify.Checkout.OrderStatus.addContentBox('Hello')
</script>

{% for line_item in line_items %} 
<img src="https://shopback.go2cloud.org/aff_l?offer_id=3257&currency={{ shop.currency }}&amount={{ line_item.final_line_price | money_without_currency | remove: ',' }}&adv_sub={{ order.order_number }}&adv_sub2={{ customer.orders_count }}&adv_sub3={{ line_item.title }}&adv_sub4={{ line_item.sku }}&adv_sub5={{ line_item.vendor }}&adv_sub6={{ line_item.discount_allocations.title }}&adv_sub7={{ line_item.product.type }}" width="1" height="1"
style="display;none" />
{% endfor %}


first line of the code I was trying to add a display text on the thank you page to check if whatever that's added in this script appear in both web and mobile web - the 'Hello' text did appear in both web and mobile web thank you page.

second line of the code is the image pixel code that should send the conversion data at thank you page - it worked on desktop web, but not on mobile web.

Screenshot of this image pixel successfully running on desktop web: 
shopifytest.png

any experts here are able to shed light on the reason this image pixel code doesn't work on mobile web ?

0 Likes
tim
Shopify Expert
2865 119 942

Not 100% sure, but the display:none may be a reason -- browsers, especially mobile may skip loading image if it's not actually visible. So something like position:fixed; left:-100px; could be a better solution, or do not hide it at all...

BTW, when it works, do not forget to wrap the code with{% if first_time_accessed %} and {% endif %} as per  https://help.shopify.com/en/manual/orders/status-tracking/customize-order-status/first-time-accessed otherwise every time clients check order status will trigger another purchase event  and ruin your stats.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
ryanccsb
New Member
6 0 0

Hey tim, 

Thanks for the suggestion, however the image pixel is still not working on mobile web conversions.

<script>
Shopify.Checkout.OrderStatus.addContentBox('Hello')
</script>

{% for line_item in line_items %} 
<img src="https://shopback.go2cloud.org/aff_l?offer_id=3257&currency={{ shop.currency }}&amount={{ line_item.final_line_price | money_without_currency | remove: ',' }}&adv_sub={{ order.order_number }}&adv_sub2={{ customer.orders_count }}&adv_sub3={{ line_item.title }}&adv_sub4={{ line_item.sku }}&adv_sub5={{ line_item.vendor }}&adv_sub6={{ line_item.discount_allocations.title }}&adv_sub7={{ line_item.product.type }}" width="1" height="1" />
{% endfor %}

 

Any other kind soul out there that possibly know the reason for this image pixel not working on mobile web ?

0 Likes
tim
Shopify Expert
2865 119 942

Hmm.

When viewing order in admin, you can click "more actions", right click the "view order status page" and copy/paste here the address to the order status page preview. This will make it easier to debug further.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
ryanccsb
New Member
6 0 0

Yeah, sure - example of order status URL that were placed on mobile web : https://shopbackpixel.myshopify.com/53810495667/orders/9bea06f5e17cc902aa75d786b81b9d9a

If you view this in your desktop web the image pixel is working fine, and it will just re-sent the conversion from your current session - so this is more like debugging it from your current desktop web rather than debugging from previously failed pixel conversion.

Placing an order in mobile web still does not works.

I'm just wondering if there's anything else to set in theme file for mobile theme to load certain script ?

0 Likes
tim
Shopify Expert
2865 119 942

This is an accepted solution.

That's what I see in iPhone Simulator -- it seems to be loading the tracking image just fine for me:

Untitled.jpeg

Android may be different though.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
ryanccsb
New Member
6 0 0

I've checked into it, the pixel did fired on Web, Android, iOS Safari/Chrome - just didn't fire at the in-app platform that the test was made in. 

Should be good to close case for now. Thanks for taking your time to find out things here Tim!

0 Likes