@evrythng/context-script

context-script

Used to be integrated via the GTM to any web page and perform a completed scan to capture consumer behaviour in our platform.

Demo app

Go to the demo scan url to test the latest version of the context-script.

Account setup

• Go to the Product Cloud Team Management Settings page (ACCESS TOKENS tab) and generate an AccessToken with WebApplication role
• Go to the Dashboard Products page and create a product
• Set up basic redirection for the product, target page would be https://quizzical-brahmagupta-c71fe9.netlify.app with all query params configured

Redirection config

In order to configure redirection with the context-script create a rule with the following mandatory settings:

• Add condition -> Action type | is | scans - to prevent rule triggering during implicitScan
• Specify contextScriptRedirection: true in constants - necessary check to prevent other rules from triggering redirections (which leads to infinite redirection loops)

Example of the setup can be found in this project. Ask evt_engineering slack channel to invite you into ARNALDO'S MASTER ACCOUNT in production, if you dont have the access.

Local development

yarn install
yarn start

A browser tab with a rerun context-script button would be Open browser dev tools in order to see console logs. After making code changes and saving click rerun context-script button to rerun the script with latest changes.

Ask evt_engineering slack channel to invite you into Amplify Master Test Account in production, so that you could change redirection rules.

Deploy to NPM (QA)

In order to deploy to QA:

• increment the current version and make it alpha or beta
• create pre-release tag in GitHub with alpha or beta word in version
• update version in GTM context-script container

Deploy to NPM (release)

• remove alpha/beta from the version
• create release tag in GitHub
• update version in GTM context-script container

WARNING:

Please, change only dev rules during development, test ones refers to the demo page.

GTM variables and query params description

Requires cookies to be allowed by user or GTM_ARE_COOKIES_BLOCKED variable to be set according to the current cookies consent.

Accepts following query parameters:

• evt_token - required if GTM_EVT_TOKEN GTM variable is not specified
• evt_implicit_scan_id - optional
• evt_product_id - required, 'scan not performed' message would be displayed in console if not specified (the case when user manually opens the web page rather than scanning QR code)
• evt_thng_id - optional

GTM setup

Create custom html tag in GTM and specify the following (variables block can be removed, if not - according GTM variables needs to be defined):

<script>
  var GTM_EVT_REGION = '{{EVRYTHNG API Region}}'; // optional, region is 'us' if not specified
  var GTM_EVT_TOKEN = '{{EVRYTHNG API Token}}'; // optional, required if `evt_token` query param is not specified
  var GTM_EVT_ARE_COOKIES_BLOCKED = '{{Cookies Are Blocked}}'; // optional, value is 'false' if not specified
</script>

<script>
  var contextScript = document.createElement('script');
  contextScript.setAttribute('src', 'https://cdn.jsdelivr.net/npm/@evrythng/context-script@1/dist/context-script.js?v=' + Date.now());
  document.head.appendChild(contextScript);
</script>

Configuration example can be found in this GTM context-script container

Flow diagram

See context-page docs