How to add an HTML block in Thank You page of Shopify using Web Pixels?
One of the requirements of a subscriptions app is to include navigation to the customer portal on the Order Status page.
I created an app web pixel following instructions from here: App Web Pixels and I'm able to make it work. I see it logging in my Thank You page.
Here's a sample code I have:
import { register } from '@shopify/web-pixels-extension'
register(({ analytics, init, browser }) => {
console.log('browser object', browser.window)
console.log('browser.window object', browser.window)
const { window } = init.context
// Subscribe to Page Viewed event
analytics.subscribe('page_viewed', async (event) => {
console.log('window', window)
console.log('window.document', window.document)
console.log('event.context.document', event.context.document)
// Check if customer is on Thank You page
if (event.context.document.title.startsWith('Thank you')) {
const sectionContent = event.context.document.querySelector(
'.section__content'
)
const secondContentBox = sectionContent.querySelector(
'.content-box:nth-child(2)'
)
const newDiv = event.context.document.createElement('div')
newDiv.innerHTML = `Add an HTML block here for navigation`
sectionContent.insertBefore(newDiv, secondContentBox)
}
})
})Since Web Pixels strict sandbox, I can't figure out how to do querySelectors so I can insert HTML snippets to add a link to the customer portal. Here's the error I am getting:
Can anyone point me in the right direction on how to accomplish this please? Thanks!
