@w3f/utm-element
Version:
Web components and functions for UTM parameters data manipulation.
121 lines (113 loc) • 3.78 kB
HTML
<html>
<head>
<title>utm-element</title>
<meta charset="utf-8">
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<meta name="viewport" content="width=device-width">
</head>
<body>
<section>
<h1>
<a href="/">utm-element</a>
</h1>
<p>
Example and testing page for the
<code>utm-element</code> web component.
</p>
<p>
Open the developer console, and try <code>document.querySelector('utm-element').getUtm()</code>
</p>
</section>
<section>
<p>
List of test links:
</p>
<list-links>
<list-links-item href='/?utm=test-utm&this_is_not_utm=test-not-utm&ref=localhost'></list-links-item>
<list-links-item href='/?utm_example=test-utm_example&what_utm_is-this=no-a_utm'></list-links-item>
<list-links-item href='/?utm_example-b=an_other%20test&utm_example-c=one_more_utm'></list-links-item>
<list-links-item href='/?utm_source=twitter&utm_medium=social&utm_campaign=sub0&utm_content=call'></list-links-item>
<list-links-item href='/?utm_source=localhost&utm_medium=development&utm_campaign=sup1&utm_content=hello_world'></list-links-item>
</list-links>
</section>
<section>
<p>
Test UTM filled links
</p>
<ul>
<li>
<a
is="utm-link"
href="https://example.org"
>
example.org
</a>
</li>
<li>
<a
is="utm-link"
href="https://example.com"
>
example.com
</a>
</li>
<li>
<a
is="utm-link"
href="/yolo/what/example?test=yes"
>
other example test page
</a>
</li>
</ul>
</section>
<section>
<header>
<h2>hubspot example and test (inspect page)</h2>
<list-links>
<list-links-item href='/?utm_campaign=utm-element&utm_content=test&utm_term=test&utm_medium=test&utm_source=test&this_is_not_utm=test-not-utm&ref=https://web3.foundation/?ref=npm:w3f@utm-element'></list-links-item>
</list-links>
</header>
<main>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script type="module">
// hubspot requires jquery, to run the`onFormReady` callback
import 'https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js'
// import the hubspot utility helper
import {hubspotOnFormReady} from './index.js'
hbspt.forms.create({
region: "na1",
portalId: "7051618",
formId: "10599356-b6c4-4fb9-8b10-4853569b27cf",
onFormReady: (event) => {
const utmParams = hubspotOnFormReady(event)
console.info('Hubpost is loaded, and UTM are set on hidden inputs', utmParams)
}
});
</script>
</main>
</section>
</body>
<script type="module">
// this is our development utility
import ListLinks from './src/utils/list-links.js'
customElements.define('list-links', ListLinks)
</script>
<script type="module">
// import the element's definition
import {
defineUtmElement,
insertUtmElement,
defineLinkElement
} from './index.js'
defineUtmElement()
insertUtmElement()
/* define after the utm-element, has been defined and injected,
or we won't have access to its data */
defineLinkElement()
/* help message */
console.info('Try:', `document.querySelector('utm-element').getUtm()`)
console.info('Then:', `click on one of test links, and run the command again`)
</script>
</html>