Hello,
we currently have [A] this integration with Shopify, but due to the checkout.liquid deprecation, we are looking into how we can prepare a dedicate app. [A] basically adds a script via "document.body.appendChild", in all pages of a store, plus, it sets the object "tc_vars" based on specific areas (E.g. product page, search page, checkout page, etc...).
First, we're scouting the "web-pixels-extension" and use the following code in "index.js":
import {register} from "@shopify/web-pixels-extension";
register(({ configuration, analytics, init, browser, settings }) => {
console.log("configuration: " + JSON.stringify(configuration));
console.log("analytics: " + JSON.stringify(analytics));
console.log("init: " + JSON.stringify(init));
console.log("browser: " + JSON.stringify(browser));
console.log("settings: " + JSON.stringify(settings));
// Sample subscribe to page view
analytics.subscribe('page_viewed', (event) => {
console.log('INFO | Page viewed! | event: ' + JSON.stringify(event));
});
analytics.subscribe('product_viewed', (event) => {
console.log('INFO | Product viewed! | event: ' + JSON.stringify(event));
});
analytics.subscribe('search_submitted', (event) => {
console.log('INFO | Search Submitted! | event: ' + JSON.stringify(event));
});
});This works in our development store.
Now, we'd like to integrate this simple script, in all pages, as we're doing with [A]:
(function (a, b, c, d) {
a = '[SCRIPT_URL]';
b = document;
c = 'script';
d = b.createElement(c);
d.src=a;
d.type = 'text/java' + c;
d.async = true;
b.body.appendChild(d);
})();but we're getting "ReferenceError: document is not defined".
Is there a way to access "document" from the "web-pixels-extension" ?
More importantly, do we have a better API/option we should look into ?
Many thanks,
/ca_partners.
